În articolul acesta voi scrie despre cum să faci o secțiun de cuprins sau fișă index folosind CSS. Este foarte utilă chestia la a crea meniuri pentru restaurant, cel puțin acolo am folosit eu chestia asta.
Și voi folos acest exemplu și aici:
- Ciorbă de burtă
8 lei - Salată de vinete
8 lei - Bere la draft
8 lei - Desert
8 lei - Sandwich la pachet
10 lei
În mod normal elementul de meniu și prețul încap pe același rând, dar la mine pe pagină vor apărea puțin decalate, pentu că trebuie să umblu și în CSSul blogului și… am și alte chestii de făcut :))
Garantez că dacă veți folosi aceste coduri, totul va merge cum trebuie. Iar dacă nu, puteți să îmi trimiteți un mail, iar eu vă voi răspunde cu ultimile noutăți muzicale cu care mă confrunt la momentul respectiv. DECI, MERGE!
Iată și codurile. Prima dată avem codul html:
<ul class=meniu> <li><span>Ciorbă de burtă</span> <span>8 lei</span> <li><span>Salată de vinete</span> <span>8 lei</span> <li><span>Bere la draft</span> <span>8 lei</span> <li><span>Desert</span> <span>8 lei</span> <li><span>Sandwich la pachet</span> <span>10 lei</span> </ul>
Apoi codul CSS
ul.meniu {
max-width: 40em;
padding: 0;
overflow-x: hidden;
list-style: none;}
ul.meniu li:before {
float: left;
width: 0;
white-space: nowrap;
content:
". . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . "
". . . . . . . . . . . . . . . . . . "}
ul.meniu span:first-child {
padding-right: 0.33em;
background: white}
ul.meniu span + span {
float: right;
padding-left: 0.33em;
background: white}
Și ast ar fi! Evident, codul poate fi implementat într-un script php dinamic sau ceva JS. Dar regulile CSS sunt acestea și pot deveni foarte utile.
