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">
...
</ul>
</div>
...
</body>
#header{
background-image:url("images/logo.png");
background-repeat:no-repeat;
background-position:left center;
margin: 45px 20px 20px;
height:108px
}
#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