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
Lesezeichen