nicht angemeldet
Hi,
habe ein kleines Layout zusammengebastelt.
Es besteht aus den Divs Überschrift, Menü, Content, Footer. Diese werden durch ein Div Center horizontal in der Mitte des Bildschirms positioniert.
Hier ein kurzer Überblick:
+-----------------------------------+
| +-------------------------------+ |
| |Überschrift | |
| +-------------------------------+ |
| |
| +-----+ +-----------------------+ |
| |Menü | |Content | |
| | | | | |
| | | | | |
| | | | <- | |
| +-----+ | Problem | |
| |<- | |
| | | |
| +-----------------------+ |
| |
| +-------------------------------+ |
| |Footer | |
| +-------------------------------+ |
+-----------------------------------+
das Menü ist per float:left; nach links gewandert.
Content ist per margin-left soweit nach rechts positioniert, dass es nicht mit dem Menü kolliediert.
Mit Opera oder FF habe ich keine Probleme. Wohl aber mit IE6.
Das Problem ist, dass Text im Content-Div auf der Höhe des Menüs 1 Pixel (oder auch 2?) weiter rechts steht, als der Text, der nicht in Höhe des Menüs steht. Das sieht dann so ähnlich aus wie die Pfeile oben in der Grafik.
Ich habe bei SelfHTML schon gesucht und auch die Tutorial-Beispiele durchprobiert. Die sehen im IE genauso scheiße aus wie mein eigenes Layout (sprich 1px verschiebung wenn ein Div links floatet).
Wie bekomme ich die Anzeige in den Griff?
Ein Beispiel wäre in SelfHTML
http://de.selfhtml.org/css/layouts/anzeige/2spaltig_links.htm
(Zum Betrachten evtl. das Browserfenster soweit verkleinern, bis der Text deutlich weiter nach unten rakt als das Menü.)
Danke waste
Hier noch mein CSS und HTML-Code wenns hilft:
CSS-DATEI...
html, body
{
margin: 0px;
padding: 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
}
img
{
border: none;
}
#center
{
width: 50em;
margin-top: 2em;
margin-left: auto;
margin-right: auto;
margin-bottom: 2em;
}
#header
{
width: 100%;
font-size: 3em;
color: #CCCCCC;
margin-bottom: 0.5em;
}
#menu
{
width: 100px;
height: 300px;
float: left;
padding-top: 100px;
padding-left: 20px;
color: white;
background-color: darkred;
}
#main
{
margin-left: 11em;
border-right: 1px solid darkred;
padding-right: 2em;
padding-bottom: 3em;
}
#main h2
{
margin-left: 130px;
font-size: 1.3em;
color: darkred;
}
#main #pageimage
{
float: left;
}
#main #content
{
margin-left: 130px;
}
#footer
{
margin-top: 2em;
margin-left: 11em;
text-align: right;
font-size: 0.8em;
color: #666666;
}
HTML-DATEI ....
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<link href="teststyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="center">
<div id="header">
big headline
</div>
<div id="menu">
button1<br>
button2<br>
button3
</div>
<div id="main">
<h2>Headline</h2>
<div id="content">
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
The quick brown fox jumps over the lazy dog. Fritz fährt im total verwahrlosten Taxi quer durch Bayern.
</div>
</div>
<div id="footer">
footer footer footer
</div>
</div>
</body>
</html>