Das leidige Thema: Positionierung
Ben
- css
Hallo,
mal wieder wird meine Homepage überarbeitet und mal wieder möchte ich nur auf CSS setzen. Es gibt aber ein Problem mit dem folgenden Teil:
#hintergrund
{
background-image:url('../gfx/weiss.gif');
background-repeat: repeat-y;
z-index: 1;
width: 799px;
height: 100%;
}
#header
{
width: 415 px;
height: 516 px;
position: absolute;
left: 0;
top: 0;
}
#rechtsoben
{
width: 277px;
height: 385px;
position: absolute;
left: 515 px;
top: 0;
}
Der IE positioniert die div "rechtsoben" richtig. Der Firefox zeigt sie über "header" in der linken Ecke an, obwohl ich doch mit position: absolute und left: 515px eine Position angegeben habe, oder? Wie muss es denn richtig lauten und könnt ihr mir vielleicht Tipps zu guten Artikeln und/oder Tutorials zu diesem Thema geben?
Schon einmal vielen Dank und viele Grüße
Ben
Hi,
#hintergrund
{
z-index: 1;
Ohne position wirkungslos.
#header
{
width: 415 px;
height: 516 px;
position: absolute;
left: 0;
top: 0;
}
#rechtsoben
{
width: 277px;
height: 385px;
position: absolute;
left: 515 px;
top: 0;
}
Ohne die Dokumentstruktur zu kennen, ist keine Aussage möglich.
cu,
Andreas
Hi,
#hintergrund
{
z-index: 1;Ohne position wirkungslos.
Okay, das stimmt wohl allerdings...
Ohne die Dokumentstruktur zu kennen, ist keine Aussage möglich.
Das Dokument sieht folgendermaßen aus:
<html>
<head>
<title>bens-homepage.de - v3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="hintergrund"></div>
<div id="header"><img src="gfx/logo.gif" alt="bens-homepage"></div>
<div id="rechtsoben"><img src="gfx/kabel1.jpg" alt="Kabel"></div>
</body>
</html>
Gruß
Ben
Hi,
width: 415 px;
height: 516 px;
Du setzt hiermit die beiden Eigenschaften auf auto, da die Werte ungültig sind (zwischen Zahl und Einheit darf kein Whitespace kommen).
left: 515 px;
Du setzt hiermit left auf auto (was auf 0 rausläuft).
Der IE positioniert die div "rechtsoben" richtig.
Nein, er macht es falsch, weil er die fehlerhaften Werte zu interpretieren versucht, obwohl der Standard klar sagt, daß fehlerhafte Werte ignoriert werden müssen.
Der Firefox zeigt sie über "header" in der linken Ecke an, obwohl ich doch mit position: absolute und left: 515px eine Position angegeben habe,
Firefox verhält sich korrekt, Du hast eben nicht
left: 515px angegeben, sondern
left: 515 px - kleiner Unterschied, große Wirkung.
cu,
Andreas
Hi Andreas,
Firefox verhält sich korrekt, Du hast eben nicht
left: 515px angegeben, sondern
left: 515 px - kleiner Unterschied, große Wirkung.
Ich habe die Leerzeichen enfernt und es klappt. Wirklich so eine Kleinigkeit.. Oh man... Vielen Dank! :)
Gruß
Ben