blue simple menu

autor: mr.franta
previzualizare: click
culori: negru/albastru.
Descriere: mi-a cerut cineva sa ii fac un meniu simplu dar nu l-a mai vrut dupa ce l-am terminat,asa ca m-am gandit sa il postez
Sper sa va placa,este simplu si frumos
codul html se adauga in overal_header overal_footer intr-un widget sau in generalitati.sau de preferinta in alta parte..

html



Codul css se adauga in pa/afisare/culori/CSS
CSS



Ultima editare efectuata de catre Mr.franta in Sam Iun 29, 2013 3:38 pm, editata de 3 ori

Designul este super! Chiar imi place.

Dar la coding,

, adica 'list element' este un tag, care in mod normal ar trebui sa se gaseasca in interiorul unui tag

, sau
, ori la tine nu se gaseste :)) E drept, functioneaza si asa, dar intr-o pagina mai mare, de cateva sute de linii, poate face buguri :D

Codat corect ar fi


Cod:

[color=#474747][/color]
<div class="meniu_nou_container"align="center">
<ul class="meniu_nou">[color=#474747][/color]
<li><a href="#"> link 1</a> </li>
<li><a href="#"> link 2</a> </li>
<li><a href="#"> link 3</a> </li>
<li><a href="#"> link 4</a> </li>
<li><a href="#"> link 5</a> </li>
</ul>
</div>




iar CSS:



Cod:

.meniu_nou_container{
width: 90%;
margin: 0 auto /* asta tine locul tagului <center> */
background: #222 url(http://i36.servimg.com/u/f36/14/12/03/12/meniu211.png);[color=#474747][/color]
border: 1px solid #222;
border-radius: 3px;
webkit-border-radius: 3px;
moz-box-radius: 3px;
height: 37px;
position: relative;
top: xpx;
bottom: xpx;
}

.meniu_nou{
list-style-type: none;
}
.meniu_nou li{
margin-left: 15px;
background: url(http://i36.servimg.com/u/f36/14/12/03/12/normal12.png) no-repeat center;
float: left;
display: inline; /* daca ai pus float left, are cam acelasi efect ca si display inline. Deci trebuie sa renunti la una */
padding: 10px;
}

.meniu_nou li:hover{
tranzition: 0.5s;
background: url(http://i36.servimg.com/u/f36/14/12/03/12/hover210.png) no-repeat center;}

.meniu_nou li a{
padding: 12px;
color:#888;
font-family: tahoma,arial;
font-size: 14px;
font-weight: 600;
text-decoration: none!important;
text-shadow: 0px 1px 2px black;}


.meniu_nou a:hover{
color: white;
text-shadow: none!important;}


Designul este super, felicitari.

foarte tare franta, bravo .

mai am multe de invatat,sper ca voi avea timp sa invat de la tine.
sincer mereu m-am intrebat ce face margin : 0px auto.
o idee imi facusem ca se centreaza dar nu stiam ca inlocuieste ceva anume.

frumos si varu tau stie multe :)

Interesant scriptul, felicitari pentru munca depusa.

Apropo, in scriptul CSS, la meniu_nou li in loc de "}" este "w", deci... daca nu este modificat "w" cu "}" nu este bun scriptul si da eroare atunci cand sa fie salvat/inregistrat in foaia CSS, unu daca nu vede acea gresala minora nu poate folosi scriptu.

multumesc pentru observare.am remediat problema
cadou 100 puncte