[Erledigt] CSS: DIV Überlappung klappt nicht

hossi86 · 28.07.2011, 10:43

Hi,

Ich gestalte momentan für die Firma bei der ich arbeite eine Internetseite, dabei habe ich ein Problem mit CSS und hoffe Ihr könnt mir dabei helfen.

Um mein ganzes Problem noch ein bisschen zu veranschaulichen habe ich einen Screenshot gemacht:

SCREEN

Auf der linken Seite habe ich eine transparente Navigation. Daneben sollen Bilder in einer Slideshow ablaufen. Die Navigationsebene soll dabei aber ein bisschen über der Slideshow überlappen, was an und für sich klappt, wenn ich ein ganz einfaches statisches Bild einfüge. Sobald ich die Slideshow einfüge stehen die Bilder aber über der Navigation und nicht dahinter, siehe Screenshot.

Habe schon versucht die einzelnen Div's mit z-index zu steuern, aber funktioniert nicht

Anbei mein CSS Code

Code:

/*** WEBSITE ANFANG **/

body {
	background-color:#d8d8d8;
	background-image: url(background.jpg);
	background-repeat: repeat-x;
	color: #FFFFFF;
}

.SEITE {
	width: 990px;
	margin-left: auto;
	margin-right: auto;
}

.MAINBODY {
	width: 800px;
	margin-left: 200px;
	margin-top: 0px;
	margin-right: auto;
	background-color:#d8d8d8;
	
}

.TOPNAV {
	height: 30px;
	text-align: right;
	margin-right:85px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#000;
	
}

.BILD {
	margin-top: 6px;
	margin-left: 0px;
	height: 330px;
    z-index: 5;
}

.NAV {
	width: 200px;
	background-color: #EEE8AA;
	clear: none;
	border-right: 2px solid #A0522D;
}
	
.MENU{
	width: 240px;
	float: left;
	clear: none;
	margin-left: auto;
	z-index: 2;
}

.CONTENT {
	width: 800px;
	height: auto;
	margin-left: 200px;
	margin-right: auto;
	background-color:#d8d8d8;
}

.CONTENT2 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: normal;
	color: #8B0000;
	text-decoration: none;
	width: 750px;
	margin-left: 50px;
	margin-right: auto;
	background-color:#d8d8d8;
}

/*** WEBSITE ENDE **/



/*** SLIDESHOW ANFANG **/

#slideshow {
    position:absolute;
    height:330px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:2;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:3;
}

/*** SLIDESHOW ENDE **/

Anbei mein HTML Code

Code:

<?php include ("header.php"); ?>
<body>
<div class="SEITE">

<div class="MENU">
<?php include ("navigation.php"); ?>
</div>

 <div class="MAINBODY">
  
  <div class="TOPNAV">
  Startseite &nbsp;&nbsp; Kontakt &nbsp;&nbsp; Impressum
  </div>
 
  <div class="BILD"/>

<!-- Beginn Slideshow -->
<div id="slideshow">
    <img src="design/haus.png" alt="" class="active" />
    <img src="design/haus2.png" alt=""/>
</div>
<!-- Ende Slideshow -->

</div>
  
 </div>
 
<div class="CONTENT">
<div class="CONTENT2">
Platz fuer Inhalt Content2
</div>
</div>
<?php include ("footer.php"); ?>

Ich hoffe sehr das jemand hier ist der mir helfen kann. Danke.

Gruß
Stefan

dsmcg · 28.07.2011, 11:36

hilf dir z-index villeicht weiter?
http://de.selfhtml.org/css/eigenscha...ng.htm#z_index

ChrisB · 28.07.2011, 11:39

z-index wirkt nur auf positionierte Elemente (d.h., position abweichend vom Defaultwert static).

Wenn dir diese Info noch nicht weiterhilft - dann zeige uns bitte ein Online-Beispiel statt nur eines Screenshots. Validiere aber bitte vorher dein HTML und CSS, falls du das noch nicht gemacht haben solltest.

hossi86 · 28.07.2011, 11:41

Genau das ist mein Problem, mit z-index hab ichs nicht hinbekommen..

Werde die Demo dann mal eben kurz online stellen, arbeite momentan noch mit xampp.

hossi86 · 28.07.2011, 11:55

So.
Hier die OnlineDemo:

http://www.hossispage.de/webtest/

Danke und Gruß
Stefan

eagle275 · 28.07.2011, 12:06

EDiT
nehm alles zurück ... das Problem hieran dürfte sein, dass Javascript dynamisch neue Elemente auf die Seite legt ("auf" ist hier wörtlich zu nehmen) - evtl kannst du das am Javascript-Code so umändern, dass das neue Bild-Element zwar geladen wird, aber drunterliegt (an der richtigen Stelle im DOM-Baum einhängen)

hossi86 · 28.07.2011, 12:15

Edit:
uff.. sollts daran liegen dann hab ich ein Problem

eagle275 · 28.07.2011, 12:24

als Alternative ..

verpass dem

Code:

.CONTENT {
	width: 800px;
	height: auto;
	margin-left: 200px;
	margin-right: auto;
	background-color:#d8d8d8;
}

einfach ein bisschen mehr margin-left ... das überlappende sieht meiner Meinung nach sowieso nicht sooo gut aus. Ab 240 px margin-left dürfte sich das Problem erledigt haben

ChrisB · 28.07.2011, 12:25

Die Position im DOM-Baum sollte nicht entscheidend sein, wenn man z-index korrekt verwendet.

hossi86 · 28.07.2011, 12:29

Zitat:

Zitat von eagle275

als Alternative ..

verpass dem

Code:

.CONTENT {
	width: 800px;
	height: auto;
	margin-left: 200px;
	margin-right: auto;
	background-color:#d8d8d8;
}

einfach ein bisschen mehr margin-left ... das überlappende sieht meiner Meinung nach sowieso nicht sooo gut aus. Ab 240 px margin-left dürfte sich das Problem erledigt haben

Ne. Die 200px sind so schon richtig

das hat mit dem grauen Hintergrund ein wenig zu tun, wenn ich das ändere passts rechts nicht mehr.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
2 Zeitspannen auf Überlappung Vergleichen	Len	PHP Tipps 2009	12	01.08.2009 18:21


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

28.07.2011, 11:36
dsmcg Erfahrener Benutzer Registriert seit: 11.10.2005 Beiträge: 2.405	hilf dir z-index villeicht weiter? http://de.selfhtml.org/css/eigenscha...ng.htm#z_index

28.07.2011, 11:39
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	z-index wirkt nur auf positionierte Elemente (d.h., position abweichend vom Defaultwert static). Wenn dir diese Info noch nicht weiterhilft - dann zeige uns bitte ein Online-Beispiel statt nur eines Screenshots. Validiere aber bitte vorher dein HTML und CSS, falls du das noch nicht gemacht haben solltest. __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

28.07.2011, 11:41
hossi86 Benutzer Registriert seit: 06.10.2010 Beiträge: 45 PHP-Kenntnisse: Anfänger	Genau das ist mein Problem, mit z-index hab ichs nicht hinbekommen.. Werde die Demo dann mal eben kurz online stellen, arbeite momentan noch mit xampp.

28.07.2011, 11:55
hossi86 Benutzer Registriert seit: 06.10.2010 Beiträge: 45 PHP-Kenntnisse: Anfänger	So. Hier die OnlineDemo: http://www.hossispage.de/webtest/ Danke und Gruß Stefan

28.07.2011, 12:06
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	EDiT nehm alles zurück ... das Problem hieran dürfte sein, dass Javascript dynamisch neue Elemente auf die Seite legt ("auf" ist hier wörtlich zu nehmen) - evtl kannst du das am Javascript-Code so umändern, dass das neue Bild-Element zwar geladen wird, aber drunterliegt (an der richtigen Stelle im DOM-Baum einhängen) __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste Geändert von eagle275 (28.07.2011 um 12:11 Uhr).

28.07.2011, 12:15
hossi86 Benutzer Registriert seit: 06.10.2010 Beiträge: 45 PHP-Kenntnisse: Anfänger	Edit: uff.. sollts daran liegen dann hab ich ein Problem

28.07.2011, 12:24
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	als Alternative .. verpass dem Code: .CONTENT { width: 800px; height: auto; margin-left: 200px; margin-right: auto; background-color:#d8d8d8; } einfach ein bisschen mehr margin-left ... das überlappende sieht meiner Meinung nach sowieso nicht sooo gut aus. Ab 240 px margin-left dürfte sich das Problem erledigt haben __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste

28.07.2011, 12:25
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Die Position im DOM-Baum sollte nicht entscheidend sein, wenn man z-index korrekt verwendet. __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?