Hallo,
ich mache mich gerade daran, ein tabellenloses Layout für meine Site mittels CSS zu erstellen. Ich bin neu auf dem Gebiet.
Am linken Rand meiner Homepage soll ein Navigations-Menü mit Hilfe einer Liste erstellt werden.
Dies habe ich mit folgendem Code bisher realisiert.
Hier die Einbindung in die index.php (der div-Container "left" stellt den linke Spalte des Layouts dar):
Und hier mein Code aus der CSS-Datei:
Folgendes Probelm tritt nun auf:
Der IE setzt zwischen jedes der einzelnen <li>-Elemente einen kleinen 1px-breiten Rand. Ich weiß nicht wie ich ihn wegbekommen soll.
Außerdem ist im FF und im IE über der Liste ein Abstand. Wie bekomme ich den weg?
Zur besseren Veranschaulichung anbei ein Bild.
Vielen Dank schonmal!
ich mache mich gerade daran, ein tabellenloses Layout für meine Site mittels CSS zu erstellen. Ich bin neu auf dem Gebiet.
Am linken Rand meiner Homepage soll ein Navigations-Menü mit Hilfe einer Liste erstellt werden.
Dies habe ich mit folgendem Code bisher realisiert.
Hier die Einbindung in die index.php (der div-Container "left" stellt den linke Spalte des Layouts dar):
Code:
<div id="left">
<h1>News</h1>
<ul>
<li><a href="#">Aktuell</a></li>
<li><a href="#">Archiv</a></li>
<li><a href="#">Rumours Box</a></li>
</ul>
</div>
Und hier mein Code aus der CSS-Datei:
Code:
#left ul{
margin: 0;
padding: 0;
list-style: none;
border: 0px;
border-left: 1px solid #D8D5CA;
border-bottom: 1px solid #D8D5CA;
border-right: 1px solid #D8D5CA;
border-top: 1px solid #D8D5CA;
}
#left li {
display: block;
}
#left a:link, #left a:visited {
margin: 0; padding: 0;
background-image: url(../../images/left_bg.png);
background-repeat: repeat-y;
font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #303848; text-decoration: none;
display: block;
height: 21px;
}
Folgendes Probelm tritt nun auf:
Der IE setzt zwischen jedes der einzelnen <li>-Elemente einen kleinen 1px-breiten Rand. Ich weiß nicht wie ich ihn wegbekommen soll.
Außerdem ist im FF und im IE über der Liste ein Abstand. Wie bekomme ich den weg?
Zur besseren Veranschaulichung anbei ein Bild.
Vielen Dank schonmal!