Header-Elemente nicht gut ausgerichtet

Question

Ich versuche, ein bisschen schicker Website zu bauen, aber ich kann ein Problem nicht erarbeiten, ich habe seit Stunden versucht, so dachte ich, ich werde Sie fragen, Jungs:

Ich möchte ein horizontales Menü von 2 Teilen mit einem schrumpfenden Bild in der Mitte machen: A1 A2 A3 GRAU SQUARE B1 B2.

PROBLEM: das Menü A schwebt nach rechts und ignoriert das graue Quadrat.

Fiddle: https://jsfiddle.net/8d890hmx/

$(document).on('scroll', function() { 
 
    if ($(document).scrollTop() >= 200) { 
 
    $('.nav img').removeClass('logos'); 
 
    $('.nav img').addClass('sticky'); 
 
    } else { 
 
    $('.nav img').removeClass('sticky'); 
 
    $('.nav img').addClass('logos'); 
 
    } 
 
}); 
 

 
$(document).on('scroll', function() { 
 
    if ($(document).scrollTop() >= 300) { 
 
    $('ul').removeClass('ul-big'); 
 
    } else { 
 
    $('ul').addClass('ul-big'); 
 
    } 
 
}); 
 

 
$(document).on('scroll', function() { 
 
    if ($(document).scrollTop() >= 300) { 
 
    $('.nav').addClass('ul-bcg'); 
 
    } else { 
 
    $('.nav').removeClass('ul-bcg'); 
 
    } 
 
});

body, 
 
html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    background-color: white; 
 
    margin: 0 auto; 
 
} 
 

 
.placeholder { 
 
    width: 100%; 
 
    height: 450px; 
 
} 
 

 
p { 
 
    color: white; 
 
    font-family: "Helvetica Neue", Arial, sans-serif; 
 
    font-weight: 200; 
 
    -webkit-font-smoothing: antialiased; 
 
    font-size: 17px; 
 
} 
 

 
.nav { 
 
    position: fixed; 
 
    top: 0; 
 
    margin-top: 0; 
 
    padding-top: 0; 
 
    max-height: 200px; 
 
    width: 100%; 
 
    text-align: center; 
 
    z-index: 2; 
 
    background-color: black; 
 
    opacity: .5; 
 
} 
 

 
.logos { 
 
    width: 250px; 
 
    transition: all 0.3s ease-in-out; 
 
    z-index: 1; 
 
    padding-top: 20px; 
 
    margin: 0 auto; 
 
} 
 

 
.sticky { 
 
    width: 100px; 
 
    transition: all 0.3s ease-in-out; 
 
    display: inline-block; 
 
} 
 

 
.ul { 
 
    position: absolute; 
 
    transition: all 0.3s ease-in-out; 
 
    width: 30%; 
 
    display: inline-block; 
 
    height: 150px; 
 
    margin: 45px; 
 
} 
 

 
.ul-big { 
 
    display: none; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 

 
li { 
 
    display: inline; 
 
    color: white; 
 
    padding: 10px; 
 
    font-weight: 200; 
 
    -webkit-font-smoothing: antialiased; 
 
    font-size: 17px; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 

 
a { 
 
    color: inherit; 
 
    font-family: "Helvetica Neue", Arial, sans-serif; 
 
    font-weight: inherit; 
 
    -webkit-font-smoothing: antialiased; 
 
    font-size: inherit; 
 
    text-decoration: none; 
 
} 
 

 
a:hover { 
 
    color: grey; 
 
    transition: 0.5s; 
 
} 
 

 
h1 { 
 
    font-family: "Helvetica Neue", Arial, sans-serif; 
 
    font-size: 30px; 
 
    -webkit-font-smoothing: antialiased; 
 
    font-weight: lighter; 
 
    color: white; 
 
} 
 

 
.content { 
 
    clear: both; 
 
    background-color: black; 
 
    background: rgba(0, 0, 0, 0.7); 
 
    padding: 3%; 
 
    z-index: -1; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="nav"> 
 
    <div class="ul"> 
 
     <ul class="ul-big"> 
 
     <li><a href=horses.html>A1</a></li> 
 
     <li><a href=shows.html>A2</a></li> 
 
     <li><a href=#>A3</a></li> 
 
     </ul> 
 
    </div> 
 

 
    <img class='logos' src="http://www.arenakettering.co.uk/wp-content/uploads/grey-square-288x300.png"> 
 

 
    <div class="ul"> 
 
     <ul class="ul-big"> 
 
     <li><a href=#>B1</a></li> 
 
     <li><a href=#>B2</a></li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 

 
</div> 
 

 

 

 

 
<div class="placeholder"></div> 
 
<div class="content"> 
 
    <h1> Main text</h1> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 

 

 
</div>

Ich würde Ihre Hilfe sehr zu schätzen!

Answer 1

Mit position: absolute auf .ul ist es aus dem normalen Fluss heraus und zeigt das Bild zuerst.

Eine Möglichkeit, dies zu lösen, ist das Hinzufügen einer eindeutigen Klasse zu jedem ul und die Verwendung von Rändern, um die Dinge zu verteilen.

Beachten Sie auch, dass .ul hat im nav unter Verwendung left und right Eigenschaften und margin: auto zentriert worden.

fiddle

$(document).on('scroll', function() { 
 
    if ($(document).scrollTop() >= 200) { 
 
    $('.nav img').removeClass('logos'); 
 
    $('.nav img').addClass('sticky'); 
 
    } else { 
 
    $('.nav img').removeClass('sticky'); 
 
    $('.nav img').addClass('logos'); 
 
    } 
 
}); 
 

 
$(document).on('scroll', function() { 
 
    if ($(document).scrollTop() >= 300) { 
 
    $('ul').removeClass('ul-big'); 
 
    } else { 
 
    $('ul').addClass('ul-big'); 
 
    } 
 
}); 
 

 
$(document).on('scroll', function() { 
 
    if ($(document).scrollTop() >= 300) { 
 
    $('.nav').addClass('ul-bcg'); 
 
    } else { 
 
    $('.nav').removeClass('ul-bcg'); 
 
    } 
 
});

body, 
 
html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    background-color: white; 
 
    margin: 0 auto; 
 
} 
 

 
.placeholder { 
 
    width: 100%; 
 
    height: 450px; 
 
} 
 

 
p { 
 
    color: white; 
 
    font-family: "Helvetica Neue", Arial, sans-serif; 
 
    font-weight: 200; 
 
    -webkit-font-smoothing: antialiased; 
 
    font-size: 17px; 
 
} 
 

 
.nav { 
 
    position: fixed; 
 
    top: 0; 
 
    margin-top: 0; 
 
    padding-top: 0; 
 
    max-height: 200px; 
 
    width: 100%; 
 
    text-align: center; 
 
    z-index: 2; 
 
    background-color: black; 
 
    opacity: .5; 
 
} 
 

 
.logos { 
 
    width: 250px; 
 
    transition: all 0.3s ease-in-out; 
 
    z-index: 1; 
 
    padding-top: 20px; 
 
    margin: 0 auto; 
 
} 
 

 
.sticky { 
 
    width: 100px; 
 
    transition: all 0.3s ease-in-out; 
 
    display: inline-block; 
 
} 
 

 
.ul { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    transition: all 0.3s ease-in-out; 
 
    width: 100%; 
 
    display: inline-block; 
 
    height: 150px; 
 
    margin-top: 45px; 
 
} 
 

 
.ul-one ul { 
 
    margin-right: 300px; /* adjust as you need */ 
 
} 
 

 
.ul-two ul { 
 
    margin-left: 250px; /* adjust as you need */ 
 
} 
 

 
.ul-big { 
 
    display: none; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 

 
ul { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
li { 
 
    display: inline; 
 
    color: white; 
 
    padding: 10px; 
 
    font-weight: 200; 
 
    -webkit-font-smoothing: antialiased; 
 
    font-size: 17px; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 

 
a { 
 
    color: inherit; 
 
    font-family: "Helvetica Neue", Arial, sans-serif; 
 
    font-weight: inherit; 
 
    -webkit-font-smoothing: antialiased; 
 
    font-size: inherit; 
 
    text-decoration: none; 
 
} 
 

 
a:hover { 
 
    color: grey; 
 
    transition: 0.5s; 
 
} 
 

 
h1 { 
 
    font-family: "Helvetica Neue", Arial, sans-serif; 
 
    font-size: 30px; 
 
    -webkit-font-smoothing: antialiased; 
 
    font-weight: lighter; 
 
    color: white; 
 
} 
 

 
.content { 
 
    clear: both; 
 
    background-color: black; 
 
    background: rgba(0, 0, 0, 0.7); 
 
    padding: 3%; 
 
    z-index: -1; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="nav"> 
 
    <div class="ul ul-one"> 
 
     <ul class="ul-big"> 
 
     <li><a href=horses.html>A1</a></li> 
 
     <li><a href=shows.html>A2</a></li> 
 
     <li><a href=#>A3</a></li> 
 
     </ul> 
 
    </div> 
 

 
    <img class='logos' src="http://www.arenakettering.co.uk/wp-content/uploads/grey-square-288x300.png"> 
 

 
    <div class="ul ul-two"> 
 
     <ul class="ul-big"> 
 
     <li><a href=#>B1</a></li> 
 
     <li><a href=#>B2</a></li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 

 
</div> 
 

 

 

 

 
<div class="placeholder"></div> 
 
<div class="content"> 
 
    <h1> Main text</h1> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 

 
</div>