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%;
}