blocchi orizzontali con link

**Indalo** · 24-12-2009, 16:28

Salve. Volevo creare dei link in orizzontale sulla testata con le sole voci (home contatti ecc.) creandoli come blocchi per assegnare loro dei bordi e per dare, al passaggio del mouse, l'effetto di spostamento del testo verso l'alto (coi css). Ho provato con i span ma i risultati non sono quelli sperati.

**miki003** · 24-12-2009, 17:05

Un esempio naturalmente lo puoi adattare alle tue esigenze come grafica, hover, ecc.

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<html>
        <head>
                <title></title>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <style type="text/css">
<!--
.container {
        width: 500px;
        padding: 15px;
        margin: 3px 0 20px 0;
        border: 1px solid #ccc;
        background: #fff;
}

#navCircle {
        margin: 0;
        padding: 0 0 20px 10px;
        border-bottom: 1px solid #9FB1BC;
}

#navCircle li {
        margin: 0;
        padding: 0;
        display: inline;
        list-style-type: none;
}

#navCircle a:link, #navCircle a:visited {
        float: left;
        font-size: 10px;
        line-height: 14px;
        font-weight: bold;
        padding: 0 12px 6px 12px;
        text-decoration: none;
        color: #708491;
}

#navCircle a:link.active, #navCircle a:visited.active, #navCircle a:hover {
        padding-bottom: 6px;
        color: #000;
        background: url(circle.gif) no-repeat bottom center;
}
-->
</style>
                <style type="text/css">
                <!--
body {
        font-family: verdana, sans-serif;
        font-size: 11px;
        background: #eeeeee;
}                -->
                </style>
</head>

        <body>
                <div class="container">
                        <ul id="navCircle">[*]Home[*]Products[*]Services[*]Support[*]Order[*]News[*]About
[/list]
                </div>
        </body>
</html>

**Indalo** · 07-01-2010, 10:52

Sembra ok. Ma posso usare gli span al posto degli li ?

E posso assegnare un'immagine di sfondo diversa per ogni link mantenendo le altre specifiche uguali ?

Per esempio con un div uguale per tutti i link con dimensioni, font, e altro e creando una classe per ogni link solo per lo sfondo ?

Discussione: blocchi orizzontali con link

Strumenti discussione

Ricerca discussione

Visualizza

blocchi orizzontali con link

Permessi di invio