In acest tutorial va voi arata cum sa faceti un simplu meniu cu CSS
Multi designeri fac o greseala foarte mare, prin care isi ingreuneaza viata.Ei in timp ce scriu HTML il si formateaza cu CSS , este o greseala foarte mare , cel putin parerea mea este ca mai intai trebuie scris codul HTML si pe urma te poti ocupa de stilarea paginii.Cu astea fiind spuse haideti sa incepem :
<html> <head> <title>Un meniu simplu in css </title> </head> <body> <div id="navigation"> <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Prezentare</a></li> <li><a href="#">Magazin</a></li> <li><a href="#">Contact</a></li> </ul> </div> </body> </html>
Acesta o sa fie meniul nostru , dupa cum vedeti este o simpla lista.
Sunt sigur ca multi dintre voi, care ati mai facut pagini web pana acum , ati auzit de asa zisul CSS RESET . Ei bine, cu CSS Reset, resetezi toate valorile "default" ale navigatoarelor , de exemplu navigatoarele adauga margin si padding la elementele de pe pagina , bineinteles ca noi nu ne dorim asa ceva.
html, body, ul, li, a, div{ margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
Bineinteles intr-un proiect mai mare se adauga mai multe elemente cum a fi : img, em, small, h1, h2, h3, ol etc .
Eu am adaugat doar pe cele care le vom folosi.
Ok, haideti sa ne intoarcem la stilarea meniului :) :
#navigation{ background-color:#8ec196; height:45px; width:850px; margin:0 auto; border:1px solid #9cebda; } ul#menu{ list-style:none; margin-left:7em; } #menu a{ text-decoration:none; font-size:1.8em; color:#06F; } #menu a:hover{ text-decoration:underline; color:#0CC; } #menu li{ /*cu float facem lista sa "pluteasca", adica sa se alinieze horizontal*/ float:left; padding:5px 15px 5px; text-align:center; }
Da si tu un like
Tweet
Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta
Comenturi
2 comenturi pana acum... (posteaza si tu)Ma bucur ca ti-a fost de ajutor acest tutorial. Poate ne recomanzi si prietenilor tai :) Bafta
Postat de Mihail ALin pe data de: Thursday, 02.23.12 @ 09:54am
va multumesc foarte, foarte, foarte muuuuuult. cautam demult un cod ca acesta. multumesc frumoooooooooooooooooooooooooooos. :X
Postat de hihi ^^ pe data de: Friday, 02.10.12 @ 11:56am