Menu w CSSie


(G2spam) #1

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 :slight_smile: ) wyświetla to najnowszy FireFox3:

72579966firefox.PNG

Tak wyświetla to opera:

596130981opera.PNG

Tak wyświetla to internet explorer:

195766240ULOMNE_IE.PNG

Podejrzewam że interpretacji tego jest tyle ile jest przeglądarek :frowning: jestem tym naprawdę załamany :frowning:

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]


(Sp Adrian) #2

Cześć, poczytaj. Powodzenia.


(Sawyer47) #3

Jak widać implementacja CSS w różnych przeglądarkach stoi na różnym poziomie. Będziesz musiał przepisać to menu, nie ma raczej innej rady. Ten poradnik (i w ogóle ten blog) może okazać się przydatny: http://perfectionorvanity.com/2007/06/2 ... max-width/