CSS - Problema con pestañas

   
Vista:

Problema con pestañas

Publicado por Johni (1 intervención) el 17/11/2010 20:46:25
Hola tengo un problema cun las pestañas(tags) en css intento que como en el div (contenedor)de las tabs se centre automaticamente sengun este maximizada o si le damos al boton de la ventana minimizar que queden centradas al nuevo tamaño del div he probado con Display:block;Margin:0 auto;pero nada os dejo el codigo con las hojas de estilo CSS a ver si me podeis ayudar.Gracias.

estilos.css

#divprincipal {
width: 100%;
height: 100%;
background-color: #424242;
border-style:double;
color:red;/*nuevo*/

}

#divencabezado{
position:relative;
text-align: center;
padding-top:1px;/*Definimos el tamaño del margen superior de la página respecto al div*/

}
#tabletitulo{
width:98%;
margin: 0 auto;
border-style:none;
text-align:center;

}

#borde{
border-color:#ffccff

}

#fonttitulo{
color:#F5D0A9;
font-size:40pt;
font-style:Times New Roman, sans-serif;
}

#tdtitulo{
height:100px;
line-height:normal;
padding-left:0;
padding-right:0;
padding-top:0;
padding-bottom:0;
border-style:solid;
border-color:red;
border-width:1px;
background-image:url('tejadomod.jpg');
}

pestanas.css

#pestanas {

float:left;
margin:0 auto;
width:100%;
line-height:normal;
font-size: 20pt;
font-weight: bold;
border-style:double;
border-color:red;

}

#pestanas ul {
width:100%;
padding-top:17pt;
display: table;/*Para ajustar las pestañas al centro de la pagina necesitamos el dysplay y el margin*/
margin:0 auto;
list-style:none;
border-style:double;
border-color:green;



}
#pestanas li {
display:block;/*Para ajustar las pestañas al centro de la pagina necesitamos el dysplay y el margin*/
margin:0 auto;
float:left;
padding-bottom:3pt;
background:url("tejadop.gif") no-repeat right top;
border-style:double;
border-color:red;

}
#pestanas a{

background:url("p-izqtejado.gif") no-repeat left top;
padding:3px 10px 3px 10px;
color: #fff;
text-decoration: none;

}


#tabs:hover a,#tabs:focus a {
color:#BDBDBD;
z-index: 4;
font-size:16pt;

}

Codigo HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="STYLESHEET" type="text/css" href="Estilos.css">
<link rel="STYLESHEET" type="text/css" href="Pestanas.css">
<title>Cubiertasl</title>
</head>
<body topmargin=10 >
<div id="Principal">
<div id="Encabezado" style= "position:relative; align: center;">
<table width="98%" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="666666">
<tr>
<td height="100" align="center" background="tejadomod.jpg" >
<font size=14 face='Times New Roman, sans-serif'color="#F5D0A9">Cubiertas</font>
</td>

</tr>
</table>
</div>
<div id="pestanas">
<ul>
<li id="tabs"><a href="#" >Tab1</a></li>
<li id="tabs" class="activa"><a href="#">Pizarra</a></li>
<li id="tabs"><a href="#">Tab2</a></li>
<li id="tabs"><a href="#">Tab3</a></li>
<li id="tabs"><a href="#">Tab4</a></li>
<li id="tabs"><a href="#">Tab5</a></li>
<li id="tabs"><a href="#">Tab6</a></li>
</ul>
</div>
</div> <!-- Cerramos div Principal-->

</body>
</html>





#tabs:hover a,#tabs:focus a {
color:#BDBDBD;
z-index: 4;
font-size:16pt;

}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

RE:Problema con pestañas

Publicado por migarcia (2 intervenciones) el 15/12/2010 11:55:45
No acabo de entender porque utilizas position:relative, por lo que veo, todo esta en sitios fijos, si te ahorras esto, mejorara la claridad del codigo, y puede que algun problema
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar