• M
    User •

    [Risolto] rollover css

    Sono alle prime armi,
    ho letto un pò di tutorial e sono riuscito a creare il mio primo rollover in css.

    
<head>
<style type="text/css">
div#navigation ul{
list-style-type: none;
margin: 0;
padding: 0
}
div#navigation li{float:left;
margin: 0 15px 0;
padding:0;
border: 0px solid #CCC
}
div#navigation a{
position:relative;
display:block;
height: 15px
}
div#navigation a span{
position:absolute;
width:100%;
height:100%;
cursor: pointer;
}
div#navigation a:hover span{
background-position: -97px 0;
}
div#navigation a#current span{
background-position: -194px 0;
}
li#one a{width: 40px} 
li#two a{width: 48px}
li#three a{width: 67px}
li#four a{width: 105px}
li#five a{width: 47px}
li#six a{width: 63px}
li#one span{background: url("home.gif") no-repeat top left} 
li#two span{background: url("band.gif") no-repeat top left}
li#three span{background: url("backline.gif") no-repeat top left}
li#four span{background: url("download.gif") no-repeat top left}
li#five span{background: url("live.gif") no-repeat top left}
li#six span{background: url("contacts.gif") no-repeat top left}
</style>
<style type="text/css" media="print">
div#navigation li a{display: inline;padding: 0.2em}
div#navigation a span{display: none}
</style> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
</head>
<body>
<div id="navigation">
<ul>
<li id="one"><a href="home"><span></span></a></li>
<li id="two"><a href="band"><span></span></a></li>
<li id="three"><a href="backline"><span></span></a></li>
<li id="four"><a href="download"><span></span></a></li>
<li id="five"><a href="live"><span></span></a></li>
<li id="six"><a href="contacts"><span></span></a></li>
</ul>
</div>
</body>
</html>

    tra un link e l'altro ho inserito uno spazio di 15px, intervenendo su:

    
div#navigation li{float:left;
margin: 0 15px 0;
padding:0;
border: 0px solid
}

    in questo spazio vorrei ripetere un separatore grafico da 15x15px... come fare?
    il primo allegato spiega cosa voglio ottenere
    il secondo allegato è la vista attuale

    0
  • M
    User Attivo •

    potresti fare i bg dei tuoi menu con dentro quel separatore... no?

    0
  • M
    User •

    il codice è questo?

    
div#navigation ul{
background-image:url(back.gif)
list-style-type: none;
margin: 0;
padding: 0
}
    0
  • M
    User Attivo •

    questo è quello della UL...ma ogni LI non ha un suo bg?

    0
  • K
    Super User •

    Ciao modok81

    Potresti dare a tutti i li tranne quello della home una classe univoca in modo da impostare a tutti e sul loro lato sinistro un'immagine che faccia da separatore.
    Non devi darla ad home poichè noi andremo ad impostare il nostro separatore alla sinstra dei nostri item e noi non vogliamo impostarla naturalmente anche ad **home **il quale non deve appunto averla.

    Per le classi che userai ai quali andrai ad aggiungere il separatore imposta ad esempio così:

     li.itemS{
float:left;
padding-left:20px;
background: url(path/nomeseparatore.jpg) no-repeat left;
}
```Questo farà si che si creerà uno spazio laterale sinistro al tuo "li".

Il padding-left  crea un margine interno-sinistro di 20px non soggetto però al nostro sfondo il quale appunto , tramite la posizione "left" che gli abbiamo dato , lo posizionerà dove noi vogliamo.

Insomma se provi probabilmente capirai maggiormente cosa intendo :)

Ciao e facci sapere!
    0
  • M
    User •

    non ci salto fuori...:?
    potresti dare un'occhiata perfafore?

    0
  • M
    User •

    Grazie mille!!!!
    funziona!!!!

    [html]
    <head>
    <style type="text/css">
    div#navigation ul{
    list-style-type: none;
    margin: 0;
    padding: 0
    }
    div#navigation li{float:left;
    padding:0;
    border: 0px solid #CCC
    }
    div#navigation a{
    position:relative;
    display:block;
    height: 15px
    }
    div#navigation a span{
    position:absolute;
    width:100%;
    height:100%;
    cursor: pointer;
    }
    div#navigation a:hover span{
    background-position: -97px 0;
    }
    div#navigation a#current span{
    background-position: -194px 0;
    }
    li#one a{width: 40px}
    li#two a{
    width: 48px;
    float:left;
    padding-left:10px;
    background:url(separatore.gif) no repeat left;
    }
    li#three a{
    width: 67px;
    float:left;
    padding-left:10px;
    background:url(separatore.gif) no repeat left;
    }
    li#four a{
    width: 105px;
    float:left;
    padding-left:10px;
    background:url(separatore.gif) no repeat left;
    }
    li#five a{
    width: 47px;
    float:left;
    padding-left:10px;
    background:url(separatore.gif) no repeat left;
    }
    li#six a{width: 63px;
    float:left;
    padding-left:10px;
    background:url(separatore.gif) no repeat left;
    }
    li#one span{background: url("home.gif") no-repeat top left}
    li#two span{background: url("band.gif") no-repeat top left}
    li#three span{background: url("backline.gif") no-repeat top left}
    li#four span{background: url("download.gif") no-repeat top left}
    li#five span{background: url("live.gif") no-repeat top left}
    li#six span{background: url("contacts.gif") no-repeat top left}
    </style>
    <style type="text/css" media="print">
    div#navigation li a{display: inline;padding: 0.2em}
    div#navigation a span{display: none}
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Documento senza titolo</title>
    </head>
    <body>
    <div id="navigation">
    <ul>
    <li id="one"><a href="home"><span></span></a></li>
    <li id="two"><a href="band"><span></span></a></li>
    <li id="three"><a href="backline"><span></span></a></li>
    <li id="four"><a href="download"><span></span></a></li>
    <li id="five"><a href="live"><span></span></a></li>
    <li id="six"><a href="contacts"><span></span></a></li>
    </ul>
    </div>
    </body>
    </html>
    [/html]

    0
Effettua l'accesso per rispondere