[SOLUCIONADO] estilo css se queda en la izquierda no ...

santi2892009 · #1 (**permalink**) 28/12/2013, 09:34

Ola os comento tengo un menu con pestallas el cual funciona pero se queda en la parte izquierda de la pantalla como se hace para que se ponga en el centro,y q nosea con position... os deje el css a ver si m podeis dexir q debo poner para q todo el contenido se ponga centrado,(seguro q es un tonteria):

Código CSS:

Ver original.tab a{ 
display:block; 
float:left; 
width:100px; 
height:30px;
 text-align:center; 
border:1px solid #666;} 
.clear{ 
clear:both;} 
#primero{ background-color:red; width:350px; height:300px;}
 #segundo{ background-color:green; width:350px; height:300px;} 
#tercero{ background-color:blue; width:350px; height:300px;}

JustinKO · #2 (**permalink**) 28/12/2013, 11:21

se te van a la izquierda porque las estás flotando todas en esa dirección.

lo que debes de hacer es contenerlas en algún otro elemento y centrar ese elemento con márgenes automáticos. Por ejemplo si las tienes dentro de un div con id="menú" sería:

Código:

#menu{
margin-left: auto;
margin-right: auto;
};

saludos

santi2892009 · #3 (**permalink**) 28/12/2013, 11:45

Eso es lo q tengoq tendria q ponerlo al body???:

<body>
<div class="tabs">
<a href="">primero</a>
<a href="">segundo</a>
<a href="">tercero</a>
<div class="clear"</div>
</div>
<div class="contenedor"

<div id="primero"></div>
<div id="segundo"></div>
<div id="tercero"></div>
</div>
</body>

JustinKO · #4 (**permalink**) 28/12/2013, 12:20

No entiendo qué es lo que quieres hacer con los divs #primero, #segundo y #tercero

para centrar el menú del código que has puesto. El html:

Código:

<div id="contenedor">
  <div class="tabs">
    <a href="">primero</a>
    <a href="">segundo</a>
    <a href="">tercero</a>
    <!--<div class="clear"></div>-->
  </div>
</div>

y el css:

Código:

#contenedor{	
	width:100%;
}
.tabs{
	margin-right:auto;
	margin-left:auto;
	width: 606px;/*el ancho es por 200px que le das a la pestaña más 1 pixel de cada borde multiplicado por tres*/

}

a{ 
display:block; 
float:left; 
width:200px; 
height:30px;
text-align:center; 
border:1px solid #666;} 
.clear{ 
clear:both;}

Para que funcione, tienes que darle ancho tanto al div que vas a centrar como al que lo contiene.

santi2892009 · #5 (**permalink**) 28/12/2013, 12:20

Poniendo lo q tu me dijiste :
.tab{
margin-left:120px;
margin-right:120px
}
.contenedor{
margin-left:120px;
margin-right:120px;
}

Muchisimas graciass

JustinKO · #6 (**permalink**) 28/12/2013, 12:23

Hazlo mejor como te he puesto. El margin-left:auto margin-right:auto está para eso.

Obviamente, el div ese comentado se me ha olvidado borrarlo, no se lo metas