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>Didaskalos</title>
<link rel="stylesheet" type="text/css" href="stile.css" >
</head>
<body id="pageone">
<center>
<div id="corpo">
<div id="intestazione">
[img]images/logo2.gif[/img]
[img]images/immagine1.png[/img]
[img]images/immagine2.png[/img]
</div>
<div id="nav">
<ul>
<li id="butt1">Home
<li id="butt2">Prodotti
<li id="butt3">Contatti[/list]
</div>
<div id="centro">
Home page
</p>
</div>
<div id="footer">
</div>
</div>
</center>
</body>
</html>
CSS:
body {
background: url("images/sfondo3.gif");
text-align: center;
}
#corpo {
width : 80%;
height : 95%;
float : center;
margin : 0;
padding: 1% 0% 0% 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 #logo{
width : 35%;
float: left;
}
#intestazione #im1{
width : 27.2%;
float: center;
}
#intestazione #im2{
width : 27%;
float: right;
}
#nav {
line-height: 1;
z-index: 9998;
width : 100%;
height : 10%;
float : left;
}
#nav a {
background: url("images/nav.gif") no repeat 0 0;
display : block;
height: 37px;
text-indent: -5555px;
overflow: hidden;
}
#nav li{
float:left;
position: relative;
}
* html #nav li *{
position: relative;
}
#nav li, #nav ul{
margin: 0;
padding: 0;
}
#nav #butt1 a { background-position: 0 0; width: 88px; }
#nav #butt2 a { background-position: -88px 0; width: 102px; }
#nav #butt3 a { background-position: -190px 0; width: 102px; }
#nav #butt1 a:hover { background-position: 0 -37px; width: 88px; }
#nav #butt2 a:hover { background-position: -88px -37px; width: 102px; }
#nav #butt3 a:hover { background-position: -190px -37px; width: 102px; }
body#pageone #nav #butt1 a { background-position: 0 -137px; width: 88px; }
body#pagetwo #nav #butt2 a { background-position: -88px -37px; width: 102px; }
body#pagethree #nav #butt3 a { background-position: -190px -37px; width: 102px; }
#centro {
background-color : white;
width : 100%;
height : 75%;
float : left;
margin : 0;
border-width : 0;
border-width : 0;
}
#footer {
padding: 0.3% 0% 0.25% 0%;
background-color: #3a794e;
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 della barra di navigazione
Rispondi quotando