Cssing »Arhiva - separatoare din meniul

Destul de des, în practică, există meniu delimitat - de exemplu:

Pentru a afla cum să facă un meniu cu un minim de cod HTML valid, și va merge mai departe.

HTML evident pentru astfel de structuri este o listă neordonată UL, e așa:

  1. principal | știri | director | evaluare

După cum se face de obicei

De obicei, pentru a obține rezultatul - adică, meniul cu separatoarele verticale, a trebuit să ceară stânga (sau dreapta) pentru fiecare element de frontieră (aici am omite meniul de poziționare cod, este în exemple):

Așa că obținem ceva de genul:

Nu este exact ceea ce avem nevoie, ca separatoare și separatoare de la faptul că pentru a fi numai între punctele, și ei sunt acum noi doar la partea stângă a fiecărui element. Anterior, problema a fost rezolvată pentru mine pentru a insera o clasă pentru primul element:

Și apoi adăugând o regulă:

Și totul pare să funcționeze așa cum trebuie. Dar. Ambele abordări (cu class = „primul“ și cu delimitatori de text „|“) necesită noi genera elemente asimetrice - este necesar să se facă distincția între prima și restul LI.

Problema (leneș)

Din moment ce meniul meu generat de motor, introducerea acestei clase ar fi trebuit să schimbe codul motorului, si urca pe spate am fost prea leneș. Din aceasta sa născut ca o soluție pentru a face astfel de sigilii fără a introduce nici clase și care funcționează numai cu lista obișnuită.

Ideea este simplu ca 5 cenți. Aici este întregul cod:

  1. #nav
  2. overflow: ascuns; / * oricare ar fi întins UL la conținutul plutească toate browserele, cu excepția IE, precum și pentru noastre „cut-off“ * /
  3. lățime: 100%; / * ce UL întins la conținut IE, la foarte truc este legată în mod indirect * /
  4. >
  5. #nav li
  6. margin-left: -1px; / * schimba toate elementele la stânga * /
  7. >

Linia de jos este aceasta. Am stabilit overflow: ascuns pentru UL - astfel încât tot ceea ce merge dincolo de bloc UL nu va fi afișată. Am stabilit margin-left: -1px pentru toate elementele din listă, care este, primul element va fi lansat pe 1 pixel dincolo de elementul UL, dar acest lucru va fi doar prima delimitatorul foarte nefastă! Toate celelalte distanțierele rămân în cazul -, deoarece nu se extinde dincolo de bloc. Și primul este ascuns. Rezultatul:

A se vedea, de exemplu,

Aceeași idee doar cu inlocuirea cu border-top-top și marja: -1px munca pentru un astfel de meniu:

A se vedea, de exemplu,
In plus o astfel de metodă poate fi utilizată pentru grafice și separatoare. Fie că sunt chiar mai groase decât un singur pixel - trebuie doar să ceară mai negative elemente de listă liniuță. Deci, funcționează pentru separatoare sub formă de imagini.

Deși recepția și destul de uzkoprimenimy, dar am economisit timp și mi-a plăcut ideea. Testat și funcționează în toate browserele mele vindoshnyh (IE5-7, FF, Opera). Cred că funcționează peste tot.

Voi fi bucuros să aud opinia sau tehnici pe care le utilizați dvs.!

insolent ta într-adevăr :))

Strict vorbind:
a). Eu nu fac asta :)
b). În cazul în care elementul este mic, într-adevăr cel mai bine realizat prin «|», mai ales când este vorba de informații secundare (a se vedea vechiul subsol browsing.ru.).
c). Stiluri arata nici mai rău :)

Eu încă înființat accentul greșit. Ideea nu a folosit ca să nu „cinică“, dar faptul că punerea în aplicare a opțiunii cinică, în acest caz, nu este mai ușor decât clasa = „primul“ este. În motorul, vreau să spun.
Dacă face o listă cu ceea ce spun eu - toate elementele sunt obținute simetric identice. Iar în versiunea „cinică“, va trebui în continuare să se facă distincția în cazul în care prima și ultima în motor, care nu s-ar fi stat în picioare pe margini | ...

„Desigur, dacă ne-am tăiat prostește și cu cinism am putea scrie ceva de genul ... loot“))))))))

Bravo! Publicul în venerație!
Deosebit de plăcut pentru că se poate lucra cu beggraundami, dar încă float interesant: la stânga în loc de afișare de obicei: în linie, deși, truc funcționează cu display-inline, asta e doar posibilitatea de a juca cu publicul de frontieră propadaet.Esche-timp în venerație :)

UPD: să nu se joace cu frontiera și cu umplutură pe partea de sus și de jos

Original! Ea a luptat mult timp cu asta! Acum, eu voi mai inteligent :))

Hmm, o abordare interesantă, dar dacă am nevoie pentru a face sigilii mai puțin decât înălțimea blocului, atunci această opțiune nu va funcționa = \

1) înălțimea blocului, în acest caz un concept vag - cere padding-top va fi înălțime mai mică și mai mică. Dar dacă te referi la înălțimea fontului 2)
2) utilizați imaginea de fundal - în cazul în care acesta este un pixel larg - abordarea este complet rola. Mai mulți pixeli? Mai multe margin-left: -X

Se pare a fi spus?

Maladeeets ah, acum știu cât de repede am boarderi „pe moarte“ degrade face pentru noul meniu și nici un abur, senks.

Da, alătură-te Zigzag - de obicei, vreau frontiera nu este înălțimea unei frontiere, și mai mici și mai ordonat. Dar modul în care am încercat o dată.

Vă mulțumesc pentru drum. Eu însumi am confruntat cu această problemă de mai multe ori, dar întotdeauna reguli pentru acest HTML. Acum știm.

Aproape offtopic: nu „va trebui să“ și „va.“ )

Deci, nu întotdeauna acest truc mi-a părut evident. )

2Mourner: Da, fără îndoială, e doar - dar îmi place un fel de eleganță, care, dacă această idee. Ce este ceva în ea. Și, după cum se poate vedea că nu am știut totul. I pentru schimbul de experiență;)

2Michael Yakovis: Pentru artinok mici, trebuie să funcționeze fără frontiere și imagini de fundal - dar tehnica pare a fi nu se bazează în mod special tocmai la frontiera. Doar înlocui frontiera stânga în fundal: .... 0 până la 50%. Și truc se face.

2Strannik: Vă mulțumim! Într-adevăr obraznic! Rectificat.

Într-adevăr metodă absolut transparentă, într-o astfel de cerere, atunci de ce nu cred că afară, deși, uneori, ar putea deveni mai ușor, mulțumesc.
Și acum, pentru a confirma toate oferta de mai sus pentru a reface meniul aflat în partea de jos a blog pentru a „nu prost în străinătate aluat div # subsol> p>“ și înregistrări;)

Toți gând care a fost primul condamnat :)

Am doar o fobie de un fel dezvoltat - pentru un an nu a schimbat nici un CSS sau HTML pe blog. Numai atunci dependent ... perfecționismul distruge mine imediat :)

Doar pe partea de sus, care este doar că puțin secundar și nu generate de motorul din meniu

dar versiunea cu „|“ delimitat și CSS3 indiciu:
browsere bune:

Mi-ar CSS2 costul:
#nav> li + li
:)
Dar mulțumesc pentru inteersno opțiune pentru IE)

overflow: ascuns ca un instrument de aspect de pagină - chiar și un lucru util. ;-)

Cu toate acestea, ai uitat _polozhitelnom_ câmp pe partea opusă a fiecărui element al listei - pentru a compensa elementele de schimbare ciclice și asociate „torsadate“ le reciproc:

Super idee! Mai ales ca „automat“ ținând departe distanțierele suplimentare din partea stângă, în cazul, în cazul în care link-urile nu se potrivesc pe o singură linie. Acest lucru nu este realizat nici ce CSS3!
5+

MT: Multumesc pentru pont! Eu disprețuiesc un pixel :)

> Cum sa faci un meniu cu un minim de cod HTML valid

Am blocat pentru o lungă perioadă de timp: acesta este „codul corect, care este un pic“ sau „cod minim corect“?

probabil, a avut pisanut:
„Pe cât de mult posibil, cu un drept minim“
:-)

modul de a egaliza meniul orizontal pe dreapta. /

float: right pentru LI
sau
display: inline pentru LI
și text-align: dreptul la UL
sau
float: left pentru LI
float: dreapta pentru UL

Da. lenea este problema tuturor problemelor.

SW. Seryoga lene este motorul progresului, dacă oamenii din cauza lenei nu ar fi încercat orice mod posibil de a simplifica munca lor, prin orice mijloace progres se opreau ... :)

Da, meniu destul de bine. Dar, de foarte multe ori este necesar pentru a face un meniu orizontal cu lista verticală, dar cu ea și cu probleme. Valabilitatea atinge posibil, dar de lucru adecvate în toate browserele - aproape nici unul. Trebuie să alegem una din cele două lucruri - fie valabilitatea sau funcționarea normală. Personal, am ales a doua opțiune.

și cuvântul „leneș“ - nu este un acronim: P

Și doar foarte interesant, întotdeauna folosit pentru a atribui o clasă de la primul paragraf)

Ca să nu mai spun că eu sunt un conservator, dar în cazul în care șablonul site-ul motorului este prezent, atunci este mai bine să utilizați o clasă suplimentară, bine tolok în acest caz, în cazul în care meniul nu conține separator porosto. În general, folosiți întotdeauna o clasă, deoarece Este ușor de citit și mai flexibil.

Cum acest meniu pentru a alinia centrul paginii pentru toate browserele?
În special pentru IE6?

Pentru FF, Safari Opera'y și am făcut acest lucru:

afișare ul: tabel;
margin: 0 auto;
>

afișare li: inline;
Marja: 0 1pixel 0 -1px;
>

IE a început să arate la primul separator element de meniu :(

Solutia este foarte elegant
Codul semantically credincios

Vă mulțumesc, utilizați de multe ori această opțiune

Excelent. Am vrut mult timp să învețe cum să facă acest lucru fără prima și ultima pentru Li.

Totul e bine. Dar dacă separatoarele trebuie să fie grafic? M-am gândit și sa gândit cum să facă, și până în prezent doar cu o încălcare teribilă a semantica ceva).

Ugh, îmi pare rău, am citit neatent.

Vă mulțumim! A ajutat. Spread soluția:

Meniu orizontal | Centrat | cu separatoare verticale

#navBox float: left;
stânga: 50%;
Poziția: relativă;
>

Poziția #navBox ul: relative;
stânga: -50%;
float: left;
list-style: none;
margin: 0;
padding: 0;
overflow: ascuns;
>

#navBox li float: stânga;
border-stânga: 1pixel # 000 solide;
margin-left: -1px;
margin-top: 1px;
umplutură. 1em 3em;
>

#navBox o culoare: # 000;
text-decoration: none;
font-weight: bold;
>


  • principal

  • știri

  • director

  • evaluare

    • Ce byaka avansat Ugh. Jura, puteți face mea HTML să fie văzut? Și atunci el știe ce sa întâmplat fig.

    As vrea sa am un pinguin, pentru că i cant înțeleg nimic din asta

    Ei bine, dacă vreau să fac separatoarele sub forma unui slash, nu o linie dreaptă:
    Prima / Noutăți / Catalog / Evaluare
    Apoi, se pare că nu există nici o deja trucuri sunt inutile și cadre și câmpuri? Și are un loot hack cinic, așa cum se vede de la începutul Postului Mare.

    Ei bine, în funcție de situație, puteți utiliza fie: după ce (a înlocuit la IE o expresie simplă) Fie slash imagine de fundal sau durata cu un slash - prea poate fi ascuns prin preaplin.

    Și ce se poate face aici, aceste linii (de frontieră: 1px solid gri) ELEMENT | PUNCT | PUNCT
    Acum acestea: | .
    Cum pot fi din această situație și de a face mai puțin în mijloc?
    dacă pui o astfel de înălțime li: 10px, atunci ei scad, dar rămân în partea de sus.

    și anume dimensiunea de reducere a border1px în înălțime și egaliza în mijloc

    [...] Aici este o altă abordare interesantă: [...]

    [...] Aici este o altă abordare interesantă: [...]

    în general, puteți utiliza Li: primul copil, dar pentru Internet Explorer este o caracteristică acceptată începând cu versiunea 9

    în general, puteți utiliza Li: primul copil, dar pentru Internet Explorer, această proprietate este acceptată începând cu versiunea 9 :)

    Prin modul în care este blog-ul dvs. este interesant și că, uneori, există hacks care vor lucra nu numai pe browsere mai vechi, dar, de asemenea, la cele noi. Acest hack ca totul funcționează ca standard descrie. Și se bazează pe unele, vă puteți gândi și mai mult, dar pentru bug-uri browserele moderne (care, din păcate, din păcate, au fost sunt și vor fi)

    Vorbesc despre bug-uri, în cazul în care cho, nu despre browserele (browsere care vor cu acuratețe și regreta nimic) =)

    ultima 5