[CUM] Antet si meniu orizontal fix

Ma invart de ceva timp in jurul cozii si tot nu reusesc sa-i dau  de cap.

Structura actuala e asa:
antet
meniu
coloana-1 (stanga)
coloana-2 (centrala)
coloana-3 (dreapta)
footer

In antet am mai multe elemente (o poza in stanga, o poza in dreapta, o alta (text) intre ele, si alte elemente (alte poze si linkuri)
Meniul (orizontal) este facut cu <ul> si <li>.

Acum, la scroll, intreaga pagina defileaza, si astfel, la un moment dat, nu mai vad antentul si meniul. As dori ca acestea sa ramana fixe (mereu vizibile).

Am tot incercat cu z-index (valoare mare petru meniu si antent) si mica (negative chiar) la restul.
Am pus si position, la toate elementele (ca altfel stiu ca z-index nu are efect).

La relative, nici o diferenta fata de comportamentul actual.
La fixed, se blocheaza cumva, dar imi "mananca" un pic partea de inceput, de sus, a continutului coloanelor.
La absolute, nu prea se intampla nimic (chiar imi fuge meniul).

Pentru cei care au mai trecut prin asa ceva si au deja experienta, cam cum trebuie sa abordez o asemenea problema si cum trebuie sa structurez si ce conditii sa pun pentru a avea comportamentul dorit?

Multumesc

Edited by colombo2003, 01 April 2016 - 16:58.

trebuie sa bagi totul intr-un container si sa precizezi inaltimea (height)

exemplu aici
https://jsfiddle.net/reimeister/8kGE5/

antentul si meniul le pui pe position:fixed; si raman vizibile tot timpul

@cristi: da, am pus fixed, si se vede intr-adevar cel mai bine si se apropie cel mai mult de comportamentul pe care as vrea sa il am, DAR, nu mai sunt vizibile primele randuri ale tururor coloanelor (probabil ca ar trebui sa le cobor cu margin-top din css).

Ca test, m-am pus pe rescris de la zero, cat mai simplu. Sa vedem ce iese (daca o iesi ceva, ca am avut o zi grea, plus alt examen, si sunt si cam obosit).

Multumesc pentru raspunsurile rapide, la obiect de pana acum. Si poate ca or mai veni si alte idei.


PS. @Flat: nici nu stiam de existent tagului nav (deh, omu' cat traieste invata!). Interesant si eleganta Solutia; un pic cam prea peste nivelul meu, sa zic asa (in sensul ca trebuie si ceva jquery pe acolo). Oricum multumesc pentru sfat.

Eu, de exemplu, ca (sub)meniu (in subsolul paginii) am facut ceva de genul asta (pentru ca nu stiam de <nav>) si stilizat corespunzator din css:

<div class="...">
 <a href="link1.php" title="link1">link 1</a> |
 <a href="link2.php" title="link2">link2</a> |
 etc etc etc
</div>

Edited by colombo2003, 01 April 2016 - 20:16.

colombo2003, on 01 aprilie 2016 - 20:09, said:

Este ok ce ai facut, nu e obligatoriu sa folosesti nav, legat de randurile acoperite da pui margine sau padding astfel incat sa nu iti acopere textul de sus din pozitia initiala.