Lista verticale
HTML
|
1 2 3 4 5 6 7 8 9 |
<div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
#navcontainer { width: 12em; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; background-color: #90bade; color: #333; } #navcontainer ul { list-style: none; margin: 0; padding: 0; border: none; } #navcontainer li { border-bottom: 1px solid #90bade; margin: 0; } #navcontainer li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; } html>body #navcontainer li a { width: auto; } #navcontainer li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; } |
;
Lista orizzontale
HTML
|
1 2 3 4 5 6 7 8 9 |
<div id="navcontainer"> <ul id="navlist"> <li id="active"><a href="#" id="current">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
#navcontainer { margin: 0; padding: 0; height: 22px; font: 11px Verdana, sans-serif; width: 100%; border-bottom: 1px solid #bbb; list-style-type: none; background: #fff; } #navlist li { float: left; margin: 0; padding: 0; width: auto; display: block; } #navlist li a, #navlist li a:link { background: #fff; color: #555; text-decoration: none; padding: 3px 5px 3px 5px; display: block; } #navlist li a:hover { color: #039; border-bottom: 3px solid #bbb; cursor: pointer; background: #eee; } #navlist li a#current, #navlist li a#current:link { color: #000; cursor: default; font-weight: bold; border-bottom: 3px solid #999; } #navlist li a#current:hover { border-bottom: 3px solid #f90; background: #eee; } |
Napolux
Mai pensato di utilizzare un plugin per l’evidenziazione del codice? io uso syntax-highlighter… Lo vedi in azione sul mio blog, guarda l’articolo sul plugin WP oggi 🙂
MaiNickWeb
@ Napolux:
forse è il mio primo post che leggi in cui descrivo del codice.
Avevo sbagliato l’impostazione.
Comunque grazie del consiglio.
Francesco Gavello
Ah, se non ci fossero le liste!
P.s. vi è mai capitato di guardare un listato e immaginarvi la sua resa solo con la mente? A me fa sempre ridere, mi viene in mente Matrix quando il tipo con il pizzetto dice “oramai non vedo più il codice, vedo tizie scosciate, etc etc”
lol 😀