immagine avatar

Ciao come puoi notare ho dato una bella rinfrescatina al mio blog!
Attendo un tuo feedback, per suggerimenti e ulteriori proposte di miglioramento, ma anche, sperando che non ci siano, segnalazioni di errori o malfunzionamenti del blog. Buona lettura!

Applicare CSS ad un semplice elenco

di MaiNick | 7 Nov 2008 | CSS | 3 Commenti

Lista verticale

HTML

<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

#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

<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

#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;
}
Tags: , , , , ,

3 Commenti

  1. Napolux ha detto:

    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 🙂

  2. MaiNickWeb ha detto:

    @ Napolux:
    forse è il mio primo post che leggi in cui descrivo del codice.
    Avevo sbagliato l’impostazione.

    Comunque grazie del consiglio.

  3. Francesco Gavello ha detto:

    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 😀

Trackbacks

Lascia un Commento

^ Torna su