Ciao a tutti, mi sto dilettando a costruire una barra di navigazione orizzontale con la tecnica dello sliding-doors però non riesco a visualizzare la barra qualcuno può aiutarmi?
di seguito il codice:
HTML
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stile.css" >
</head>
<body id="pageone">
<center>
<div id="corpo">
<div id="intestazione">
<center>
[img]images/apple_logo2.jpg[/img]
</center>
</div>
<div id="nav">
<ul>
<li id="butt1">Home
<li id="butt2">Prodotti
<li id="butt3">Contatti[/list]
<div id="centro">
Home page
</p>
</div>
<div id="footer">
</div>
</center>
</body>
</html>
CSS:
body {
background: url("images/sfondo2.gif");
text-align: center;
}
#corpo {
width : 80%;
height : 95%;
float : center;
margin : 0;
border-width : 0;
border-bottom-width : 0;
border-style : none;
}
#corpo p {
font-size : 100%;
text-align : justify;
font-family : cursive;
}
#intestazione {
background-color : white;
width : 100%;
height : 5%;
float : left;
margin : 0;
border-width : 0;
border-bottom-width : 0;
border-style : none;
}
#intestazione img {
width : 10%;
}
#nav {
background: url("images/nav.gif") no repeat 0 0;
line-height: 1;
z-index: 9998;
width : 100%;
height : 10%;
float : left;
padding-top: 5px;
}
#nav a {
display : block;
height: 44px;
text-indent: -5555px;
overflow: hidden;
}
#nav li{
float:left;
position: relative;
}
#nav #butt1 a { background-position: 0 0; width: 133px; }
#nav #butt2 a { background-position: -133px 0; width: 133px; }
#nav #butt3 a { background-position: -266px 0; width: 133px; }
#nav #butt1 a:hover { background-position: 0 -37px; width: 133px; }
#nav #butt2 a:hover { background-position: -133px -37px; width: 133px; }
#nav #butt3 a:hover { background-position: -266px -37px; width: 133px; }
body#pageone #nav #butt1 a { background-position: 0 -137px; width: 133px; }
body#pagetwo #nav #butt2 a { background-position: -133px -37px; width: 133px; }
body#pagethree #nav #butt3 a { background-position: -266px -37px; width: 133px; }
#centro {
background-color : gray;
width : 100%;
height : 75%;
float : left;
margin : 0;
border-width : 0;
border-width : 0;
}
#footer {
background-color : white;
width : 100%;
height : 2%;
float : left;
margin : 0;
border-width : 0;
border-bottom-width : 0;
border-style : none;
}
#footer p {
text-align: center;
font-size : 60%;
color : black;
}
in allegato l'immagine utilizzata per il rollover
Rispondi quotando