Witam.
Ostatnio zachciało mi się zrobić menu w cssie. Miałby to być modne tzw “zakładki”. Wymyśliłem to w taki sposób, ze będzie to wykaz z linkami w których zdefiniuje się tło i obramowanie. Zaznaczona zakładka będzie miała odpowiednia klasę, i brak obramowania na dole, za to będzie je miała po bokach i na górze.
Sęk w tym że trochę chyba porwałem się z motyką na słońce i coś mi nie wyszło.
Tak (blisko, zdecydowanie najbliżej poprawności i prawidłowości ) wyświetla to najnowszy FireFox3:
Tak wyświetla to opera:
Tak wyświetla to internet explorer:
Podejrzewam że interpretacji tego jest tyle ile jest przeglądarek jestem tym naprawdę załamany
Oto mój styl css, na którym zbudowałem powyższe menu (jestem początkujący).
Co zrobiłem źle? Przy okazji, chciałbym żeby ten pasek (border-bottom od li ) rozciągnąć na 100%, tzn do szerokosci okna przegladarki:(
#menus{ position:fixed; right: 0px; top: 0px; left: 0px; background: black; margin:0px; height: 38 px; width="100%"}
#tekst{position:absolute; right: 0px; top: 444px; left: 0px; background: black; color: lime; }
ul#menu{list-style-type:none;position:relative;height:28px;font-family:"Trebuchet MS", Calibri,Arial,sans-serif;font-size:13px;font-weight:bold;margin:0px ;padding:100px 0 0 0;}
ul#menu li{display:block;float:left;margin:4 0 0 0px;height:27px; border-bottom: 4px solid #29D307; border-bottom-width: 100%;}
ul#menu li.left{margin:6;}
ul#menu li a{display:block;float:left;color:#fff;background:black; line-height:27px;text-decoration:none;padding:0 33px 0 18px;height:27px;}
ul#menu li a.right{padding-right:4px;}
ul#menu li a:hover{
color:black;
background:#00FF00;
}
ul#menu li a.current{
color: #29D307;
backrground:#000000;
border-bottom: none;
border-top: 4px solid #29D307;
border-left: 4px solid #29D307;
border-right: 4px solid #29D307;
}
ul#menu li a.current:hover{
color: #000000;
backrground:#83E07E;
border-bottom: none;
border-top: 4px solid #29D307;
border-left: 4px solid #29D307;
border-right: 4px solid #29D307;
}
A to menu:
[/code]