Threaded Mode | Mod liniar

10-22-2011 04:14 PM

HTML COD:

Cod:

<html>
 <head>
 <title>Meniu CSS simplu</title>
 <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
 </head>
 <body>
 <ul id="meniu">
 <li><a href="#" class="primul-element">Element 1</a></li>
 <li><a href="#">Element 2</a></li>
 <li><a href="#">Element 3</a></li>
 <li><a href="#">Element 4</a></li>
 </ul>
 </body>
 </html>

COD CSS (style.css):

Cod:

/* stil pentru lista ordonata */

 #meniu{
 list-style:none;
 /* scoate stilul bullet de la lista */
 overflow:hidden;
 /* folosit pt. ca background-ul elementului container sa nu se suprapuna cu elemente cu propietatea float */
 width:100%;
 /* tinand cont de propietatea de mai sus trebuie sa folosim o latime de 100% pt. IExplorer */
 margin:0;
 /* tot pentru IExplorer trebuie specificata si marginea de 0 px */
 padding:1px;
 /* spatiu de 1px intre limita listei si continutul acesteia */
 background-color:#FFFFFF;
 /* culoarea de background a meniului */
 border:1px solid #222222;
 /* definim latimea si culoarea pentru border la meniu */
 }

 /* stil pentru elementele listei */

 #meniu li{
 display:inline;
 /* pentru afisarea corecta pe orizontala in IExplorer */
 }

 /* stil pentru link-uri */

 #meniu a{
 display:block;
 /* modificam link-ul din element inline in element de tip bloc */
 float:left;
 /* aliniaza link-urile pe orizontala */
 width:70px;
 /* latimea pentru un element al meniului (link) */
 height:25px;
 /* inaltimea pentru un element al meniului (link) */
 margin-left:1px;
 /* maringe stanga */
 padding-left:15px;
 /* spatiu intre margine si textul din element */
 background-color:#e9e9e9;
 /* culoare de background pentru elemente (linkuri) */
 border-left:10px solid #444444;
 /* latime si culoare pentru border-ul din stanga */
 font-family:arial;
 font-size:10px;
 text-transform:uppercase;
 text-decoration:none;
 color:#444444;
 /* stilul pentru font (family, size, transform, decoration, color) */
 line-height:25px;
 /* alinierea pe verticala a textului (valoarea este egala cu latimea linkului) */

 }

 /* stil pentru link-uri in starea hover */

 #meniu a:hover{
 background-color:#E5E5E5;
 /* se schimba culoarea de background */
 border-left:10px solid #666666;
 /* se schimba culoarea pentru border stanga */
 color:#666666;
 /* se schimba culoarea textului */
 }

 /* stil pentru link-ul din primul element */

 #meniu a.primul-element{
 margin-left:0;
 background-color:#E5E5E5;
 /* se schimba culoarea de background */
 border-left:10px solid #666666;
 /* se schimba culoarea pentru border stanga */
 color:#666666;
 /* se schimba culoarea textului */
 }

11-21-2011 12:39 PM

dragut, interesant dar as avea o sugestie:
De ce folositi css din exterior? Call rel style css source ingreuneaza pagina.
Din punct de vedere al optimizarii nu e chiar ok...
App...poate ai timp si faci un update folosind CSS3 .
Astept update.
Succes!

11-21-2011 01:56 PM

Sa inteleg a este vorba de un menu pe verticala?

Threaded Mode \| Mod liniar [CSS]Meniu CSS orizontal simplu
Autor	Mesaj