nicht angemeldet
Hallo,
ich bin gerade dabei den Kopf einer Website zu erstellen, dabei soll er aus einem Logo und einer (horizontalen) Navigationsleiste bestehen. Das Problem dabei ist, dass das Logo einen (ebenfalls horizontalen) Strich quer über die ganze Seite hat, auf dem die Navi sein soll. Dabei soll es so aussehen, als ob die einzelnen Elemente aus der Linie "herauskommen", also bündig abschließen.
Im Moment habe ich es wie folgt gelöst:
...
<body>
<div id="header">
<ul id="topNavi">
...
<!-- Hier ist dann die Navi -->
</ul>
</div>
<!-- Dann kommt der Rest der Seite -->
...
</body>
#header{
background-image:url("images/logo.png");
background-repeat:no-repeat;
background-position:left center;
margin: 45px 20px 20px;
height:108px /*Höhe des Logos*/
}
#topNavi{
list-style-type:none;
float:right;
margin:0;
padding:0;
}
Jetzt ist natürlich die Navi noch nicht auf dem Strich, sondern halt ein Stückchen darüber. Wenn ich das mit Hilfe von margin-Angaben dann anpassen, sieht es in jedem Browser anders aus. In dem einen ist es bündig und die anderen zeigen verschiedene Abstände von der Linie.
Wie würdet ihr das PRoblem lösen?
Grüße Gnusmas