zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Div über sämtliche anderen legen - z-index?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.06.2006, 12:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.05.2006
Beiträge: 23
tassetee befindet sich auf einem aufstrebenden Ast
Standard Div über sämtliche anderen legen - z-index?

Moin Leute,

ich hab ein Problem mit z-index. Ich hab eine Box, die am rechten oberen Bildrand klebt, mit position:fixed und für IE mit Dean Edwards Hack. Sieht ordentlich aus, keine Probleme.

Ich habe dem Div als z-index:1 gegeben, damit diese Box nicht verdeckt wird. Mit IE 6 und FF 1.5 habe ich keine Probleme, bei niedrigeren Versionen (zumindest IE 5.5, 5.1 und FF 1.0) verschwindet die Box aber unter einer anderen (wenn man den Bildschirm ein wenig nach unten scrollt).

Woran kann das liegen? Muss ich z-index:0 definieren?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.06.2006, 12:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.121
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Ändere die Zeilen 12, 17 und 825 ab, dann geht es...
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.06.2006, 12:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.05.2006
Beiträge: 23
tassetee befindet sich auf einem aufstrebenden Ast
Standard

Sorry, ich dachte das wäre ein einfacheres Problem
Das Div steht direkt hinter dem Body-Tag, styling sieht so aus:
Code:
#logout {
	font:		12px Georgia;
	position:	fixed;
	background: 	#f2f3ff;
	border:		1px solid #8b96c7;
	padding:	5px;
	right:		0px;
	top:		0px;
	z-index:	1;
}
Ich dachte eigentlich, dass man anhand von z-index die Divs überschreiben kann. Geht das nicht?
Mit Zitat antworten
  #4 (permalink)  
Alt 08.06.2006, 12:44
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.121
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Kannst du nicht mehr Quellcode posten?

Ich habs dir mal geschrieben wie es aussehen könnte, probier das mal bei dir:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
<head>
<title>neu</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
#logout
{
	font: 12px Georgia;
	border: 1px solid #8b96c7;
	padding: 5px;
	width: 200px;
	height: 100px;
	background-color: #f2f3ff;
	position: absolute;		 
	right: 0;
	top: 0;
	position: expression("absolute");
	top: expression(document.body.scrollTop - this.offsetHeight + this.offsetHeight);
}
#logout[id]
{
	position: fixed;
}
</style>
</head>
<body>
<div id="logout">Box 1</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</body>
</html>
Mit Zitat antworten
  #5 (permalink)  
Alt 08.06.2006, 12:51
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.05.2006
Beiträge: 23
tassetee befindet sich auf einem aufstrebenden Ast
Standard

Nicht schlecht, da sind Sachen dabei, die ich noch nie in meinem Leben gesehen habe . Funktioniert auf all meinen Browsern, tausend Dank, das ist echt grandios!

(Warum muss das eigentlich immer so kompliziert sein? Wozu gibts z-index überhaupt?)
Mit Zitat antworten
  #6 (permalink)  
Alt 08.06.2006, 14:45
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.856
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

http://www.css4you.de/z-index.html
Mit Zitat antworten
  #7 (permalink)  
Alt 08.06.2006, 15:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.152
mazzo wird schon bald berühmt werden
Standard

Zitat:
Zitat von cgdesign
Code:
#logout
{
	font: 12px Georgia;
	border: 1px solid #8b96c7;
	padding: 5px;
	width: 200px;
	height: 100px;
	background-color: #f2f3ff;
	position: absolute;		 
	right: 0;
	top: 0;
	position: expression("absolute");
	top: expression(document.body.scrollTop - this.offsetHeight + this.offsetHeight);
}
Kannst Du mir das fettgedruckte mal erklären? Der CSS-validator meckert natürlich bei diesen Zeilen. Die zweite Zeile sieht nach JS aus, aber
wenn ich die nicht ins CSS eintrage sieht es im FF und IE trotzem gleich aus. Ebenso wenn ich JS im FF deaktiviere.

Eigentlich brauche ich doch nur
Code:
position: absolute;		 
right: 0; top: 0;
um die Box in die obere Ecke zu stellen. Evtl. noch mit z-index, je nach dem drumherum. Oder?
Mit Zitat antworten
  #8 (permalink)  
Alt 08.06.2006, 15:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.05.2006
Beiträge: 23
tassetee befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von mazzo
Eigentlich brauche ich doch nur
Code:
position: absolute;		 
right: 0; top: 0;
um die Box in die obere Ecke zu stellen.
Das ist richtig, aber nicht wenn die Box immer rechts oben in der Ecke stehen soll, auch wenn Du runterscrollst. Das geht mit position:fixed, allerdings eben nicht bei allen Browsern.
Mit Zitat antworten
  #9 (permalink)  
Alt 08.06.2006, 16:09
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.152
mazzo wird schon bald berühmt werden
Standard

ok, klar. Im FF ist auch alles paletti.
Aber der obige Code im IE erzeugt nicht, dass die Box beim runterscrollen oben stehen bleibt. Ob ich jetzt die "Javascript-zeilen" drin hab oder nicht.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.06.2006, 18:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 05.05.2006
Beiträge: 23
tassetee befindet sich auf einem aufstrebenden Ast
Standard

Stimmt, hast Recht jetzt sehe ich das auch. IE 5 machts mit obigem Code richtig, IE 6 nicht, bzw. bei mir nur mit Dean Edwards Script dazu.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Design Float IE6 Problem koknarr CSS 10 05.09.2008 19:05
CSS Menü seema CSS 0 03.09.2008 21:04
abstände in div zwischen h und anderen elementen eyetag CSS 16 20.07.2005 18:42
div Positionierung bei Browsern Ancient CSS 22 17.03.2005 01:49
Div geht über anderen Div hinaus jensr CSS 13 24.07.2004 01:23


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:28 Uhr.