CSS - Elemente vizibile si elemente ascunse in css. Proprietatea display in css

Vom folosi proprietatea display in css pentru a ascunde un element in html si proprietatea visibility pentru a nu afisa acelasi element html.Intrebarea logica ar fi: Si care este diferenta?

 p.ascuns {visibility:hidden;}

visibility:hidden; ascunde paragraful pastrand insa spatiul rezervat in cursul paginii. Celelalte elemente se vor comporta ca si cand paragraful ar fi afisat pe pagina chiar daca acesta nu este vizibil.

 p.ascuns {display:none;}

display:none; ascunde paragraful fara sa pastreze spatiul rezervat acestuia in pagina. Celelalte elemente vor ocupa spatiul rezervat acestuia.

Afisarea elementelor in block sau inlineExista elemente html care sunt delimitate de celelalte elemente sau de elemente de acelasi tip printr-un salt in linie (enter, line break, br). Spunem ca aceste elemente sunt afisate in block.- <h1>, <h2>, <h3>, etc- <div> <p>, <li>Deasemenea exista elemente care sunt afisate pe acelasi rand fara sa influenteze cursul pagini. -<span>, <a>Spunem ca aceste elemente sunt afisata inline.Cu ajutorul CSS afisarea elementelor poate fi schimbata si anume putem afisa elemente precum div paragraf etc inline si elemente precum linkuri span etc in block.

 div {display:inline;} Exemplul de mai sus va afisa toate div-urile pe aceasi linie.Se foloseste in general cu clase sau id in css pentru a personaliza doar div-urile care se vor personalizate. Ex: bara de meniuri orizontala

 div.bara_orizontala {display:inline;}

Mai jos s-a exemplificat un link afisat in block, introducand un salt in linie inainte si dupa el.

 a {display:block;}

Se foloseste in general cu clase sau id in css pentru a personaliza doar link-urile care se vor personalizate. Ex: sidebar.

 a.sidebar_links {display:block;}

Proprietatea float in css.Float se foloseste in general pentru crearea de template-uri si pentru galerii de imagini, dar are mult mai multe intrebuintari.Folosind atributul float elementele vor pluti unul langa altul sau unul in continuarea celuilalt atat cat spatiul rezervat lor o permite. Acest tip de aliniere se refera la o alinire orizontala si nu verticala a elementelor.Sa luam un exemplu practic. Vrem sa facem o galerie de imagini (thumbs) si vrem ca imaginile in miniatura sa fie afisate una langa cealalta in linii si coloane. float:left; va afisa thumb-urile una langa cealalta pe o linie atat cat latimea paginii permite, sarind pe linia urmatoare atunci cand urmatoarea imagine nu incape.

Un alt exemplu. Vrem sa afisam o imagine aliniata la dreapta sau la stanga si vrem ca aceasta sa fie inconjurata de text. float:left; sau float:right; va afisa textul in stanga sau in dreapta imaginii depinde de cum a fost aliniata anterior.

 img {float:left;}

sau

.clasa_de_elemente {float:left;}

CSS -Ruperea randului - Atributul clear

Toate elemenetele html care sunt situate dupa elementul aliniat cu float right sau left vor pluti langa acesta. Pentru a impiedica sa se intample acest lucru atunci cand nu vrem sa se intample vom folosi atibutul clear cu valoarea both:

.enter {clear:both;}

Bara de navigare in CSS In general pentru a crea o bara de navigare fie ea orizontala sau un meniu vertical sunt folosite listele HTML care ulterior sunt personalizate folosind CSS. Linkuri normale in interiorul tagului <li> care vor fi incapsulate in tagul <ul>Am atasat mai jos codul html necesar:

<ul><li><a href="#">Acasa</a></li><li><a href="#">Articole</a></li><li><a href="#">RSS feed</a></li><li><a href="#">Contact</a></li></ul>

Vom folosi acum CSS pentru a da forma listei de mai sus, si anume list-style-type:none - pentru a inlatura "bulinele" specifice listei. Deasemenea vom inlatura marginea si pading-ul pe care browser-ul il atribuie ca valoare standard.

u l {list-style-type:none;margin:0;padding:0;}

Codul CSS de mai sus poate fi folosit atat pentru meniuri verticale cat si pentru bara orizontala.

CSS - Bara verticala de meniuPentru a crea un meniu vertical de linkuri nu trebuie decat sa reprezentam linkurile ca un block si sa stabilim latimea blocului.

 a {display:block;width:100px;}

***Nota Desi nu este absolut obligatoriu sa stabiliti latimea blocului de elemente, se recomanda insa, sa nu omiteti acest detaliu. In browsere mai vechi bara de linkuri poate fi distorsionata.In principiu codul de mai sus este de ajuns pentru a crea un meniu vertical. In continuare aveti insa un meniu terminat si finisat decent.

Model

Meniu Vertical

<html><head><style type="text/css">ul {

list-style-type:none;margin:0;padding:0;

}a:link,a:visited {

display:block;font-weight:bold;font-size:17px;color:#fff;background-color:#d2691e;width:200px;padding:8px;text-decoration:none;

}a:hover,a:active {

background-color:#daa520;}</style></head><body><ul>

<li><a href="#">Acasa</a></li><li><a href="#">Articole</a></li><li><a href="#">RSS Feedt</a></li><li><a href="#">Contact</a></li>

</ul></body></html>

CSS - Bara orizontala de meniuPentru a crea o bara de meniu orizontala in css putem folosi,  ori atributul inline, pentru a forta elementele listei sa fie insirate pe aceasi line, ori atributul floating pentru a forta elementele listei sa fie afisate unul langa celalalt. Folosind inlinePentru a crea o bara de meniuri orizontale cu atributul inline nu trebuie decat sa adaugam urmatoarea linie de cod CSS.

l i { display:inline; }

Ca si afisare standard elementele unei liste sunt afisate in bloc. Linia de cod CSS de mai sus nu face decat sa elimine enter-urile inainte si dupa acestea afisand link-urile pe aceasi linie.  Folosind floatVom folosi atributul float pentru a afisa elementele listei unul langa celalalt. Vom folosi de asemenea atributul display:block; pentru a afisa linkul ca si un buton si vom stabili latimea acestuia.Iata codul CSS aferent.

 li {float:left;}a {display:block;width:60px;}

Odata ce am reprezentat elementul in bloc este obligatoriu sa stabilim latimea acestuia. In caz contrar acesta va ocupa toata latimea disponibila.Codurile afisate anterior sunt suficiente pentru a crea o bara de meniuri orizontala folosind CSS.

Modele de meniu orizontal

Meniu construit folosind inline

<html><head><style type="text/css">ul {

list-style-type:none;margin:0;padding:0;padding-top:6px;padding-bottom:6px;

}li {

display:inline;}a:link,a:visited {

font-weight:bold;font-size:17px;color:#FFFFFF;background-color:#d2691e;text-align:center;padding:6px;

text-decoration:none;}a:hover,a:active {

background-color:#daa520;}</style></head><body><ul>

<li><a href="#">Acasa</a></li> <li><a href="#">Articole</a></li>

<li><a href="#">RSS Feed</a></li><li><a href="#">Contact</a></li>

</ul></body></html>

Meniu construit folosind float

<html><head><style type="text/css">ul {

list-style-type:none;margin:0;padding:0;overflow:hidden;

}li {

float:left;}a:link,a:visited {

display:block;width:120px;font-weight:bold;font-size:17px;color:#FFFFFF;background-color:#d2691e;text-align:center;

padding:4px;text-decoration:none;

}a:hover,a:active {

background-color:#daa520;}</style></head><body><ul> <li><a href="#">Acasa</a></li>

<li><a href="#">Articole</a></li><li><a href="#">RSS Feed</a></li><li><a href="#">Contact</a></li>

</ul></body></html>