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 inline
Exista 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.

ul{
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 meniu
Pentru 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 meniu
Pentru 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 inline
Pentru 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 float
Vom 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>