Hilfe beim Einfügen eines Headerbildes

  • Hallo Leute.


    Ich hin neu hier und eigentlich noch ziemlich grün hinter den Ohren was das html und css anlangt.

    Die Grundstruktur der Hauptnavigation einer responsiven Webseite hab ich schon mal gemacht. Das funktioniert auch so wie es soll.

    ich möchte unter der navigation ein Headerbild einzufügen. Das Bild hat die Maße 1080x240 Pixel und sollte auch zentriert sein bzw. sich auch responsive verhalten.


    Wie bringe ich das rein? Kann mir da wer helfen? :?::?::?::?::?::?::?:


    LG Michael

  • Wenn du das Bild unter die Navigation haben möchtest, dann mal nach "css background image" googlen.

    Ansonsten, wenn du mehr Hilfe zu dem Thema brauchst, dann musst du uns schon einen Link zu der Seite geben - oder wenigstens den Code (HTML und CSS) hier posten.

  • Ok sorry.


    Das mit dem background image ist gut gemeint, aber falsch gedacht.

    Hier sind die html und die css.

  • Warum zeichnest du dein Dokument mit dem HTML 5 Doctype aus und nutzt dann in der Folge XHTML Elemente?

    Besser / empfehlenswerter wäre utf-8 als Charset - und dann gleich HTML 5 konform einbinden mit <meta charset="utf-8"> .

    Dir fehlt im <head> das <meta name=viewport content="width=device-width, initial-scale=1">, womit Anzeigefehler bei mobilen Endgeräten vermieden werden.

    Absolute Größenangaben in Pixel sind kaum responsive - das solltest du anders lösen (zB mit % oder vw)

    Dein Bild möchtest du in das leere <div> einfügen?

    Dann mach dieses <div> genau so groß, wie dein .topnav und das dann nach Möglichkeit responsive. So vielleicht...

    Dann kannst du das Bild mit <img....> in das Div einfügen und mit width: 100%; formatieren.

  • Hallo Sailor.


    Danke für deine Infos und Tipps.

    Ich werde mir das morgen gleich mal anschauen am PC.

    Ich habe die HTML Datei bzw das dazugehörige CSS von der Seite W3 School da irgendwie zusammen gestellt.

    Ich bin in der Beziehung noch sehr neu. Alslo das mit der div meinst du z. B. So?

    <div>

    <img src="headerbild. png" alt="Bild" >

    </div>

    Und das in die html-datei rein?

  • Genau... und dem Div noch eine Klasse geben, damit es vom CSS angesprochen werden kann.

    Dem img-Tag auch noch eine Klasse zuweisen, dann das willst du ja auch formatieren.

  • Genau... und dem Div noch eine Klasse geben, damit es vom CSS angesprochen werden kann.

    Dem img-Tag auch noch eine Klasse zuweisen, dann das willst du ja auch formatieren.

    OK danke erstmal. Mal gleich morgen versuchaen.

  • Hallo Sailor.


    Jetzt hab ich das Ganze mal so probiert, wie du es mir gestern geschrieben hast. Aber leider schaut das alles noch immer sch...... aus.

    Hier mal ein Bild davon.

    Unbenannt.PNG

  • Hier ist der Code. Ich hab da sicher was übersehen. :/

  • Na ja... fast...!

    Das hast du im Code!

    Code
    1. <div style="padding-left:16px"></div>
    2. <div>
    3. <img src="images/Headerbild.png" alt="Bild">
    4. </div>

    Wo ist da die Klasse .Headerbild, die du im CSS für das Div mit dem Bild definiert hast? Außerdem .. das .div .Headerbild geht gar nicht! Eine Klasse .div gibt es nicht!!!

    Also 1. das leere Div löschen... 2. dem Div mit mit dem Bild die Klasse Headerbild geben... 3. dem Bild eine Klasse geben und die mit width: 100%; im CSS formatieren.

  • Wo ist da die Klasse .Headerbild, die du im CSS für das Div mit dem Bild definiert hast? Außerdem .. das .div .Headerbild geht gar nicht! Eine Klasse .div gibt es nicht!!!

    Also 1. das leere Div löschen... 2. dem Div mit mit dem Bild die Klasse Headerbild geben... 3. dem Bild eine Klasse geben und die mit width: 100%; im CSS formatieren.

    Stimmt das jetzt in der css?

    Das mit der html sollte eigentlich richtig sein.

    Code
    1. .Headerbild{
    2. width:100%;
    3. text-align: center;
    4. }
  • Oh nein... jetzt zum mitschreiben ;)

    Im CSS...

    im HTML...

    Code
    1. <div class="Headerbild"><img src="images/Headerbild.png" alt="ein Bild"></div>
  • Oh nein... jetzt zum mitschreiben ;)

    Hi.

    Danke für den Code. Es funktioniert. Wenn ich einen kleinen Abstand zwischen Navi und Bild haben möchte brauch ich ja nur beim .headerbild noch das margin-top einsetzen?

  • Nicht fragen.... ausprobieren ;)!

    Ich hab´s hinbekommen und auch der Abstand wird mir brav angezeigt.

    Mal eine ganz andere Frage. Gibt es sowas wie Boxen wo man Bilder usw. reinsetzen kann? Wenn man die anklickt öffnet sich so ein ähnliches Popup-Fenster öffnet?

  • Natürlich gibt es so was - erkläre nur ganz genau was du vor hast, dann wirst du hier bestimmt ein paar Antworten und Tipps zur Lösung bekommen.

    Was verstehst du unter 'Boxen'?

    Was ist 'Bilder usw.'?

    Was ist 'so ein ähnliches Popup-Fenster'?

    Das musst du schon näher kund tun und am besten auch schon einen Code-Entwurf von dem haben, was du versucht hast, beifügen.