Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][IE]Porozwalane Menu
Forum PHP.pl > Forum > Przedszkole
Matimor
Witam
Ok więc tak mam zrobione menu w CSS, przy Mozilli i Operze wszystko jest w porządku, przy IE zaczyna się coś z tym menu dziać. Zrobiły mi się schody z menu. Jak mam to ułożyć do jednej linii, zrobiłem na każdą przeglądarkę osobne wczytanie stylu ale teraz tego do porządku nie mogę ułożyć:

  1. <div class="header-nav">
  2. <ul>
  3. <li><a href="#" class="nav1" title=""></a></li>
  4. <li><a href="#" class="nav2" title=""></a></li>
  5. </ul>
  6. </div>


  1. div.header-nav {
  2. float: left;
  3. width: 1000px;
  4. border:none;
  5. }
  6.  
  7. div.header-nav ul {
  8. list-style-type:none;
  9. }
  10.  
  11. ul#nav li {}
  12.  
  13. li a.nav1 { float:left; background: url(images/h1.gif) 0 0 no-repeat; height: 25px; width: 165px; }
  14. li a.nav1:hover { height: 25px; background: url(images/h1.gif) 0 -25px no-repeat; }
  15. li a.nav2 { float:left; background: url(images/h2.gif) 0 0 no-repeat; height: 25px; width: 167px; }
  16. li a.nav2:hover { height: 25px; background: url(images/h2.gif) 0 -25px no-repeat; }



Pozdrawiam i proszę o pomoc.
pedro84
Po kiego pakujesz listę w DIV? Przecież można ostylować samą listę, bez tworzenia kodu rodem z DIVmanii...

Generalnie, dajesz float:left; i powinno działać, masz gdzieś to dostępne na www?
lukasz_os
Kod
ul#nav li {display:inline;}
Matimor
Nie, nie mam dostępnego, zauważ, że tam jest float:left; display:inline; żądnej zmiany nie wprowadza.
lukasz_os
http://www.kurshtml.boo.pl/css/poziome_menu,menu.html

To powinno pomóc smile.gif
pedro84
Cytat(Matimor @ 22.01.2010, 22:15:16 ) *
Nie, nie mam dostępnego, zauważ, że tam jest float:left; display:inline; żądnej zmiany nie wprowadza.


Jakbyś miał poprawny kod to byś zauważył gdzie masz błąd. Ja dopiero po skopiowaniu na serwer zauważyłem. float:left; nadajesz elementowi listy (li), nie linkowi.

Proszę, z resztą CSS baw się sam smile.gif

  1. ul#nav {
  2. float: left;
  3. width: 1000px;
  4. border:none;
  5. list-style-type:none;
  6. }
  7. ul#nav li { float:left; }


  1. <ul id="nav">
  2. <li><a href="#" title="">Link</a></li>
  3. <li><a href="#" title="">Link</a></li>
  4. </ul>
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.