Hallo, bin gerade dabei auf CSS-Layout umzustellen.
Vieles konnte ich bisher lösen, aber eines noch nicht.
Ich habe eine Seite, die jeweils mit einem absolut positionierten Hintergrund mit absolut positioniertem Text und absolut positioniertem Datum beginnt.
Darunter sollen dann relativ positioniert die Inhalte, jeweils abgetrennt durch eine horizontale Linie (ebenfalls jeweils relativ positioniert).
Nur dummerweise muss ich jedesmal noch Korrekturen vornehmen, weil ansonsten die Darstellung nicht hinhaut:
So sollte es sein:
So muss ich es angeben:
Was mich je brennend interessieren würde ist, wo die Verschiebungen herkommen, vor allem die "left: 2px;"
Wonach richtet sich die relative Positionierung, wenn mehrere Felder relativ positioniert werden?
Wer kann mir weiterehelfen? Worauf bezieht sich die relative Positionierung genau? Habe ich irgend einen Dankfehler?
Gruß
Andreas
Vieles konnte ich bisher lösen, aber eines noch nicht.
Ich habe eine Seite, die jeweils mit einem absolut positionierten Hintergrund mit absolut positioniertem Text und absolut positioniertem Datum beginnt.
Darunter sollen dann relativ positioniert die Inhalte, jeweils abgetrennt durch eine horizontale Linie (ebenfalls jeweils relativ positioniert).
Nur dummerweise muss ich jedesmal noch Korrekturen vornehmen, weil ansonsten die Darstellung nicht hinhaut:
So sollte es sein:
Code:
<html>
<head>
<title>Messetermine</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="../../script/background.css">
<link rel="stylesheet" type="text/css" href="../../script/scrollbar.css">
<link rel="stylesheet" type="text/css" href="../../script/text.css">
</head>
<body>
<div id="ueberschrift" style="position: absolute; top: 0px; left: 12px; width: 250px; z-index:1;"><img src="../../images/dunkelblau.gif" alt="Downloads" width="225" height="30"></div>
<div id="datum" style="position: absolute; left: 465px; top: 10px; width: 146px; z-index:3;" class="arial1black">Letzte Änderung: 2005-06-13</div>
<div id="text" style="position: absolute; left: 21px; top: 6px; width: 590px; z-index:2" class="arial3whitebold">Messen 2005 </div>
<div id="linie01" style="position: relative; top: 10px; width: 600px; height: 7px;"><img src="../../Images/dot_dunkelblau.gif" width="600" height="7"></div>
<div id="messe01" style="position: relative; top: 10px; width: 600px; text-align:center;"><img src="../../Images/Messen/01_muenchen_2005.gif" width="400" height="73"></div>
<div id="linie02" style="position: relative; top: 10px; width: 600px; height: 7px;"><img src="../../Images/dot_dunkelblau.gif" width="600" height="7"></div>
<div id="messe02" style="position: relative; top: 10px; width: 600px; text-align:center;"><img src="../../Images/Messen/02_hamburg_2005.gif"></div>
<div id="linie03" style="position: relative; top: 10px; width: 600px; height: 7px;"><img src="../../Images/dot_dunkelblau.gif" width="600" height="7"></div>
<div id="messe03" style="position: relative; top: 10px; width: 600px; text-align:center;"><img src="../../Images/Messen/02_frankfurt_2005.gif"></div>
<div id="linie04" style="position: relative; top: 10px; width: 600px; height: 7px;"><img src="../../Images/dot_dunkelblau.gif" width="600" height="7"></div>
</body>
</html>So muss ich es angeben:
Code:
<html>
<head>
<title>Messetermine</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="../../script/background.css">
<link rel="stylesheet" type="text/css" href="../../script/scrollbar.css">
<link rel="stylesheet" type="text/css" href="../../script/text.css">
</head>
<body>
<div id="ueberschrift" style="position: absolute; top: 0px; left: 12px; width: 250px; z-index:1;"><img src="../../images/dunkelblau.gif" alt="Downloads" width="225" height="30"></div>
<div id="datum" style="position: absolute; left: 465px; top: 10px; width: 146px; z-index:3;" class="arial1black">Letzte Änderung: 2005-06-13</div>
<div id="text" style="position: absolute; left: 21px; top: 6px; width: 590px; z-index:2" class="arial3whitebold">Messen 2005 </div>
<div id="linie01" style="position: relative; left: 2px; top: 10px; width: 600px; height: 7px;"><img src="../../Images/dot_dunkelblau.gif" width="600" height="7"></div>
<div id="messe01" style="position: relative; left: 2px; top: 20px; width: 600px; text-align:center;"><img src="../../Images/Messen/01_muenchen_2005.gif" width="400" height="73"></div>
<div id="linie02" style="position: relative; left: 2px; top: 30px; width: 600px; height: 7px;"><img src="../../Images/dot_dunkelblau.gif" width="600" height="7"></div>
<div id="messe02" style="position: relative; left: 2px; top: 40px; width: 600px; text-align:center;"><img src="../../Images/Messen/02_hamburg_2005.gif"></div>
<div id="linie03" style="position: relative; left: 2px; top: 50px; width: 600px; height: 7px;"><img src="../../Images/dot_dunkelblau.gif" width="600" height="7"></div>
<div id="messe03" style="position: relative; left: 2px; top: 60px; width: 600px; text-align:center;"><img src="../../Images/Messen/02_frankfurt_2005.gif"></div>
<div id="linie04" style="position: relative; left: 2px; top: 70px; width: 600px; height: 7px;"><img src="../../Images/dot_dunkelblau.gif" width="600" height="7"></div>
</body>
</html>Was mich je brennend interessieren würde ist, wo die Verschiebungen herkommen, vor allem die "left: 2px;"
Wonach richtet sich die relative Positionierung, wenn mehrere Felder relativ positioniert werden?
Wer kann mir weiterehelfen? Worauf bezieht sich die relative Positionierung genau? Habe ich irgend einen Dankfehler?
Gruß
Andreas
Zuletzt bearbeitet:
