div überlagerung zieht nicht betroffene div mit

Laphory · 21.08.2012

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:

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;
 }

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

mindraper · 21.08.2012

AW: div überlagerung zieht nicht betroffene div mit

hi

bitte mit html-code. positionierungsprobleme können auch an der semantischen struktur hängen, deshalb bitte auch html.

was ich dir jetzt schon verraten kann: z-index-angaben auf nicht positionierten elementen bewirken – gar nichts. deshalb kann dein z-index in #header schonmal raus.

sofern deine semantische struktur ungefähr so ausschaut:

HTML:

<div id="wrapper">
   <div id="header">
      <div id="menu">
         <ul>...</ul>
      </div>
   </div>
   <div id="main">
   ...
   </div>
</div>

kannst du #header ein position:relative geben. dadurch orientieren sich darin liegende, absolut positionierte elemente an #header.

sollte deine semantische struktur ungefähr so ausschauen:

HTML:

<div id="wrapper">
   <div id="header">
   </div>
   <div id="menu">
      <ul>...</ul>
   </div>
   <div id="main">
   ...
   </div>
</div>

müsstest du noch nicht einmal positionieren, pack den hintergrund für das menü einfach in #menu und nicht in #header.

sobald das html da ist, kann man da aber mehr zu sagen. ansonsten sind das alles nur schüsse ins blaue hinein.

gruß

Laphory · 21.08.2012

AW: div überlagerung zieht nicht betroffene div mit

Oh sorry, hier der html-code:

HTML:

<body>


<div id="wrapper">

 <div id="header"></div>

 <div id="menu">
 <ul>
 <span id="high"><a href="sites/bla.html"><img src="http://www.psd-tutorials.de/forum/images/about.gif"></a><img src="http://www.psd-tutorials.de/forum/images/home.gif" alt="home"><a href="sites/bla2.html"><img src="http://www.psd-tutorials.de/forum/images/news.gif"></a></span>
 </ul>
 </div>
 
 <div id="main"> 
 <h1>Test</h1>
  <p>bla bla</p>
 </div>

 <div id="footer">
 </div>

</div>
</body>
</html>

mindraper schrieb:
was ich dir jetzt schon verraten kann: z-index-angaben auf nicht positionierten elementen bewirken – gar nichts. deshalb kann dein z-index in #header schonmal raus.

wird gemacht! Danke für die Info

mindraper schrieb:
sofern deine semantische struktur ungefähr so ausschaut:

HTML:

<div id="wrapper"> <div id="header"> <div id="menu"> <ul>...</ul> </div> </div> <div id="main"> ... </div> </div>

kannst du #header ein position:relative geben. dadurch orientieren sich darin liegende, absolut positionierte elemente an #header.

sollte deine semantische struktur ungefähr so ausschauen:

HTML:

<div id="wrapper"> <div id="header"> </div> <div id="menu"> <ul>...</ul> </div> <div id="main"> ... </div> </div>

müsstest du noch nicht einmal positionieren, pack den hintergrund für das menü einfach in #menu und nicht in #header.

sobald das html da ist, kann man da aber mehr zu sagen. ansonsten sind das alles nur schüsse ins blaue hinein.

gruß

also die semantische struktur schaut wie dein zweites beispiel aus. ich hatte auch vorhin den hintergrund in #menu drinnen, da tauchten aber paar kleine probleme auf, die ich eigentlich mit der jetztigen vorgehensweise umgehen wollte :lol:.

da ich einen abstand (margin-left) zum hintergrund und den immer erst beginnenden navibutton haben will, hatte ich in der #menu #high den margin left eingebaut, das funktioniert auch beim aller ersten button (weil ja der erste link mittels <span id="high"> begonnen hat). wenn der erste link aber mit <a href="blabalab></a> beginnt dann war dieser abstand natürlich nicht mehr da und ein margin-left in #menu a hat nur bewirkt, dass alle navibuttons zueinander einen abstand hatten.

Ich glaub ich werd mal den html-code in deine erste vorgebene semantische-struktur ändern und das mal so versuchen, danke

Lg

Laphory · 21.08.2012

AW: div überlagerung zieht nicht betroffene div mit

Soooo, hab es jetzt so gemacht wie in deiner ersten struktur und es funktioniert!

Danke danke danke danke danke :danke:

:blumen:

mindraper · 21.08.2012

AW: div überlagerung zieht nicht betroffene div mit

hi

no probs

gruß