Foros del Web » Creando para Internet » CSS »

Problema urgente de Tabs (pestañas) en CSS

Estas en el tema de Problema urgente de Tabs (pestañas) en CSS en el foro de CSS en Foros del Web. Hola, soy novato en esto y me ha surgido una duda referente a las pestañas con CSS. He logrado hacerlas más o menos aceptables pero ...
  #1 (permalink)  
Antiguo 22/01/2007, 05:10
 
Fecha de Ingreso: enero-2007
Mensajes: 55
Antigüedad: 10 años, 10 meses
Puntos: 1
Problema urgente de Tabs (pestañas) en CSS

Hola, soy novato en esto y me ha surgido una duda referente a las pestañas con CSS. He logrado hacerlas más o menos aceptables pero me he dado cuenta que cuando por ejemplo tengo una pestaña con más texto que las demás solo se hace más grande esta y no las demás (por lo que esteticamente queda muy mal). Mi idea es que si por ejemplo tengo 5 tabs y una de ellas tiene mucho texto y por ello necesita ser más larga que las demás también lo sean. Os cuelgo el código para que lo veais (no es el código esacto que voy a utílizar después, os paso una versión para que os deis cuenta de mi problema). He marcado cada fondo de pestaña con un color y podreis ver que la pestaña con color rosa es más grande que las demás y se hace más larga, pero las demás del otro color se quedan con el mismo tamaño ( y es eso precisamente lo que quiero evitar), lo que quiero es que si una crece las demás crezcan y se centre su contenido en una pestaña más grande si el texto es breve (para que quede mejor esteticamente). Muchas gracias por anticipado y espero que me podais ayudar. Merci de nuevo

Os paso el código (la primera parte es el htm y la segunda el .css):


<!-- Mirrored from alistapart.com/d/slidingdoors/v1/ex4.html by HTTrack Website Copier/3.x [XR&CO'2003], Thu, 17 Feb 2005 10:54:21 GMT -->
<head>
<title>Ejemplo 1: Sliding Doors of CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="STYLESHEET" type="text/css" href="estilos4.css">
</head>

<body>

<div id="pestanas">
<div width="100" id="pestanya1">Home</div>
<div width="100" id="pestanya2">News</div>
<div width="100" id="pestanyaSel2">Products</div>
<div width="100" id="pestanya4">News</div>
<div width="100" id="pestanya3">About asdfasdf l asjksdflñasj flñdkasjflkdas flasdjñljk</div>
</div>

</body>

</html>

------------------------

#body {
background:#fff;
margin:0;
padding:0;
color:#000;
font:x-small/1.5em Georgia,Serif;
voice-family: "\"}\""; voice-family:inherit;
font-size:small;
}


#pestanya1{
background:red;
float:left;
width:20%;
font-weight:bold;
vertical-align: middle;

}

#pestanya2{
background:green;
float:left;
width:20%;
font-weight:bold;
vertical-align: middle;
}


#pestanya3{
display:block;
width:.1em;
font-weight:bold;
background:pink;
float:right;
width:20%;
vertical-align: middle;
}

#pestanya4{
font-weight:bold;
background:yellow;
float:right;
width:20%;
vertical-align: middle;
}


#pestanyaSel2{
background:blue;
float:left;
width:20%;
vertical-align: middle;
}


#pestanas{
overflow:auto;
border: 1px solid;
}

#contenidoCentral{
border-bottom: 1px black solid;
border-left: 1px black solid;
border-right: 1px black solid;
width:94.7%;
}
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:48.