Noch nicht viel geschrieben
Heyho!
Wie der Titel schon sagt, zieht meine div Überlagerung eine nicht betroffene div mit. Und zwar habe ich einen Header in dem auch der Hintergrundbalken für meine Navigation eingebaut ist. Jetzt möchte ich die Navigationbuttons natürlich auf den entsprechenden Hintergrund bringen. Ich habe das mit z-index und position gelöst:
das ganze funktioniert dann auch, wenn ich bei #header position: absolute; hinzufüge, ABER! plötzlich wird die main nach oben gezogen und verschoben und wenn ich position: absolute; weg lasse dann kann ich die Navigationsbilder nicht mehr nach oben mittels margin schieben sondern nur nach unten in die main-div rein, obwohl im code vom main-div keine z-index oder position angegeben ist.
Hier mal zwei Bilder zur besseren Erklärung:
ohne position absolute:
mit position:
Vielleicht hat ja jemand eine Lösung oder weiß warum das nicht funktioniert.
Lg
Wie der Titel schon sagt, zieht meine div Überlagerung eine nicht betroffene div mit. Und zwar habe ich einen Header in dem auch der Hintergrundbalken für meine Navigation eingebaut ist. Jetzt möchte ich die Navigationbuttons natürlich auf den entsprechenden Hintergrund bringen. Ich habe das mit z-index und position gelöst:
HTML:
* {
padding: 0;
margin: 0;
}
body {
font-family: Calibri;
background: url(../images/bg2.jpg);
}
#wrapper {
height: 768px;
width: 1024px;
margin-left: auto;
margin-right: auto;
}
#header {
background: transparent url(../images/header.jpg);
height: 177px;
width: 1023px;
display: block;
z-index:1;
}
#menu {
margin-top: 400px;
z-index: 2;
position: absolute;
}
#menu #high {
height: 40px;
width: 122px;
margin-left: 30px;
text-decoration: none;
}
#menu a {
text-decoration: none;
margin-left: auto;
}
#menu ul {
list-style-type: none;
}
#menu a img {
border-style: none;
}
#main {
background: transparent url(../images/main.png);
height: 658px;
width: 1023px;
margin-left: auto;
margin-right: auto;
}
#main h1 {
color: #FFFFFF;
text-align: left;
font-size: 1.1em;
font-weight: bold;
padding-left: 50px;
padding-top: 40px;
padding-right: 100px;
}
#main p {
color: #999999;
text-align: left;
font-size: 1.0em;
padding-left: 50px;
padding-top: 10px;
padding-right: 100px;
}
#footer {
background: transparent url(../images/footer.png);
height: 67px;
width: 1023px;
display: block;
margin-left: auto;
margin-right: auto;
}
Hier mal zwei Bilder zur besseren Erklärung:
ohne position absolute:
mit position:
Vielleicht hat ja jemand eine Lösung oder weiß warum das nicht funktioniert.
Lg