Yo quiero hacer un menú con pestaña en la cual la primera llama a la indicada
wrox, la segunda llama a la amazon y así sucesivamente
Código HTML:
<body id='wrox'>
<ul id='pestanas'>
<li id='pestana1'><a href='wrox.html'><span>Wrox P2P</span></a></li>
<li id='pestana2'><a href='amazon.html'><span>Amazon</span></a></li>
<li id='pestana3'><a href='google.html'><span>Google</span></a></li>
<li id='pestana4'><a href='slashdot.html'><span>Slashdot</span></a></li>
<li id='pestana5'><a href='twit.html'><span>This Week in Tech</span></a></li>
</ul>
<div id='iframe'>
<iframe src='http://p2p.wrox.com' frameborder='0' marginheight='0' marginwidth='0'></iframe>
</div>
</body> Código HTML:
<body id='amazon'>
<ul id='pestanas'>
<li id='pestana1'><a href='wrox.html'><span>Wrox P2P</span></a></li>
<li id='pestana2'><a href='amazon.html'><span>Amazon</span></a></li>
<li id='pestana3'><a href='google.html'><span>Google</span></a></li>
<li id='pestana4'><a href='slashdot.html'><span>Slashdot</span></a></li>
<li id='pestana5'><a href='twit.html'><span>This Week in Tech</span></a></li>
</ul>
<div id='iframe'>
<iframe src='http://www.amazon.com' frameborder='0' marginheight='0' marginwidth='0'></iframe>
</div>
</body> Entonces, el css sería este
Código HTML:
body, html {
margin: 0;
padding: 0;
}
ul#pestanas {
list-style: none;
margin: 0;
padding: 10px 0 0 0;
height: 25px;
border-bottom: 1px solid black;
background: rgb(222, 222, 222);
}
ul#pestanas li {
float: left;
margin: 0 5px;
height: 23px;
text-align: center;
position: relative;
width: 150px;
border: 1px solid black;
top: 1px;
background: rgb(128, 128, 128);
}
ul#pestanas li:hover {
border-bottom: 1px solid white;
background: white;
}
ul#pestanas a {
display: block;
height: 100%;
text-decoration: none;
color: white;
font: 14px Arial, sans-serif;
}
body#wrox li#pestana1,
body#amazon li#pestana2,
body#google li#pestana3,
body#slashdot li#pestana4,
body#twit li#pestana5 {
background: white;
border-bottom: 1px solid white;
}
ul#pestanas a:hover,
body#wrox li#pestana1 a,
body#amazon li#pestana2 a,
body#google li#pestana3 a,
body#slashdot li#pestana4 a,
body#twit li#pestana5 a {
color: black;
}
ul#pestanas span {
display: block;
padding: 4px 10px 0 10px;
}
div#iframe {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin-top: 50px;
border-top: 1px solid black;
}
iframe {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
}
Yo digo que de esta forma hay mucho mas cogido que si pusiera
#menu ul pero realmente yo estoy aun un poco nuevo en css como para entender ciertas cosas... claro, e aprendido pero yo no soy una persona autodidacta lol