Hola, estoy haciendo una web que quiero que tenga pestañas (tabs) que se posicionene dinamicamente según la longitud del contenido de estas (cuanto más largo es el texto más larga se hace la pestaña) haciendo que si no cabe en el trozo que queda del recuadro pase a la siguiente línea sin entrecortarse. Mi problema es que para que fuese esteticamente bonito he dividido cada pestaña en 3 imágenes de fondo (la izquierda y la derecha para redondear las esquinas y la central para poner el texto), en principio casi siempre va bien pero hay casos puntuales que cuando el texto (la parte central de la pestaña) si que cabe en el trozo de línea restante envia la imagen derecha a la siguiente línea (digamos que lo que os he comentado antes de que si no cabe en una linea pasa a la siguiente funciona bien pero solo con el texto, ya que hay veces que me tira la imagen de la derecha a la siguiente línea y por tanto no funcionan las tres partes como un bloque). No se si me he explicado bien porque es un tema un tanto abstracto, si alguien me puede ayudar se lo agradecería. Os paso el código que tengo referente a las pestañas para que le echeis un vistazo. Para que os hagais una idea estas pestañas van encima de un recuadro y la longitud de las líneas es precisamente la longitud del recuadro. Muchas gracias por adelantado:
#tabs{
overflow:hidden;
height: 100%;
}
#TabUnselected{
float:left;
/*overflow:hidden;*/
text-align:center;
padding-bottom: 999em;
margin-bottom: -999em;
}
#TabSelected{
float:left;
/* overflow:hidden; */
text-align:center;
padding-bottom: 999em;
margin-bottom: -999em;
}
#TabUnselectedLeft{
float:left;
background: url('/borderLeftTabAuxTunned.gif') no-repeat left top;
padding-bottom: 999em;
margin-bottom: -999em;
}
#TabUnselectedRight{
float:left;
background: url('/borderRightTabAuxTunned.gif') no-repeat right top;
padding-bottom: 999em;
margin-bottom: -999em;
}
#TabUnselectedCentral{
display:block;
background: url('/borderCentralTabAuxTunned.gif') no-repeat left top;
float:left;
text-align:center;
font-weight:bold;
padding-bottom: 999em;
margin-bottom: -999em;
}
#TabSelectedCentral{ /*currently selected tab*/
background: url('/borderCentralTabTunned.gif') no-repeat left top;
float:left;
font-weight:bold;
padding-bottom: 999em;
margin-bottom: -999em;
}
#TabSelectedLeft{
float:left;
background: url('/borderLeftTabTunned.gif') no-repeat left top;
padding-bottom: 999em;
margin-bottom: -999em;
}
#TabSelectedRight{
float:left;
background: url('/borderRightTabTunned.gif') no-repeat right top;
padding-bottom: 999em;
margin-bottom: -999em;
}
/*End of the new version of Tabs*/
