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.614   Beiträge: 428.155   Mitglieder: 28.214   Aktive Mitglieder: 47
                Willkommen an unser neuestes Mitglied, berry25.

                Online-Benutzer

                Einklappen

                322 Benutzer sind jetzt online. Registrierte Benutzer: 5, Gäste: 317.

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

                Die neuesten Themen

                Einklappen

                • FBA
                  Antwort auf Wordpress Online Shop
                  Danke für eure Antwort. Ich stimme euch zu.. Ein Shop würde ich auch nicht mit einem Website Builder bauen. Ich war auch der suche nach was anderem. Bin mittlerweile auch fündig geworden. https://scripteden.com/download/creator-builder/ dort sollen die einzelnen Module mit Preisen versehen werden. Ich...
                  Heute, 17:08
                • daniel5959
                  Antwort auf Testing des Responsive Design
                  Hallo,

                  auch im Browser gibt es eine Testumgebung, die allerdings nicht alle Fehler anzeigt, aber für schnelle Tests durchaus geeignet.

                  Von Browser zu Browser gibt es Unterschiede, deshalb am Besten mit PC oder Notebook in beiden Browsern testen.

                  Firefox > Extras...
                  Heute, 16:12
                • berry25
                  Testing des Responsive Design
                  Hallo miteinander! Wie schon der Titel sagt, habe ich Schwierigkeiten beim Responsive Design bei meinen Projekten. Ich benutzte das CSS-Framework von Bootstrap, was ja Responsive freundlich sein soll. Meine Tests liefen eigentlich bis jetzt über das DevTool und dann anschließend über 3 Endgeräte...
                  Heute, 15:24
                • daniel5959
                  Antwort auf corona
                  Nachtrag:

                  So wie es aussieht werden wir wohl noch Monate mit der Coronakirse kämpfen müssen und anschliessend mit einer jahrelangen Finanz- und Wirtschaftskrise.

                  Die versprochenen finanziellen Hilfen werden sich für die kleinen Gewerbetreibenden wohl als Bürokratiemonster...
                  Heute, 05:25
                • dettec61
                  Antwort auf dynpage und das Einbetten von Videos...
                  Danke, bin es gerade am testen und warte auf die ersten Rückmeldungen.....
                  31.03.2020, 22:12

                Die neuesten Beiträge

                Einklappen

                Lädt...
                X