nicht angemeldet
LI-Tag generiert Abstand zum nächsten
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 :)
-
Geb dem Li die selbe line-height und den selben font-size die auch das Element darin hat. Dann sollte der Abstand weg sein. Sowas hatte ich zumindest mal. Der IE hat dem Li einfach irgendeine default-line-heigzt gegeben wodurch da ein Abstand war.
-
Geb dem Li die selbe line-height und den selben font-size die auch das Element darin hat. Dann sollte der Abstand weg sein. Sowas hatte ich zumindest mal. Der IE hat dem Li einfach irgendeine default-line-heigzt gegeben wodurch da ein Abstand war.
Hallo Danke für deine schnelle Antwort.
Danke für deinen Lösungsvorschlag. Ich werde ihn ausprobieren. Nur passt es mir nicht ganz, eine Schriftgrösse innerhalb der Seite zu definieren. Ich möchte die globale Schrifteinstellungen vom body behalten.
Hier der Link was als Vorlage diente:
http://de.selfhtml.org/css/layouts/mehrspaltige.htm#dreispaltigmfg und vielen dank
-
Hi,
Nur passt es mir nicht ganz, eine Schriftgrösse innerhalb der Seite zu definieren. Ich möchte die globale Schrifteinstellungen vom body behalten.
Und D möchtest auch die im Browser voreingestellte Schriftfarbe beibehalten, selbst wenn Du den Hintergrund definierst?
Hier der Link was als Vorlage diente:
http://de.selfhtml.org/css/layouts/mehrspaltige.htm#dreispaltigBesser wäre ein Link oder zumindest wie hier die URL Deiner Seite.
freundliche Grüße
Ingo
-
-