Kopfzeile - Positioniere das Bild neben der Navigationsleiste und lasse das Bild "hängen". Danach zentrieren Sie beide Elemente horizontal an der Unterseite des Headers

Question

Es ist ein bisschen schwer zu erklären. Ich habe einen ziemlich großen Header mit einer Breite von 90% der Breite des Dokuments. Ich muss eine Navbar horizontal an der Unterseite des Headers zusammen mit einem Bild "kleben" auf der linken Seite zentrieren. Das Bild selbst ist etwas größer als die Navigationsleiste, daher sollte die Navigationsleiste nicht größer werden. Darüber hinaus sollte die Hälfte des Bildes den Header "ausstrecken", also denke ich, dass es etwas mit der absoluten Positionierung zu tun hat. Ich weiß, wie man die Navbar an der Unterseite positioniert, aber ich verstehe nicht, wie man die anderen Sachen macht. Ich verstehe, dass es eine schreckliche Erklärung war, also zeichnete ich etwas, um Ihnen zu zeigen, was ich meine: DRAWING

Ich hoffe, dass jemand mir dabei helfen kann.

Ich versuchte Art tut es so (ich weiß, es ist nicht das beste Beispiel, aber das ist, wie ich es zu tun versucht):

* { 
     padding: 0; 
     margin: 0; 
    } 

    #header { 
     position: relative; 
     width: 80%; 
     height: 700px; 
     margin: 0 auto; 
     background-color: yellow; 
    } 

    #main_nav { 
     position: absolute; 
     bottom: 0; 
     margin: 0 auto; 
     left: 0; 
     right: 0; 
     width: 80%; 
    } 

    #main_nav > ul { 
     display: block; 
     list-style-type: none; 
     width: 100%; 
     text-align: center; 
    } 

    #main_nav > ul li { 
     display: inline-block; 
     width: 15%; 
     height: 70px; 
     line-height: 70px; 
     color: white; 
     text-align: center; 
     background-color: blue; 
    } 

    .image { 
     width: 350px; 
     height: 185px; 
     line-height: 185px; 
     background-color: red; 
     color: white; 
     font-size: 48px; 
     text-align: center; 
     margin-bottom: -120px; 
    } 

    main { 
     margin-top: 150px; 
     padding: 50px; 
     text-align: center; 
     font-size: 32px; 
    } 

Der Körper:

<div id="header"> 
    <nav id="main_nav"> 
     <div class="image">IMAGE</div> 
     <ul> 
      <li>Nav 1</li> 
      <li>Nav 2</li> 
      <li>Nav 3</li> 
      <li>Nav 4</li> 
     </ul> 
    </nav> 
</div> 

<main> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore aperiam fugit consequuntur voluptatibus ex, sint iure in, distinctio sed dolorem aspernatur veritatis repellendus dolorum voluptate, animi libero, officiis eveniet accusamus! 
</main> 

I‘ d möchte, dass das Bild auf der linken Seite der Navigation bleibt und diese beide horizontal (und ohne einander zu überlagern, wie es gerade geschieht) zentriert. Und ist die negative Positionierung sogar der richtige Weg, um das Bild zu verschieben?

Answer 1

Sie könnten versuchen, den Container mit margin: 0 auto; zu zentrieren und dann das Bild mit einem negativen oberen Rand zu positionieren. Positionieren Sie dann den Menübereich mit einem linken Padding, um die Breite des Bildes zu überspringen.