Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Zakładki - problem z IE
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
xamil
Przykład: http://www.kamil.klecza.pl

Założenia jakie to menu powinno spełniać:
1. powinno wyglądać pod wszystkimi przeglądarkami identycznie (czyli tak jak wygląda obecnie pod ff/operą)
2. powinno mieć stałą wysokość tzn. nie zależną od tego jaką np. ustawie czcionke w tabach czyli tak jak teraz powinno ją uciąć
3. Obok powinno dać się umieścić jakąś belke z np. jakimiś dodatkowymi przyciskami tak jak to jest teraz (ff/opera).


Ten przykład działa wszędzie prócz ie < 7.0:( W 7.0 o dziwo to poprawili.

Jakieś sugestie jakbym mógł zmienić to menu?
revyag
Parę tematów niżej jest temat o prawie tym samym.
Temat: Menu na CSS
Możesz skorzystać z tego co podał @s_w_ir
xamil
Dzięki. Właśnie patrzę na to. Niestety nie mogą obejść problemu umieszczenia po prawej stronie zakładek dodatkowych przycisków:/ Jakieś pomysły? Ech...
gekon
Np. float: right; albo position: absolute;
s_w_ir
Do listy dodajemy np. dwa elementy które mają klase right
  1. <ul id="zakl_naw">
  2. <li class="przepisy"><a href="#">Przepisy</a></li>
  3. <li class="kontakt"><a href="#">Napisz do nas</a></li>
  4. <li class="artykuly"><a href="#">Artykuły</a></li>
  5. <li class="zakupy"><a href="#">Sklep internetowy</a></li>
  6. <li class="right"><a href="#">Prawy One</a></li>
  7. <li class="right"><a href="#">Prawy Two</a></li>
  8. </ul>

a w CSSie po ul#zakl_naw li (na wszelki wypadek, i dla przejrzystości)
Kod
ul#zakl_naw li {
   float: left;
   height: 21px;
   background-color: #B51032;
   color: #FFFFFF;
   margin: 2px 2px 0 2px;
   border: 1px solid #711515;
}

ul#zakl_naw li.right //od tąd dodajemy
{
   float: right;
}


Cała moc skryptu polega na tym że dla każdej strony możemy zdefiniować zupełnie inny wygląd dzięki id przy body, np. każda strona może kryć inną kolorystyke.

Robiąc teraz klase right tracimy wygląd aktywnej zakładki, ale zmieniając kod na taki(że tak powiem indywidualny):
  1. <li class="zakupy"><a href="#">Sklep internetowy</a></li>
  2. <li class="prawy1"><a href="#">Prawy One</a></li>
  3. <li class="prawy2"><a href="#">Prawy Two</a></li>


i dodając do CSSa
Kod
ul#zakl_naw li {
   float: left;
   height: 21px;
   background-color: #B51032;
   color: #FFFFFF;
   margin: 2px 2px 0 2px;
   border: 1px solid #711515;
}

ul#zakl_naw li.prawy1, ul#zakl_naw li.prawy2 //to jest dodane
{
   float: right;
}

...
body#przepisy li.przepisy, body#kontakt li.kontakt,
body#artykuly li.artykuly, body#zakupy li.zakupy, body#prawy1 li.prawy1, body#prawy2 li.prawy2 { // tu sa dopisane klasy
   border-bottom: 1px solid #fff;
   color: #000000;
   background-color: #FFFFFF;
}

body#przepisy li.przepisy a:link, body#przepisy li.przepisy a:visited, body#kontakt li.kontakt a:link,
body#kontakt li.kontakt a:visited,
body#artykuly li.artykuly a:link,
body#artykuly li.artykuly a:visited, body#zakupy li.zakupy a:link,
body#zakupy li.zakupy a:visited, body#prawy1 li.prawy1 a:link, body#prawy1 li.prawy1 a:visited, body#prawy2 li.prawy2 a:link, body#prawy2 li.prawy2 a:visited{ // tu sa dopisane klasy
   color: #000000;
   background-color: #FFFFFF;
}



Otrzymamy to co chcemy.
Btw. skrypt jest z książki CSS Antologia, a autorka owej ksiązki ów pomysł zaczerpneła z http://unraveled.com/projects/css_tabs/
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.