Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Zakładki - problem z IE
xamil
post 11.09.2006, 11:34:38
Post #1





Grupa: Zarejestrowani
Postów: 158
Pomógł: 0
Dołączył: 9.01.2005

Ostrzeżenie: (0%)
-----


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?

Ten post edytował xamil 11.09.2006, 11:35:01
Go to the top of the page
+Quote Post
revyag
post 11.09.2006, 12:10:10
Post #2





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

Ostrzeżenie: (0%)
-----


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


--------------------
-------------

------
Go to the top of the page
+Quote Post
xamil
post 11.09.2006, 12:46:23
Post #3





Grupa: Zarejestrowani
Postów: 158
Pomógł: 0
Dołączył: 9.01.2005

Ostrzeżenie: (0%)
-----


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...
Go to the top of the page
+Quote Post
gekon
post 11.09.2006, 14:39:24
Post #4





Grupa: Zarejestrowani
Postów: 614
Pomógł: 7
Dołączył: 10.11.2003
Skąd: Rzeszów/Kraków

Ostrzeżenie: (0%)
-----


Np. float: right; albo position: absolute;


--------------------
Pokaż kod = Pokaż CAŁY kod, najlepiej działający na jakimś serwerze.
Fanatycy | glazar.info | semantyka | HTML i XHTML FAQ
Go to the top of the page
+Quote Post
s_w_ir
post 11.09.2006, 20:52:18
Post #5





Grupa: Zarejestrowani
Postów: 315
Pomógł: 1
Dołączył: 6.08.2003
Skąd: Kielce

Ostrzeżenie: (0%)
-----


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/
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 18.07.2025 - 04:20