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