nicht angemeldet
Hallo zusammen,
ich habe mich an CSS-basierende Layouts gewagt. Dies mit Hilfe von SelfHTML. :)
Nun habe ich ein ähnliches Beispiel wie von der Webseite nachgebaut: 3-spaltiges Layout.
Nun wird man sehr schnell erkennen, dass wenn man die Seite im IE anguckt, die LI Elemente falsch angezeigt werden.
Es wird ein Abstand unter dem Element auf das nächste eingefügt.
Ich habe die CSS Definitionen vor- und rückwärts gelesen und ausgeklammert. Der Abstand bleibt immer. (Ausser ich nehme bei der A-Definition "display: block;" raus. Dies ist aber nicht Sinn der Sache).
Hier ist meine HTML Datei:
<html>
<head>
<title>Gabriel Test</title>
</head>
<body>
<style type="text/css">
/*********************** TITEL & BODY ***********************/
body {
font-family: Arial;
background: #ddd;
margin: 0; padding: 100px 50px 0 50px;
min-width: 620px;
}
h1#titel {
display: block;
margin: 0 0 20px; padding: 10px 0;
background: green;
border: solid darkgreen 2px;
text-align:center;
color: white;
}
/*********************** NAVIGATION ***********************/
ul#navigation {
margin: 0; padding: 0;
border: solid 2px darkgreen;
float: left; width: 200px;
}
ul#navigation li {
list-style: none;
margin: 5; padding: 0;
background: skyblue;
}
ul#navigation a {
display: block;
margin: 0 0 0 0; padding: 5px;
text-decoration: none;
background-color: green;
}
ul#navigation a:link {
color: black; background-color: green;
}
ul#navigation a:hover {
color: black; background-color: yellow;
}
ul#navigation a:visited {
color: black;
}
/*********************** NAVI & INFO ***********************/
ul#navigation h1, div#info h1 {
font-size: 18px;
background: lightgreen;
margin: 0; padding: 10px 5px;
}
/*********************** INFO ***********************/
div#info {
margin: 0; padding: 0;
border: solid 2px darkgreen;
float: right; width: 150px;
}
div#info p {
background: green;
margin: 0; padding: 10px 5px;
}
/*********************** INHALT ***********************/
div#inhalt {
border: dashed 2px green;
background: white;
margin: 0 175px 0 225px; padding: 0;
min-width: 200px;
}
div#inhalt h1 {
background: lightgreen;
margin: 0; padding: 10px 5px;
}
div#inhalt p {
margin: 10px 5px; padding: 0;
}
</style>
<!---******************* CONTENT *********************-->
<h1 id="titel">Titel</h1>
<ul id="navigation">
<h1>Navigation</h1>
<li><a href="#">Home</a></li>
<li><a href="#">PH</a></li>
<li><a href="#">Ich</a></li>
</ul>
<div id="info">
<h1>Infoteil</h1>
<p>Hier finden Sie Infos bezüglich des Themas</p>
</div>
<div id="inhalt">
<h1>Willkommen</h1>
<p>Dies ist der Textinhalt</p>
<p>Absätze sind eine tolle sache.</p>
<p>Ja und wie</p>
</div>
</body>
</html>
danke sehr :)