- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- [Risolto] rollover css
-
[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
-
potresti fare i bg dei tuoi menu con dentro quel separatore... no?
-
il codice è questo?
div#navigation ul{ background-image:url(back.gif) list-style-type: none; margin: 0; padding: 0 }
-
questo è quello della UL...ma ogni LI non ha un suo bg?
-
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!
-
non ci salto fuori...:?
potresti dare un'occhiata perfafore?
-
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]