Ciao ragazzi,
c'è qualcuno che potrebbe aiutarmi a a dissipare un dubbio? Vorrei cambiare la barra di navigazione realizzata usando javascript con una basata su i css. Primo si può fare, facendo in modo che ogni voce della barra sia associata ad una immagine diversa? Ho trovato questo codice che ho in parte adattato ma mi sono fermato qui...sapete dirmi come fare...mille grazie in anticipo. ciao
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Barra di navigazione a 3 stati con immagini</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
font-family: Verdana, sans-serif;
background-color:#e5e5e5;
text-align:center;
}
h1{color:#333; font:1.2em Verdana,sans-serif;}
div#barranav{
width:85%;
margin-top:70px auto;
/*border:1px solid #000;*/
padding-top:0;
height:70px;
}
div#barranav ul{
list-style-type:none;
margin:0;
padding:0;
}
div#barranav li{
float:left;
margin:0 2px 0 0;
padding:0;
}
div#barranav a{
display:block;
width:91px;
height:70px;
line-height:35px;
text-decoration:none;
background:url("img/home.jpg") no-repeat top center;
color:#fff;
font-variant:small-caps;
font-size:.8em;
font-weight:bold;
}
div#barranav a:hover{
background: url("img/home_on.jpg") no-repeat top center;
color:#336;
}
div#barranav li#active{
width:91px;
height:70px;
line-height:35px;
background:url("img/home_on.jpg") no-repeat top center;
color: #fff;
text-indent:11px;
font-size:.8em;
font-weight:bold;
font-variant:small-caps;
}
</style>
</head>
<body>
<h1>Barra di navigazione con CSS e immagini </h1>
<div id="barranav">
<ul>
<li id="active">Home</li>
<li><a href="pag_asp.htm">ASP</a></li>
<li><a href="pag_js.htm">Javascript</a></li>
<li><a href="pag_css.htm">CSS</a></li>
<li><a href="pag_xml.htm">Corso XML</a></li>
<li><a href="pag_guest.htm">GuestBook</a></li>
</ul>
</div>
<h1>Questa è la Home Page</h1>
</body>
</html>
c'è qualcuno che potrebbe aiutarmi a a dissipare un dubbio? Vorrei cambiare la barra di navigazione realizzata usando javascript con una basata su i css. Primo si può fare, facendo in modo che ogni voce della barra sia associata ad una immagine diversa? Ho trovato questo codice che ho in parte adattato ma mi sono fermato qui...sapete dirmi come fare...mille grazie in anticipo. ciao
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Barra di navigazione a 3 stati con immagini</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
font-family: Verdana, sans-serif;
background-color:#e5e5e5;
text-align:center;
}
h1{color:#333; font:1.2em Verdana,sans-serif;}
div#barranav{
width:85%;
margin-top:70px auto;
/*border:1px solid #000;*/
padding-top:0;
height:70px;
}
div#barranav ul{
list-style-type:none;
margin:0;
padding:0;
}
div#barranav li{
float:left;
margin:0 2px 0 0;
padding:0;
}
div#barranav a{
display:block;
width:91px;
height:70px;
line-height:35px;
text-decoration:none;
background:url("img/home.jpg") no-repeat top center;
color:#fff;
font-variant:small-caps;
font-size:.8em;
font-weight:bold;
}
div#barranav a:hover{
background: url("img/home_on.jpg") no-repeat top center;
color:#336;
}
div#barranav li#active{
width:91px;
height:70px;
line-height:35px;
background:url("img/home_on.jpg") no-repeat top center;
color: #fff;
text-indent:11px;
font-size:.8em;
font-weight:bold;
font-variant:small-caps;
}
</style>
</head>
<body>
<h1>Barra di navigazione con CSS e immagini </h1>
<div id="barranav">
<ul>
<li id="active">Home</li>
<li><a href="pag_asp.htm">ASP</a></li>
<li><a href="pag_js.htm">Javascript</a></li>
<li><a href="pag_css.htm">CSS</a></li>
<li><a href="pag_xml.htm">Corso XML</a></li>
<li><a href="pag_guest.htm">GuestBook</a></li>
</ul>
</div>
<h1>Questa è la Home Page</h1>
</body>
</html>
