Ausrichten von Elementen im Layout

**Voselix** · 30.12.2015, 18:45

Hallo zusammen,

ich hab da ein Problem-ich habe 4 Elemente/Module:
1. Navigation in der Kopfzeile
2 Bannerbild/Logo in der Kopfzeile
3. Einen Bilderslider in der Kopfzeile
4. Inhalte in der Hauptspalte

Das Banner/Logo soll oben mit 10 px Abstand zum oberen Rand erscheinen.
Die Navigation soll auf dem unteren Streifen des Logos sitzen.
Der Imageslider soll unter dem Logo sein.
Der Inhalt soll unter dem Slider sitzen.

Irgendwie passt das aber nicht so richtig und ich fummle da schon seit vielen Stunden dran rum...der Inhalt beginnt am oberen rand des Sliders:

Hier mal der Link zum Projekt: Link

Ich hab 2 css Dateien, damit das auch im mobilen funktioniert:
1 media all

Code:

* {
    margin:0;
    padding:0;
}

html {
    overflow-y: scroll;
}

body {
    width:100%;
    font:1.0em 'Titillium Web';
    table-layout: fixed;
}

html,
body {
    height:100%;
}

#wrapper {
    width:100%;
    height:100%;
    display:table;
    table-layout: fixed;
}

#container {
    background-color:#bbb;
}

header .inside,
#main .inside,
footer .inside {
    max-width:960px;
    margin:0 auto;
}

#container > .inside {
    max-width:958px;
    position:relative;
    margin:2em auto;
}

#stageout img {
    display:block;
}

#stageout {
    position:relative;
}

#logo {
    max-width:960px;
    z-index: 3000;
}

nav.mod_navigation.block {
    clear:both;
    display:none;
    color:#fff;
    z-index:500;
}

2. eine css für @media screen and (min-width: 700px)

Code:

#header {
    padding-top:10px;
}

span#mobilebutton {
    display:none!important;
    cursor:pointer;
}

nav.mod_navigation.block li {
    position:relative;
    float:left;
    list-style: none;
}

nav.mod_navigation.block li a,
nav.mod_navigation.block li span.active,
nav.mod_navigation.block li span {
    display:block;
    padding:.5em;
    font-size:100%;
    line-height:1.2;
    text-decoration:none;
    color:#fff;
    border:none;
    text-shadow: 0px 0px 4px rgba(150, 150, 150, 1);
}

nav.mod_navigation.block li span.active,
nav.mod_navigation.block li a:hover {
}

nav.mod_navigation.block {
    position:absolute;
    overflow:visible;
    clear:both;
    margin-top:-40px;
    display: block !important;
    z-index: 4001;
}

#stage {
}

#stageout {
    margin-top:-6px;
}

nav.mod_navigation.block li a:hover {
    font-weight:normal;
    text-decoration:none;
}

Meine Fragen:
1. warum erscheint der Content nicht unter dem Slider, sondern auf gleicher Höhe?
2. wie kriege ich die Navigation bei Grössenanderung des Browserfensters richtig positioniert?
3. Die Positionierung der stageout mit margin-top:-6px;....ist denke ich nicht gut und auch nicht die Positionierung des navigationsblocks mit margin-top:-40px; ...was könnte man da anderes machen??

GLG und Danke vorab für Hilfe
Vosi

**Samuell** · 30.12.2015, 20:20

Zu 1:
Alle Elemente sind absolut positioniert und haben damit keine Höhe mehr.
Eines der Elemente, zb: #stageout benötigt eine Höhe, bzw ein Padding, dass die Höhe "aufzieht".

Code:

padding: 31.2% 0px 0px;

Zu 2.
Es gibt mehrere Wege.
Da das Bild skaliert könntest Du die Navigation mit anpassen und zb das padding verkleinern.

Oder, was vielleicht besser ist:
Das Bild in den Hintergrund und dem #logo eine fixe Höhe geben.
Während #logo schmaler wird schiebt sich das Logo, also der Hintergrund einfach mit aus dem Sichtfeld raus.

Damit bleibt die Höhe gleich.
Die Navi sollte allerdings nicht noch länger werden.

Zu 3.
Setz #logo img mal {display: block;}
dann brauchst Du die -6px für die "Stage" nicht mehr.

Das ist normal bei Bildern und hat was mit der sog. "Baseline" zutun.

Bitte nimm mir den Kommentar nicht zu üben:
Sofern Du Kundenprojekte baust solltest Du dringend Deine Art CSS zu schreiben überdenken und verbessern.

"nav.mod_navigation.block"

Ist nicht zeitgemäß und unnötig aufgebläht. Gib der Navi einfach eine Klasse (zB nav-main) und arbeite damit.
Auch IDs an jeder Stelle sind ziemlich out.

**Voselix** · 08.01.2016, 13:58

Hallo zusammen, hallo Samuell,

ich war krank und konnte nicht weiterarbeiten-jetzt bin ich aber wieder fit und es kann weitergehen...

Erstmal vielen Dank für Deine Antwort!!!

Ich hab jetzt mal etwas von dem, was geschrieben wurde umgesetzt....leider bin ich aber nicht so CSS fest, das ich das komplett hinbekommen habe.

Ich hab zB. das mit dem Hintergrundbild nicht hinbekommen....irgendwie bin ich zu dumm..

habe es versucht mit:
#header {
padding-top:10px;
background:url(files/images/kessel_logo_breit.png);
}

aber da passiert nix.

Kann mir nochmal jemand auf die Sprünge helfen-wie ich das Logo-mit Navigation in den Hintergrund kriege und dabei net alles zerschiesse?

Link

GLG
Vosi