nicht angemeldet
Hallo,
ich versuche grad eine Seite komplett von Tabellenlayout auf css umzustellen. Die Seite soll auf eine bestimmte Breite festgelegt und auf dem Bildschirm zentriert werden (s.u.)
Absolute Positionierung scheidet daher aus - die Positionierungen würden sich auf den body-tag beziehen, da eine Ausrichtung am Elternelement nur dann klappt, wenn es selbst absolut positioniert ist.
Also hab ich folgende Alternative probiert, im Wesentlichen float: für die horizontale und position:relative für die vertikale Positionierung.
Leider stoße ich auch hier schon ganz am Anfang auf massive Schwierigkeiten:
- Warum werden das Menü und die hr vom IE6 nach rechts verschoben?
-Warum ist auch das Bild dort nicht wie gewünscht 140px vom oberen Rand entfernt? Der Freiraum im Text ist ja korrekt positioniert.
Im Firefox ist das Ergebnis absolut in Ordnung...
Vielleicht weiß auch jemand einen Link zu einer guten Seite über css. Bisher fand ich nur solche, die bestimmte Vorlagen erläuter haben; ich suche was Allgemeineres.
Vielen Dank, Pida
<style type="text/css">
<!--
#logo {
float:left;
}
#kontakt {
float:right;
}
#menu {
font-weight:bold;
position:relative;
top:80px;
text-align:center;
}
#hr1 {
position:relative;
top:80px;
}
#text {
position:relative;
top:140px;
margin-left:15px;
}
-->
</style>
</HEAD>
<body style="text-align:center">
<div style="width:760px;margin:15px auto; text-align:left">
<div id="logo">
<img src="dateien/logo.jpg" width="605" height="63" border="0" alt="logo">
</div>
<div id="kontakt">
<b>Kontakt:</b><br>
Name<br>
Nummer<br>
<a href="dateien/kontakt.html" target="_blank">eMail-Kontakt</A>
</div>
<div id="hr1"><hr size=4></div>
<div id="menu">
<a href="dateien/info.html">Veranstalterinfos</a> |
<a href="dateien/gb.html" target="Gästebuch">Gästebuch</a> |
<a href="dateien/gallerie/gallerie.html">Galerie</a> |
<a href="dateien/impressum.html">Impressum</a>
</div>
<div id="text">
<img src="dateien/band.jpg" style="width:374px; height:251px; float:left; margin-right:18px; margin-bottom:10px" border="0" alt="">
Text, Text und noch mehr Text.<br>
Text, Text und noch mehr Text.Text, Text und noch mehr Text.<p>
Text, Text und noch mehr Text.Text, Text und noch mehr Text.Text, Text und noch mehr Text.Text, Text und noch mehr Text.
Text, Text und noch mehr Text.<p>
Text, Text und noch mehr Text.Text, Text und noch mehr Text.Text, Text und noch mehr Text.Text, Text und noch mehr Text.
Text, Text und noch mehr TextText, Text und noch mehr Text.Text, Text und noch mehr Text.Text, Text und noch mehr Text.Text, Text und noch
mehr Text.
Text, Text und noch mehr Text<br>
Text, Text und noch mehr Text.Text, Text und noch mehr Text.Text, Text und noch mehr Text.Text, Text und noch mehr Text.
Text, Text und noch mehr Text
</div>
</div>
</body>
</html>