Hola a todos.
Tengo varias dudas... quiero crear una caja con pestañas de menú en la parte superior, de manera que los bordes de esa caja se readapten según el contenido de las pestañas. Las pestañas las he creado con el modelo de pestañas deslizantes, y no hay problema. El lío viene cuando quiero que la caja que va debajo de las pestañas tenga exactamente el mismo tamaño que ellas, y que funcionen readaptándose ambas al texto del menú de las pestañas deslizantes. Espero haberme explicado bien...
Este es el código:
Código HTML:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="pestanas_readap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="contenedor">
<div class="caja">
<div class="pestanas">
<ul>
<li>
<a href="#"> <span> Noticias </span></a>
</li>
<li>
<a href="#"> <span> Blogs </span> </a>
</li>
<li>
<a href="#"> <span> Actualidad </span> </a>
</li>
<li>
<a href="#"> <span> Enlaces</span> </a>
</li>
<li>
<a href="#"> <span> Noticias</span> </a>
</li>
</ul>
<div class="menu">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis mi rutrum turpis bibendum feugiat. Integer eu blandit risus. Vestibulum nec justo rutrum ligula interdum egestas id in ante. Sed molestie, turpis vehicula iaculis varius, justo dui pharetra ipsum, vel cursus felis urna quis metus. Mauris porta pretium lacus sed semper. Etiam tempus rutrum nisl, et luctus felis consectetur ac. Maecenas sed vulputate augue. Morbi sollicitudin metus vitae nisl bibendum fermentum. Proin malesuada sem sed arcu semper venenatis condimentum vel velit. Morbi fringilla aliquet viverra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ante elit, aliquet quis imperdiet non, ultricies at nisi.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
y los estilos, algunos de los cuales no he dado aún porque no sé si harán falta o no...
Cita: @charset "UTF-8";
/* CSS Document */
ul {
margin: 0px;
padding: 0px;
}
.contenedor {
}
.caja {
}
.menu {
float: left;
clear: both;
height: 500px;
width: 100%;
position: relative;
overflow: hidden;
border: 1px solid red;
border-top: none;
}
.pestanas {
position: relative;
}
.pestanas ul li {
list-style: none;
float: left;
}
.pestanas ul li a {
display: block;
background: url(img/pestana_izda.png) left top no-repeat;
color: blue;
text-decoration: none;
}
.pestanas ul li a:hover {
display: block;
background: url(img/pestana_izda_hover.png) left top no-repeat;
text-decoration: none;
color: white;
}
.pestanas ul li a span {
display: block;
background: url(img/pestana_dcha.png) right top no-repeat;
background-repeat: no-repeat;
margin-left: 20px;
padding-right: 14px;
padding-bottom: 4px;
padding-top: 8px;
}
.pestanas ul li a:hover span {
display: block;
background: url(img/pestana_dcha-hover.png) right top no-repeat;
background-repeat: no-repeat;
margin-left: 20px;
padding-right: 14px;
padding-bottom: 4px;
padding-top: 8px;
color: white;
}
Muchas gracias por adelantado!