div überlagerung zieht nicht betroffene div mit

Laphory · 21.08.2012, 03:08

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-Code:

* {
 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, 03:21

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-Code:

<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-Code:

<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, 14:05

Oh sorry, hier der html-code:

HTML-Code:

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

Zitat:

Zitat von mindraper

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

Zitat:

Zitat von mindraper

sofern deine semantische struktur ungefähr so ausschaut:

HTML-Code:

<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-Code:

<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

.

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, 17:25

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

Danke danke danke danke danke

mindraper · 21.08.2012, 21:51

hi

no probs

gruß

21.08.2012, 03:08	#1
Laphory Newbie Registriert seit: 02.02.2008 Ort: Wien Beiträge: 14 Kamera: Canon EOS 450D Verwendet: PS CS4, C4D	div überlagerung zieht nicht betroffene div mit 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-Code: * { 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 __________________

21.08.2012, 03:21	#2
mindraper me[code].Java(Script) Registriert seit: 12.08.2007 Ort: Zuhause Beiträge: 188 Verwendet: Adobe CS5 (PS/I/ID/Bridge/FL), Sublime Text 2, NetBeans, Blender, Pencil	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-Code: <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-Code: <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ß __________________ Nichts ist so gerecht verteilt wie der Verstand. Jeder denkt, er hätte genug.

21.08.2012, 17:25	#4
Laphory Newbie Themenstarter Registriert seit: 02.02.2008 Ort: Wien Beiträge: 14 Kamera: Canon EOS 450D Verwendet: PS CS4, C4D	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 __________________

21.08.2012, 21:51	#5
mindraper me[code].Java(Script) Registriert seit: 12.08.2007 Ort: Zuhause Beiträge: 188 Verwendet: Adobe CS5 (PS/I/ID/Bridge/FL), Sublime Text 2, NetBeans, Blender, Pencil	AW: div überlagerung zieht nicht betroffene div mit hi no probs gruß __________________ Nichts ist so gerecht verteilt wie der Verstand. Jeder denkt, er hätte genug.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
swf Überlagerung vermeiden	Rob138	Flash - Allgemein	2	21.09.2009 12:30
[CS4] Kopierstempel zeigt Vorschau (Überlagerung) nicht mehr an	bonn	Photoshop	14	11.06.2009 20:03
Überlagerung bei nicht-deckendem Pinsel	Kruimel	Digital Painting - Malen und Zeichnen	2	17.04.2009 20:16
rotgelb überlagerung eines gesichtes	Wi3ner	Photoshop	5	22.04.2008 09:36
Überlagerung	KleeNo1	Photoshop	4	25.07.2007 19:09

PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

div überlagerung zieht nicht betroffene div mit

Reklame

Anzeige

Aktuelles Commag

Anzeige

Anzeige

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Themen-Optionen
Druckbare Version zeigen Diese Seite per E-Mail verschicken

PSD-Tutorials - Bildbearbeitung - Photoshop - Flash - Cinema4D - InDesign - Fotografie

div überlagerung zieht nicht betroffene div mit

Reklame

Anzeige

Aktuelles Commag

Anzeige

Social Media

Anzeige