[CSS] Menu

[Witek76]

Witam!

Mam taki przykład http://jsfiddle.net/yNzCj/ (HTML i CSS).
1. Jeżeli spojrzymy na rezultat to widać pod zakładką na przykład "o firmie" czerwony kreskę 3px. Nie bardzo rozumiem dlaczego jest to opisane w div#menu a nie w .podmenu - przecież zakładka O firmie znajduje się w obrębie klasy .podmenu.
2. Wiem, że pozycjonowanie absolutne to pozycjonowanie względem pojemnika w jakim się znajduje, natomiast względne to rozmieszczenie względem miejsca w jakim element znalazłby się domyślnie - natomiast nie wiem co dzieje się w przypadku z przytoczonego przykładu:

Kod:

ul.podmenu ul {
margin:0px;
padding:0px;
position:absolute;
z-index:1;
list-style-type:none;
display:none;
background-color:#000000;
}

ul.podmenu ul li {
position:relative;
float:none;
border-bottom:1px solid #ffffff;
}

3. Co robi i poco jest w przykładzie z-index:1.

Z góry dziekuje za odpowiedz,
pozdrawiam,

[Kartofelek]

1) bo tam zwyczajnie jest za dużo znaniczków. Powinno być jedno ul.menu z podlistami ul. I tyle.
2) pozycjonowanie absolutne jest względem pierwszego rodzica który ma pozycjonowanie relatywne. U ciebie LI maja relatywne, wiec ul ktore w nich leżą są pozycjonowane względem nich.

przyklad:

div.jeden <-- relatywne
----div.dwa
---------div.trzy <- absolutne

Div trzy mimo ze lezy w div.dwa bedzie pozycjonowany wzdledem div.jeden bo dopiero ten ma relatywne.

[Witek76]

1.Czyli ul.podmenu ul li pozycjonuje ul.podmenu ul ? a co z hierarchią nie powinno być odwrotnie ?
2. Co się dzieje jak się pozycjonuje bez wartości liczbowych?

[Kartofelek]

1)

Kod:

<ul>
     <li style="position:relative">
           <ul class="podmenu" style="position:absolute">....</ul>
     </li>
</ul>

w powyzszym przykladzie podmenu jest pozycjonowane wzgledem rodzica LI, bo ten ma position:relative. Jakby nie mial takiego pozycjonowania to to .podmenu bylo by pozycjonowane wzdlegem pierwszego jaki napotka a ktory by mial relatywne. Jakby zaden nie mial to by byl pozycjonowany wzgledem calej strony.
U ciebie to pozycjonowanie wzgledem LI jest wazne, bo dzieki temu menu jest polozone na dole DANEJ LI.

2) To wtedy jego pozycja sie nie zmienia. Ale pozycjonowanie absolutne powinno byc raczej robione z pozycjami, bo inaczej nie ma sensu.

[Witek76]

Jeszcze jedno pytanie: rozumiem, że skoro elementy są wewnątrz div#menu to dziedziczą to co jest w div#menu - a jak tak jest to dlaczego tylko główne elementy menu je dziedziczą a reszta (pozycje rozwijane w podmenu mają formatowanie z div#menu) już nie? (mam na myśli czerwoną kreskę 3px)

[Kartofelek]

Dziedziczenie =/= dziedziczenie

Przyklad:

Kod:

<div class="xxx">
     <div class="ppp">
          <div>
               <a href="">
                    <div>....</div>
               </a>
          </div>
     </div>
</div>

Teraz jeżeli napiszesz

Kod:

.xxx div {...}

to to stylowanie bedzie sie odnosilo do wszystkich div wewnątrz .xxx (czyli nawet do tego w linku A).
To jest to twoje dziedziczenie, a tak naprawdę to styl lapie wszystkie elementy. U ciebie są to LI.

Teraz jeżeli chcesz ostylować tylko dzieci danego węzła to napiszesz:

Kod:

.xxx > div {...}

Powyższy styl odnosić się będzie tylko do diva .ppp bo tylko on jest dzieckiem dla .xxx (czyli lezy bezposrednio w danym wezle)

Teraz przekładając to na twój przykład.

Kod:

.menu li {.....} <--- styluję wszystkie li (nawet dla podmenu, bo przecież są glebiej danego wezla)
.menu .podmenu li {} <--- nadpisuje niektore wlasciwosci powyzszego stylowania (zapewne float:left dla elementow podmenu nie bedzie pasowalo)

mozna tez tak:

Kod:

.menu > li {....} <---- styluje tylko glowne menu (bez .podmenu)
.menu .podmenu li {....} <------- nic nie musze nadpisywac, styluje od poczatku podmenu

Która metoda jest lepsza?
To zalezy od layouty. Jeżeli podmenu są bardzo podobne do glownego menu, wtedy v1 jest lepsza. Jezeli znacznie się różnią wyglądem, wtedy v2

[Witek76]

Tak tylko wciąż nie wiem dlaczego

ul.podmenu ul li {
position:relative;
float:none;
border-bottom:1px solid #ffffff;
}
nie dziedziczy po div#menu border-bottom:3px solid #ff0000;
(jak usuniemy wpis border- bottom:1px solid #ffffff; to niema nic)

[Kartofelek]

div#menu {.....}
ul.podmenu ul li {....}
pierwszy styl styluje wszystkie divy które mają id=menu
drugi styl styluje wszystkie li w podmenu.

co jedgno ma do drugiego?

Nie rozumiesz idei. W CSS NIE MA DZIEDZICZENIA.
Jest nadpisywanie.

Kod:

<div></div>
<div></div>
<div></div>
<div class="dupa"></div>

div {color:red}
div.dupa {color:blue;}

wszystkie divy dostały kolor czerwony. Potem dla jednego konkretnego to nadpisujemy. I tyle.

Kod:

.podmenu li {.....}
.podmenu li ul li {....}

li w podmenu dostają jakieś stylowanie. Ale chcemy dla dalszego podmenu zmienić jakąś właściwość. To ją nadpisujemy.


PS. tak naprawdę istnieje opcja dziedziczenia z rodzica. Zwie się inherit i używa się jej gdy dziecko ma coś przejąć od rodzica np color:inherit. Raczej bardzo rzadko używane.