|
|||
![]()
Hallo,
ich habe die Navigation und das Logo mit Grafiken gemacht. Hat auch prima funktioniert, bis ich dem Logo noch einen Link gegeben habe. Navi und Logo sind im Mozilla sehr weit auseinandergerutscht. Und ich bekomme sie nicht mehr dichter zusammen. Ich habe clear und float überprüft und keinen Fehler gefunden. Mir ist aufgefallen, dass die Box für das Navi sehr hoch war und daraufhin hat sie eine Höhe bekommen. Margin und Padding ändern nichts am Abstand zwischen den Boxen. Ich hoffe ihr könnt mir weiterhelfen. Das Beispiel liegt hier und hier kommt der Code: HTML-Code:
<body> <div id="container"> <div id="main"> <div id="header"> <div id="logo"> <a href="index.html"><img src="bilder/logo.gif" width="213" height="15" border="0" alt="Home"></a> </div> <div id="navi"> <ul> <li id="grafik"><a href="index.html">Grafik<span></span></a></li> <li id="fotografie"><a href="tagesthemen.html">Fotografik<span></span></a></li> <li id="kontakt"><a href="kontakt.php">Kontakt<span></span></a></li> <li id="impressum"><a href="impressum.html">Impressum<span></span></a></li> </ul> </div> </div> <!-- Ende header--> Code:
/* Kopfbereich */ #header { margin-top: 0px; margin-right: 30px; margin-left: 30px; width: 540px; /*height: 100px; */ background:#FFF; } #logo { height: 15px; width: 213px; margin-top: 10px; float:right; } /* Navigation */ #navi { clear:right; float:right; height: 20px; padding-bottom: 10px; } #navi li { float:left; width: 50px; list-style-type:none; } #navi #grafik { width: 45px; } #navi #fotografie { width: 85px; } #navi #kontakt { width: 65px; } #navi #impressum { width: 85px; } #navi a { display: block; height: 10px; width: 100%; position: relative; overflow: hidden; } #navi span { position: absolute; width: 100%; height: 10px; top: 0; left: 0; background: url(bilder/navi_grafiken/navi.gif); background-repeat: no-repeat; cursor: pointer; } #navi a span { cursor: pointer; } /* Navi Grafik */ #navi #grafik a span { background-position: 0 0; } #navi #grafik a:hover span, #navi #grafik a:active span, #navi #grafik a:focus span { background-position: 0 -10px; } /* Navi Fotografie */ #navi #fotografie a span { background-position: -45px 0; } #navi #fotografie a:hover span, #navi #fotografie a:active span, #navi #fotografie a:focus span { background-position: -45px -10px; } /* Navi Kontakt */ #navi #kontakt a span { background-position: -130px 0; } #navi #kontakt a:hover span, #navi #kontakt a:active span, #navi #kontakt a:focus span { background-position: -130px -10px; } /* Navi Impressum */ #navi #impressum a span { background-position: -195px 0; } #navi #impressum a:hover span, #navi #impressum a:active span, #navi #impressum a:focus span { background-position: -195px -10px; } Lila_3 |
Sponsored Links |
Sponsored Links |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit Navigation | safari | CSS | 12 | 20.04.2011 12:11 |
Float-Problem? | mischaef | CSS | 33 | 20.10.2010 17:20 |
Problem mit FlyOut Menu im IE7 | quarki69 | CSS | 5 | 15.03.2010 16:46 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 16:29 |
Container mit 2 Container darin -> Hintergrund anzeigen | bendar | CSS | 4 | 05.04.2005 19:18 |