Ankündigung

Einklappen
Keine Ankündigung bisher.

Überschrift auf ein Bild positionieren

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Überschrift auf ein Bild positionieren

    Guten Morgen liebe Gemeinde,


    Ich bin Anfänger im Bereich Website Erstellung und mache mich momentan mit HTML und CSS vertraut.
    Zurzeit bin ich dabei meine erste Website zu bauen und komme nun leider nicht mehr voran. Ich hab zu diesem Thema im Internet auch nichts gefunden und wenn, dann hat es nicht geklappt

    Ich habe ein Bild eingefügt und möchte auf dem Bild meine Überschrift h1 haben. Leider ist nach dem einfügen des Bildes die Überschrift verschwunden( in den Hintergrund gewandert). Ich würde sie gerne auf dem Bild drauf haben. Wie mache ich das genau ? Kann mir das eventuell mal jemand erklären?


    meine Codes:

    HTML:

    <!doctype html>
    <html lang="de">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content=width=device-widht, initial-scale=1.0>
    <title>Beispiel </title>
    <link rel="stylesheet" href="formate.css">
    </head>
    <body>

    <nav>
    <ul>
    <li><a href="#" title="Startseite">Willkommen</a></li>
    <li><a href="#" title= "Unsere Leistungen">Leistungen</a></li>
    <li><a href="#" title="Das sind wir">Über uns</a></li>
    <li><a href="#" title= "So erreichen Sie uns">Kontakt</a></li>
    <li><a href="#" title="Rechtliches">Impressum</a></li>
    </ul>
    </nav>
    </p>
    </nav>

    <h1>Herzlich Willkommen<h1>


    <h2>Unsere Leistungen</h2>


    <img src="img/nice.jpg" class="nice"
    widht="100%"
    height="276.719px"



    </body>
    </html>



    CSS:



    p {font-size: 1.5em; text-align:justify;font-family:Lucida Handwriting,sans-serif;color:white;
    margin:0px;
    margin-right:200px;
    margin-left:200px;
    padding-top:200px;
    padding-bottom:200px;
    }

    Body {
    background-size:cover;
    width:auto;
    height:16000px;}

    .nice {

    width:100%;
    height:700px;
    overflow:hidden;
    position:absolute;
    top:71px
    ;

    }


    * {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
    }




    nav {
    float: left;
    width: 100%;
    background: #2b2b2b;
    font-size: 16px;
    margin:auto;
    position:center;
    text-align:center;

    }

    nav ul {
    display:inline-block;
    margin: auto;
    padding: 0;
    text-align:center;
    }

    nav a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding:10px;
    margin:0;
    }

    nav ul li {
    margin:auto;
    float: left;
    list-style: none;
    color: #fff;
    transition: 0.5s;
    text-align:center;
    }

    nav ul li a {
    padding: 20px;
    }

    nav ul > li.submenu > a:after {
    position: relative;
    float: right;
    content: '';
    margin-left: 10px;
    margin-top: 5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    border-bottom: 5px solid transparent;
    text-align:center;
    }

    nav ul ul li.submenu > a:after {
    margin-left: auto;
    margin-right: -10px;
    border-left: 5px solid #fff;
    border-right: 5px solid transparent;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    }

    nav ul li:hover {
    background: #4096ee;
    }

    nav ul ul {
    margin:auto;
    background: #333;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    z-index: 1;
    }

    nav ul ul li {
    float: center;
    width: 200px;
    border-bottom: 1px solid #555;
    text-align:center;
    }

    nav ul ul li a {
    padding: 10px 20px;
    }

    nav ul ul li:last-child {
    border-bottom: none;
    }

    nav ul li:hover > ul {
    top: 100%;
    left: 0;
    }

    nav ul ul li:hover > ul {
    top: 0;
    left: 200px;
    }

    }
    .overlay{position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color:#3a3a3a;}

    .container:hover .overlay {
    opacity: 1;
    }



    h1 {position:relative;
    text-align:center;
    font-family: Rockwell, Georgia, "Times New Roman", Times, sans-serif;
    font-size: 3em; line-height: 0.5em;
    margin: 0.3em 0.3em 1em 0.3em;
    color: white;
    text-shadow:
    rgba(0,0,0,0.5) -1px 0,
    rgba(0,0,0,0.3) 0 -1px,
    rgba(255,255,255,0.5) 2px 2px,
    rgba(0,0,0,0.3) -1px -2px;
    margin-top:-300px;
    padding-top:110px;
    top:50%;

    }

    h2 {font-family: Rockwell, Georgia, "Times New Roman", Times, sans-serif;
    text-align:center;
    font-size: 2.5em; line-height: 0.5em;
    margin: 0.3em 0.3em 1em 0.3em;
    color: white;
    text-shadow:
    rgba(0,0,0,0.5) -1px 0,
    rgba(0,0,0,0.3) 0 -1px,
    rgba(255,255,255,0.5) 2px 2px,
    rgba(0,0,0,0.3) -1px -2px;
    padding-top:1000px;
    position:absolute;
    top:500px;

    }
    li{font-size:1.5em;
    }
    li li {font-size:1em;}

    tr{font-size:1.5em;}




    Ich danke euch schon einmal im Voraus und freue mich auf eure Antworten.


    Lg













  • #2
    Ohne deine Bilder können wir die Seite nicht nachbauen. Dein CSS-Quelltext ist zudem sehr unübersichtlich. Hast du einen Link zu der Seite?

    Insgesamt scheinen deine Lernquelle und / oder deine Vorstellungen recht veraltet zu sein.

    Die Grafik für die h1-Überschrift solltest du als Hintergrundgrafik einfügen.

    Vermeide so weit wie möglich Größenangaben (speziell height), float, position und ähnlich eher veraltete Angaben. Beschäftige dich mit Flexbox (display: flex) und CSS-Grid (display: grid).

    Auch auf Grafiken sollte weitestgehend verzichtet werden. Also nur notwendige Grafiken, ansonsten sparsam einsetzen. Grafiken hinter Text machen diesen immer schlechter lesbar.

    Verwende aktuelle HTML-Elemente. Dadurch wird gleichzeitig der Quelltext viel übersichtlicher.

    Kommentar


    • #3
      Hier kannst Du dir ansehen, wie man einen Text über ein Bild legt:
      https://jsfiddle.net/Sempervivum/k84scz1a/25/

      Außerdem sehe ich hier:
      HTML-Code:
      <img src="img/nice.jpg" class="nice"
      widht="100%"
      height="276.719px"
      Fehler in deinem HTML. Überprüfe das Ganze am besten mal mit dem Validator:
      https://validator.w3.org

      Kommentar


      • #4
        Zitat von MrMurphy Beitrag anzeigen
        Ohne deine Bilder können wir die Seite nicht nachbauen. Dein CSS-Quelltext ist zudem sehr unübersichtlich. Hast du einen Link zu der Seite?

        Insgesamt scheinen deine Lernquelle und / oder deine Vorstellungen recht veraltet zu sein.

        Die Grafik für die h1-Überschrift solltest du als Hintergrundgrafik einfügen.

        Vermeide so weit wie möglich Größenangaben (speziell height), float, position und ähnlich eher veraltete Angaben. Beschäftige dich mit Flexbox (display: flex) und CSS-Grid (display: grid).

        Auch auf Grafiken sollte weitestgehend verzichtet werden. Also nur notwendige Grafiken, ansonsten sparsam einsetzen. Grafiken hinter Text machen diesen immer schlechter lesbar.

        Verwende aktuelle HTML-Elemente. Dadurch wird gleichzeitig der Quelltext viel übersichtlicher.


        Zunächst einmal vielen Dank für deine Tipps. Ich hatte bereits versucht das Bild als Hintergrundbild einzustellen, dort hatte ich aber das Problem, dass das Bild auf der gesamten Website zu sehen war und sich immer untereinander wiederholt hat. Ich will das Bild bloß einen kleinen Teil unter der Menüleiste haben. Mit der vollen Breite also width : 100% , und height:700 px ... Ich habs irgendwie nicht hinbekommen. Mein Body hat nämlich auch eine Höhe von 16000px. Es soll eine Onepage Website werden. (Alle Inhalte untereinander)


        Im Anhang findet ihr ein Bild zu meiner Website, genau so hatte ich es mir auch vorgestellt nur mit der weißen Überschrift auf dem Bild.
        Keine Sorge die Überschrift ist darauf sehr gut zu sehen.


        Für weitere Antworten von euch wäre ich euch sehr dankbar!

        bis dahin


        Lg

        Kommentar


        • #5
          Die Wiederholung/Kachelung und Größe von Hintergrundbildern kann man mit CSS-Eigenschaften regeln, siehe:
          https://www.w3schools.com/CSSref/pr_...und-repeat.asp und
          https://www.w3schools.com/CSSref/css...round-size.asp

          Du kannst Hintergrundbilder auch anderen HTML-Elementen als nur dem Body zuordnen. Wenn es ein Hintergrundbild für eine Überschrift sein soll, dann könntest Du es also auch h1 zuordnen und dann dem h1-Element die gewünschten Abmessungen geben.

          Kommentar


          • #6
            Kann mich den anderen Post anschließen, das dein Code auf jeden Fall nicht optimal ist

            Hab mal auf die schnelle deinen Code angepasst, hoffe du kannst es so besser nachvollziehen..

            HTML:
            <!doctype html>
            <html lang="de">
            <head>
            <meta charset="utf-8">
            <meta name="viewport" content=width=device-widht, initial-scale=1.0>
            <title>Beispiel </title>
            <link rel="stylesheet" href="formate.css">
            </head>
            <body>

            <nav>
            <ul>
            <li><a href="#" title="Startseite">Willkommen</a></li>
            <li><a href="#" title= "Unsere Leistungen">Leistungen</a></li>
            <li><a href="#" title="Das sind wir">Über uns</a></li>
            <li><a href="#" title= "So erreichen Sie uns">Kontakt</a></li>
            <li><a href="#" title="Rechtliches">Impressum</a></li>
            </ul>
            </nav>
            <div class="container">
            <img src="./nice.jpg" class="nice" width="100%" />
            <div class="overlay">
            <div class="center">
            <h1>Herzlich Willkommen</h1>


            <h2>Unsere Leistungen</h2>
            </div>


            </div>
            </div>


            </body>
            </html>

            CSS:
            p {font-size: 1.5em; text-align:justify;font-family:Lucida Handwriting,sans-serif;color:white;
            margin:0px;
            margin-right:200px;
            margin-left:200px;
            padding-top:200px;
            padding-bottom:200px;
            }

            Body {
            width:100%;
            }

            .nice {
            height: 80vh; // Höhe für Bild und Overlay
            }
            .container{
            position: relative;
            height: 80vh; // Höhe für Bild und Overlay
            }
            * {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
            box-sizing: border-box;
            }

            nav {
            width: 100%;
            background: #2b2b2b;
            font-size: 16px;
            text-align:center;
            }

            nav ul {
            display:inline-block;
            margin: auto;
            padding: 0;
            text-align:center;
            }

            nav a {
            display: block;
            color: #fff;
            text-decoration: none;
            padding:10px;
            margin:0;
            }

            nav ul li {
            margin:auto;
            float: left;
            list-style: none;
            color: #fff;
            transition: 0.5s;
            text-align:center;
            }

            nav ul li a {
            padding: 20px;
            }

            nav ul > li.submenu > a:after {
            position: relative;
            float: right;
            content: '';
            margin-left: 10px;
            margin-top: 5px;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid #fff;
            border-bottom: 5px solid transparent;
            text-align:center;
            }

            nav ul ul li.submenu > a:after {
            margin-left: auto;
            margin-right: -10px;
            border-left: 5px solid #fff;
            border-right: 5px solid transparent;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            }

            nav ul li:hover {
            background: #4096ee;
            }

            nav ul ul {
            margin:auto;
            background: #333;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
            z-index: 1;
            }

            nav ul ul li {
            float: center;
            width: 200px;
            border-bottom: 1px solid #555;
            text-align:center;
            }

            nav ul ul li a {
            padding: 10px 20px;
            }

            nav ul ul li:last-child {
            border-bottom: none;
            }

            nav ul li:hover > ul {
            top: 100%;
            left: 0;
            }

            nav ul ul li:hover > ul {
            top: 0;
            left: 200px;
            }


            .overlay{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
            width: 100%;
            background-color:rgba(0,0,0,0.5);}

            .center{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            }



            h1 {position:relative;
            text-align:center;
            font-family: Rockwell, Georgia, "Times New Roman", Times, sans-serif;
            font-size: 3em; line-height: 0.5em;
            margin: 0.3em 0.3em 1em 0.3em;
            color: white;
            text-shadow:
            rgba(0,0,0,0.5) -1px 0,
            rgba(0,0,0,0.3) 0 -1px,
            rgba(255,255,255,0.5) 2px 2px,
            rgba(0,0,0,0.3) -1px -2px;


            }

            h2 {font-family: Rockwell, Georgia, "Times New Roman", Times, sans-serif;
            text-align:center;
            font-size: 2.5em; line-height: 0.5em;
            margin: 0.3em 0.3em 1em 0.3em;
            color: white;
            text-shadow:
            rgba(0,0,0,0.5) -1px 0,
            rgba(0,0,0,0.3) 0 -1px,
            rgba(255,255,255,0.5) 2px 2px,
            rgba(0,0,0,0.3) -1px -2px;


            }
            li{font-size:1.5em;
            }
            li li {font-size:1em;}

            tr{font-size:1.5em;}

            Kommentar


            • #7
              FBA


              Ich danke dir rechtherzlich. Du hattest zwar einen kleinen Fehler drin, den konnte ich aber selbst beheben. Background color musste gelöscht werden und dann hat es geklappt.


              Danke an alle une bis zum nächsten Mal ✌


              Lg

              Kommentar


              • #8
                Gerne!

                Falls du mit Fehler das meinst "background-color:rgba(0,0,0,0.5)", damit kannst du einstellen wie durchsichtig das Overlay ist indem du den letzen Wert ( in dem Fall 0.5 ) anpasst zwischen 0 und 1. Zur info

                Kommentar

                homepage-forum.de - Hilfe für Webmaster! Statistiken

                Einklappen

                Themen: 56.617   Beiträge: 428.180   Mitglieder: 28.221   Aktive Mitglieder: 49
                Willkommen an unser neuestes Mitglied, Web&amp;IT Gesemann.

                Online-Benutzer

                Einklappen

                215 Benutzer sind jetzt online. Registrierte Benutzer: 2, Gäste: 213.

                Mit 3.502 Benutzern waren am 23.01.2020 um 17:20 die meisten Benutzer gleichzeitig online.

                Die neuesten Themen

                Einklappen

                • Testie
                  Antwort auf FTP-Rechte
                  Ich glaube das ist eine Servereinstellung. In php.ini gibt es settings dafür. post_max_size und upload_max_filesize ​​​​​​.

                  Nach der Änderung den Service neu starten.
                  Gestern, 18:28
                • Claus
                  Antwort auf FTP-Rechte
                  So, jetzt habe ich mit Eurer Hilfe ein Script am laufen, und es tut genau, was es soll - bei kleineren Dateien.
                  Es geht bei diesem Chorprojekt aber um große Dateien, alle +/- 100 MB. Da funktioniert es nicht, ohne Fehlermeldung. Gibt es für POST eine Obergrenze? Per FTP kann ich die Dateien...
                  Gestern, 18:01
                • Testie
                  Antwort auf FTP-Rechte
                  Ja, habe die Sekunden übersehen, hab komischerweise gedacht er fügt nur den Tag hinzu. ...
                  Gestern, 17:07
                • Claus
                  Antwort auf FTP-Rechte
                  Vielen Dank an alle Antworter! Damit komme ich jetzt weiter.

                  Claus
                  Gestern, 12:29
                • Ingo
                  Antwort auf FTP-Rechte
                  Hi,

                  die Schleife ist so natürlich unsinnig, aber Endlos wäre sie aber nur, wenn eine vorhandene Datei binnen einer Sekunde noch zweimal hochgeladen würde.

                  Ansonsten ist das Script aber auch suboptimal. Mal ein Auszug aus einem meiner Scripts:
                  PHP-Code:
                  <?php
                  if(!defined('cr'))
                  ...
                  Gestern, 10:03

                Die neuesten Beiträge

                Einklappen

                • Claus
                  FTP-Rechte
                  Moin aus Hamburg!
                  Für ein Projekt brauche ich folgendes:
                  Jeder Teilnehmer soll per FTP Dateien hochladen können. Aber weder sehen noch herunterladen, was schon da ist. Und der Chef soll alles sehen und auch wieder herunterladen.
                  Ich nin ein Cobol- und Mainframe-Dinosaurier und bekomme...
                  06.04.2020, 19:00
                • Testie
                  Antwort auf FTP-Rechte
                  Ich glaube das ist eine Servereinstellung. In php.ini gibt es settings dafür. post_max_size und upload_max_filesize ​​​​​​.

                  Nach der Änderung den Service neu starten.
                  Gestern, 18:28
                • Claus
                  Antwort auf FTP-Rechte
                  So, jetzt habe ich mit Eurer Hilfe ein Script am laufen, und es tut genau, was es soll - bei kleineren Dateien.
                  Es geht bei diesem Chorprojekt aber um große Dateien, alle +/- 100 MB. Da funktioniert es nicht, ohne Fehlermeldung. Gibt es für POST eine Obergrenze? Per FTP kann ich die Dateien...
                  Gestern, 18:01
                • Testie
                  Antwort auf FTP-Rechte
                  Ja, habe die Sekunden übersehen, hab komischerweise gedacht er fügt nur den Tag hinzu. ...
                  Gestern, 17:07
                • Claus
                  Antwort auf FTP-Rechte
                  Vielen Dank an alle Antworter! Damit komme ich jetzt weiter.

                  Claus
                  Gestern, 12:29
                • Ingo
                  Antwort auf FTP-Rechte
                  Hi,

                  die Schleife ist so natürlich unsinnig, aber Endlos wäre sie aber nur, wenn eine vorhandene Datei binnen einer Sekunde noch zweimal hochgeladen würde.

                  Ansonsten ist das Script aber auch suboptimal. Mal ein Auszug aus einem meiner Scripts:
                  PHP-Code:
                  <?php
                  if(!defined('cr'))
                  ...
                  Gestern, 10:03
                • Testie
                  Antwort auf FTP-Rechte
                  Hallo,

                  hier ein kleiner Auszug aus dem Script (Rest habe ich mir nicht angesehen):

                  Code:
                  // Abfragen ob Datei schon vorhanden, wenn ja Datum anhängen
                  if(file_exists($update_path)) {
                    $new_name = date('Y-m-d-H-i-s');
                    do {
                       $update_path = $upload_folder.$file_name.'_'.$new_name.'.'.$file_extension;
                  ...
                  Gestern, 07:48
                • daniel5959
                  Antwort auf FTP-Rechte
                  Hallo,

                  fertige Uplaod-Scripte lassen sich im Internet finden, z.B. hier

                  https://www.programmier-tipps.de/201...pload-mit-php/

                  Allerdings bin ich kein PHP-Profi, daher kann ich nicht bewerten wie sicher es ist - aber vielleicht Ingo....
                  Gestern, 01:08
                • Claus
                  Antwort auf FTP-Rechte
                  Hallo Ingo und Danke für die schnelle Antwort. Ein Uploadscript mag für Dich simpel sein, für mich ist es eher ein böhmisches Dorf....
                  06.04.2020, 21:00
                • Ingo
                  Antwort auf FTP-Rechte
                  Hi,
                  Du könntest allenfalls für jeden User ein Verzeichnis erstellen und freigeben. Was Du aber eher willst, lässt sich mit einem simplen Upload-Script in PHP oder anderen serverseitigen Sprachen realisieren.

                  Gruß
                  Ingo
                  06.04.2020, 20:50
                Lädt...
                X