Meniu Rollover cu CSS

Salut, am o problema cu un meniu, incerc sa-l fac dupa modelul asta, dar nu reusesc nici cum, nu stiu cum a calculat el, cand tii mouse-ul deasupra sa apara bucata aceea de meniu. Am atasat fisierele daca vrea cineva sa arunce un ochi.

In index am asa:

Quote

 pixmov, on 4th November 2009, 22:16, said:

pai in style.css  tu ai acolo definite pozitiile background-ului numai pentru a:hover. Pentru starea default, normala, unde sint definitiile?

ar trebui sa ai cam asa:

  
#header ul li a {
background-image:url(img/meniu.jpg);
background-repeat: no-repeat;  
}

Defineste astea de mai sus - imaginea si repetarea -pentru toate a-urile o singura data, ca sa nu repeti acelasi lucru de 8 ori. Dupa aia nu trebuie sa definesti decit ce este diferit, adica pozitionarile. Cam asa

#acasa a { background-position: 0 0}
#acasa a:hover {background-position:  0 -100px}

#acte a{background-position: -28px 0}
#acte a:hover {background-position: -28px -100px}

Si asa mai departe. La fiecare pozitionare masori citi pixeli ai pina in coltul din stinga sus al pozei.

Mi s-a spus că am explicat destul de bine cum se face așa ceva

O sa incerc sa urmez tutorialul tau, mersi frumos.

Mi-ar trebui unu explicat mai in detaliu, nu reusesc sa-l fac ..am facut o varza aici, cu ce aveam, cu ce mi-ai dat tu...apoi am incercat tutorialul tau, n-am reusit nicicum...

Edited by pixmov, 06 November 2009 - 16:40.

Asta ti se intampla pentru ca nu ai studiat cum trebuie tot la rand, secvential, ci ai sarit direct in mijlocul garlei (read: incerci sa faci lucruri prea complicate pentru ce esti capabil sa intelegi pe baza cunostintelor pe care le ai). Am dreptate?
Solutia e simpla: studiaza mai intai CSS, uitand de problema ta initiala (pe care practic o ai rezolvata de i0nutzb mai sus, doar ca nu o intelegi inca). Selectors (DOM, in special relatia child/parent/sibling etc), box model si toate cele.

Edited by OriginalCopy, 06 November 2009 - 23:50.

Da, ai dreptate OriginalCopy nu stapanesc prea bine CSS-ul, dar inveti lucrand te confrunti cu unele probleme si iti raman in cap. (Oricum...trebuie sa mai invat cate ceva mai intai)

 i0nutzb, on 5th November 2009, 21:38, said:

Salut.

1. De ce nu folosesti background la <li>? In felul asta scapi de <span>
2. De ce nu declari float si la <a>? In felul asta scapi de problema lui ie6 cu display:block.

Si nu in ultimul rind, scrii cam cu 30% mai putin cod...

Quote

Și hover pe IE6?

Quote

Tutorialul e scris acum mai bine de un an juma'...

 i0nutzb, on 8th November 2009, 10:27, said:

Daaaa, bine! Iti trebuie javascript pentru li:hover, insa chiar nu e asta o problema. Cine folaseste INCA ie6 are in mod sigur activat javascript. Nici nu stie unde se dezactiveaza.
Trecind peste asta (care nu mai e chiar un impediment, zau...) merge perfect si la ie6.
Oricum, numai pentru dragutul de ie6 nu mai murdaresc eu codul aiurea. De obicei ii dau pur si simplu solutia lui dean edwards cu javascript (chiar cu link direct la sursa lui, nici nu mai  urc scriptul pe serverul local)  si duca-se. Doar daca se cere neaparat compatibilitate 100% pe ie6 ma mai obosesc cu el.  

Bine, acum vorbim numai de dragul polemicii. Sigur ca solutia ta e mai completa, insa uite si tu ce diferenta, numai pentru a asigura functionarea lui ie6 fara js. Chiar nu merita. Acu' un an sau doi, da, era altceva. Tinind cont ca si tutorialul tau e de atunci...

1. html:

<ul id="menu" class="clearfix">
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul>

2. css
Nu declar .clearfix, ca nu are rost aici, stim despre ce e vorba. Vorbim de ce inauntru.

#menu li,#menu a {float:left;background-image:url(background.png);background-repeat: no-repeat;padding:0 0 0 15px;background-position: 0 0}
#menu a {padding: 0 15px 0 0;line-height:25px;background-position: 100% 0;margin-right: -5px} 
#menu li {margin: 0 10px;display:inline} /* na! display:inline special pentru ie6...*/
#menu li:hover {background-position: 0 -25px}
#menu li:hover a{background-position: 100% -25px}

Have  a nice day!

Edited by Jumping Jack, 08 November 2009 - 16:28.

Salut, uite aici rezolvarea. Am incercat sa iti trimit PM, dar am apasat pe "Trimite" ca boul, fara sa fi scris mesajul si fara sa fi atasat zip-ul. Si dupa aia nu m-a mai lasat forumul sa scriu din nou mesaj, habar n-am de ce.
In sfirsit, uite in attachment rezolvarea. Dar ar fi trebuit sa o faci singur, nu e treaba OK asa.

Edited by Jumping Jack, 14 November 2009 - 18:23.

 Jumping Jack, on 14th November 2009, 18:16, said:

Da, stiu ca nu e ok, ar fi trebuit sa incerc sa invat sa o fac singur, dar am nevoie de meniu zilele astea, si nu aveam timp sa invat asa repede. Multumesc frumos pentru ajutor.