Pagina 1 din 1
Coloane in CSS
Scris: Dum Iul 22, 2012
de bvlucretiu
Buna seara!
Cum fac în CSS ca în cazul în care am o serie de elemente așezate în coloană iar aceasta se întinde mult în jos și aș dori să nu se afișeze pe o singură coloană lungă ci să se împartă în mai multe coloane mai scurte, cum pot stabili lungimea coloanei pe care să se întindă coloana?
Vă mulțumesc mult!
Coloane in CSS
Scris: Lun Iul 23, 2012
de MarPlo
Salut
Ca sa afisezi textul in pagina pe coloane folosind CSS, se poate aplica proprietatea CSS3
column-count. Pe langa aceasta pot fi utilizate proprietatile:
column-rule (linie intre coloane) si
column-gap (spatiul intre linia dintre coloane si text).
Poti de asemenea sa setezi o inaltime cu proprietatea
height (sau
max-height). In acest caz, daca textul depaseste numarul de coloane setat la
column-count, se va crea automat o alta coloana, dar se va extinde lungimea pe orizontala. Ca sa nu depaseasca latimea paginii, se poate seta cu
width (sau
max-width) o lungime fixa, si se aplica
overflow:auto; la elementul respectiv.
Exemplu (3 coloane):
Cod: Selectaţi tot
<style>
.cls{
height:80px;
max-width:80%;
overflow:auto;
border:1px solid blue;
/* Setare nr coloane */
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari, Chrome */
column-count:3;
/* Setare linie intre coloane */
-moz-column-rule:2px outset #fe01fe; /* Firefox */
-webkit-column-rule:2px outset #fe01fe; /* Safari, Chrome */
column-rule:3px outset #fe01fe;
/* Setare spatiu dintre linie si text */
-moz-column-gap:1.1em; /* Firefox */
-webkit-column-gap:1.1em; /* Safari, Chrome */
column-gap:1.1em;
}
</style>
<div class="cls">
Linia 1 <br/>
Linia 2 ... <br/>
Rand 3 <br/>
Randul 4 <br/>
Linia 5 ... <br/>
Rand 6... <br/>
Rand 7... <br/>
Linia 8 <br/>
Randul 9 ... <br/>
Linia 10
</div>
Re: Coloane in CSS
Scris: Mie Iul 25, 2012
de bvlucretiu
Era vorba despre pagina principala (index.php) al serverului local wamp si am incercat toate variantele cu firefox si nu merge, nu stiu ce nu am facut cum trebuie!?
Cei drept ca este un pic cam tarzie ora la care am incercat si este posibil sa fie si acesta motivul... o sa mai incerc maine!