pestañas en caja readaptable

guiovaldes · #1 (**permalink**) 13/09/2011, 03:25

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!

sauljps · #2 (**permalink**) 13/09/2011, 10:10

Oye no entendi nada de la explicacion jajajaa

Si puedes ponerme un ejemplo visual o explicarlo de nuevo seguro te podre ayudar

guiovaldes · #3 (**permalink**) 13/09/2011, 15:57

Hmmm. Lo que quiero hacer es una caja cuya borde superior sea un menú con pestañas deslizantes. Según el texto de las pestañas, éstas se readaptarán en tamaño, y lo que quiero y no consigo es que el ancho de la caja (que está bajo las pestañas ) se readapte al tamaño de todo el menú de pestañas.... creo que queda más claro si pongo una imagen, pero no sé cómo insertarla.

guiovaldes · #4 (**permalink**) 13/09/2011, 16:06

Bufff, es que veo que posiblemente nadie lo entienda tampoco así.... Pongamos que quiero crear una caja cuyo ancho sea el mismo que el de una lista de menús superior. (que es la lista de las pestañas)

Mejor?

sauljps · #5 (**permalink**) 14/09/2011, 08:35

Aja CREO que lo entendí, quieres que cuando el tamaño de la caja aumente o disminuya las pestañas lo hagan en proporcion no?

Si es así, es bastante sencillo

Pones que el ancho de la caja sea 100% que veo que si lo pones y a cada LI le pones un porcentaje, por ejemplo si son 5 le pones a cada uno 20% y listo, se mueven todos en proporcion a la caja

guiovaldes · #6 (**permalink**) 14/09/2011, 09:07

Bueno, es justo lo contrario XD, que el ancho de la caja aumente en proporción a el conjunto de todas las pestañas (osea, todo el <ul>) . La razón es porque las pestañas pueden llevar más o menos texto, y el ancho de cada una varía en función de ese texto, así que no son todas iguales. Por supuesto, las pestañas van en horizontal, una tras de otra.

Vaya, y yo pensaba que iba a ser fácil de explicar XD. Perdón por las molestias.