salve ho realizzato questo sito in html dove vorrei che ogni argomento vada nella sua categoria del menu orizzontale, per chiarivi le idee, vorrei che il testo home vada nella sezione Home del menu tenendo nascosto il testo Programmi e Video , il testo programmi vada nella sezione programmi tenendo nascosto il testo home e video , e il testo video vada nella sezione video tenendo nascosto home e programmi.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Sito</title>
</head>
<body background="http://4.bp.blogspot.com/-g92uZYaOGMU/TlLLQnxRs2I/AAAAAAAADAM/cOQz65EZ-Cw/s1600/Wallpapers-room_com___Closed_Maze_Blue_by_Untergunter_1280x80 0.jpg">
<img src="http://img841.imageshack.us/img841/7396/8vf1.png">
<style type="text/css">
#tabs { font-family: Trebuchet, sans-serif; font-size: 20px; }
#tabs li {
list-style: none;
float: left;
margin-right: 20px;
height: 30px;
margin: 3px;
}
#tabs li a { <!--/menu orizzontale-->
background-color: none;
color: 00FFFF;
font-weight: none;
text-decoration: none;
margin-right: 20px;
height: 1px;
display: block;
float: left;
line-height: 50px; <!--/altezza del menu-->
text-align: left;
}
#tabs li a:hover,
#tabs li a:active { color: #FF0000; } <!--/colore quando si passa col mouse su un testo del menu-->
div.content { <!--/testo-->
color: #000000;
font-family: Source Sans Pro; <!--/tipo di carattere-->
font-size: 15px; <!--/grandezza carattere-->
background-color: none;
padding: 1px; <!--/distanza dal bordo di destra-->
width: 50px; <!--/altezza-->
height: 10px;;
line-height: 190px; <!--/distanza dal menu al testo-->
}
#container { clear: both; height: 400px; overflow: hidden; }
</style>
<ul id="tabs">
<li><a href="#Home">Home</a></li>
<li><a href="#Programmi">Programmi</a></li>
<li><a href="#Video">Video</a></li>
</ul>
<div id="container">
<div class="content">
<a name="Home" id="Home"></a>
<h2>Home</h2>
<div>
<font size="10">We nicoló , ti piace il mio sito???....</font>
<select name="mydropdown">
<option value="si">si</option>
<option value="no">no</option>
</select>
</div>
<div class="content">
<a name="Programmi" id="Programmi"></a>
<h2>Programmi</h2>
<p>Convallis elit tortor ut ante libero Aenean Maecenas semper et interdum. Id lorem id dui orci risus volutpat Curabitur Curabitur a urna. Vivamus sit lorem venenatis Nulla semper justo pretium id tincidunt Vestibulum. Vestibulum justo volutpat non.</p>
</div>
<div class="content">
<a name="Video" id="Video"></a>
<h2>Video</h2>
<p>Urna justo quam nunc urna sem facilisis nibh Curabitur tellus quis. Orci sem ligula platea parturient justo Morbi id cursus tortor adipiscing. Tortor convallis pede orci Quisque id Nam condimentum sed eu Sed. Cum orci Quisque vitae egestas vitae nulla Cum fermentum egestas ante. Congue eu elit.</p>
</div>
</div>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Sito</title>
</head>
<body background="http://4.bp.blogspot.com/-g92uZYaOGMU/TlLLQnxRs2I/AAAAAAAADAM/cOQz65EZ-Cw/s1600/Wallpapers-room_com___Closed_Maze_Blue_by_Untergunter_1280x80 0.jpg">
<img src="http://img841.imageshack.us/img841/7396/8vf1.png">
<style type="text/css">
#tabs { font-family: Trebuchet, sans-serif; font-size: 20px; }
#tabs li {
list-style: none;
float: left;
margin-right: 20px;
height: 30px;
margin: 3px;
}
#tabs li a { <!--/menu orizzontale-->
background-color: none;
color: 00FFFF;
font-weight: none;
text-decoration: none;
margin-right: 20px;
height: 1px;
display: block;
float: left;
line-height: 50px; <!--/altezza del menu-->
text-align: left;
}
#tabs li a:hover,
#tabs li a:active { color: #FF0000; } <!--/colore quando si passa col mouse su un testo del menu-->
div.content { <!--/testo-->
color: #000000;
font-family: Source Sans Pro; <!--/tipo di carattere-->
font-size: 15px; <!--/grandezza carattere-->
background-color: none;
padding: 1px; <!--/distanza dal bordo di destra-->
width: 50px; <!--/altezza-->
height: 10px;;
line-height: 190px; <!--/distanza dal menu al testo-->
}
#container { clear: both; height: 400px; overflow: hidden; }
</style>
<ul id="tabs">
<li><a href="#Home">Home</a></li>
<li><a href="#Programmi">Programmi</a></li>
<li><a href="#Video">Video</a></li>
</ul>
<div id="container">
<div class="content">
<a name="Home" id="Home"></a>
<h2>Home</h2>
<div>
<font size="10">We nicoló , ti piace il mio sito???....</font>
<select name="mydropdown">
<option value="si">si</option>
<option value="no">no</option>
</select>
</div>
<div class="content">
<a name="Programmi" id="Programmi"></a>
<h2>Programmi</h2>
<p>Convallis elit tortor ut ante libero Aenean Maecenas semper et interdum. Id lorem id dui orci risus volutpat Curabitur Curabitur a urna. Vivamus sit lorem venenatis Nulla semper justo pretium id tincidunt Vestibulum. Vestibulum justo volutpat non.</p>
</div>
<div class="content">
<a name="Video" id="Video"></a>
<h2>Video</h2>
<p>Urna justo quam nunc urna sem facilisis nibh Curabitur tellus quis. Orci sem ligula platea parturient justo Morbi id cursus tortor adipiscing. Tortor convallis pede orci Quisque id Nam condimentum sed eu Sed. Cum orci Quisque vitae egestas vitae nulla Cum fermentum egestas ante. Congue eu elit.</p>
</div>
</div>
</html>
Ultima modifica:
