Foros del Web » Creando para Internet » CSS »

problema con centrado de div

Estas en el tema de problema con centrado de div en el foro de CSS en Foros del Web. Hola a todos, ando pausado totalmente con este lío que tengo :s.. les muestro el código: Código: .versus { background: #FFF; width: 30%; font-size: 45px; ...
  #1 (permalink)  
Antiguo 17/06/2008, 17:10
Avatar de yrduk  
Fecha de Ingreso: enero-2007
Ubicación: Caracas, Venezuela
Mensajes: 277
Antigüedad: 10 años, 11 meses
Puntos: 3
problema con centrado de div

Hola a todos, ando pausado totalmente con este lío que tengo :s.. les muestro el código:

Código:
.versus { 
background: #FFF;
width: 30%;
font-size: 45px;
text-align: center;
margin: auto;
position: relative;
}
y el HTML:

Código HTML:
<div class="versus">
<div style="width: 612px; position: relative; text-align: center">
aqui el contenido...
</div></div> 

En IE sale bien, pero en firefox hay un espacio mayor entre el div izquierdo y el central, que con el derecho.. debería de tener el mismo espacio entre el div izquierdo y el div derecho, ya que según, está centrado.

Aquí les dejo el html y el css del div izquierdo y derecho respectivamente:

Div izquierdo

Código:
.box_register {
width: 250px;
float: left;
position: relative;
margin-top: 16px;
margin-left: 12px;
border:2px solid #FADDA9;
background-color:#FDF4E1;
}
Código PHP:
<div class="box_register">contenido aqui
&nbsp;</div
Div derecho:

Código:
.box_ads {
width: 160px;
height: 300px;
float: right;
position: relative;
margin-right: 10px;
border:2px solid #FADDA9;
background-color:#FDF4E1;
}
Código PHP:
<div class="box_ads">contenido</div
Y todo el código html está así:

Código HTML:
<div class="box_register">div izquierdo</div>
<br>
<div class="box_ads">div derecho</div>

	<div class="versus">
<div style="width: 612px; position: relative; text-align: center">contenido "central"  (no totalmente :S)</div>

</div> 
Espero que me puedan ayudar

Saludos!
__________________
Twitter/kudry
mkd.la - blog
  #2 (permalink)  
Antiguo 17/06/2008, 17:19
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: problema con centrado de div

Añade esto a tu selector .versus, y verás lo que ocurre:

border: solid #f00;

Mikel.
  #3 (permalink)  
Antiguo 17/06/2008, 17:23
Avatar de yrduk  
Fecha de Ingreso: enero-2007
Ubicación: Caracas, Venezuela
Mensajes: 277
Antigüedad: 10 años, 11 meses
Puntos: 3
Respuesta: problema con centrado de div

Hola Mikmoro, gracias por tu respuesta, veo que la tabla del versus es mayor que el div versus...
__________________
Twitter/kudry
mkd.la - blog
  #4 (permalink)  
Antiguo 17/06/2008, 17:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: problema con centrado de div

Y sobre todo, que en FF la caja versus sí que está centrada en la página, pero su contenido sale fuera, mientras que en IE es más ancha y se salta a la línea siguiente de la caja de la izquierda (al menos en 1024).

Mikel.
  #5 (permalink)  
Antiguo 17/06/2008, 17:46
Avatar de yrduk  
Fecha de Ingreso: enero-2007
Ubicación: Caracas, Venezuela
Mensajes: 277
Antigüedad: 10 años, 11 meses
Puntos: 3
Respuesta: problema con centrado de div

Gracias por tu ayuda Mikmoro, pero terminé usando una tabla, y adentro de unas celdas metí los divs, así no me hago rollos...

Saludos!
__________________
Twitter/kudry
mkd.la - blog
  #6 (permalink)  
Antiguo 17/06/2008, 17:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: problema con centrado de div

No sé si lo que estás buscando es algo así. Por si acaso te lo pongo:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
}
.box_ads {
width: 160px;
height: 300px;
float: right;
position: relative;
margin-right: 10px;
border:2px solid #FADDA9;
background-color:#FDF4E1;
}
.box_register {
width: 250px;
float: left;
position: relative;
margin-top: 16px;
margin-left: 12px;
border:2px solid #FADDA9;
background-color:#FDF4E1;
}
.versus {
background: #FFF;
font-size: 45px;
text-align: center;
margin: auto;
position: relative;
margin: 0px 180px 0px 270px;
border: solid 1px #f00;
}
</style>
</head>
<body>
<div class="box_ads">div derecho</div>
<div class="box_register">div izquierdo</div>
<div class="versus">contenido "central" (no totalmente :S)</div>
</body>
</html>
Copia y pega y pruébalo.

Te dejo el borde del central para que lo veas.

Mikel.
  #7 (permalink)  
Antiguo 17/06/2008, 17:53
Avatar de yrduk  
Fecha de Ingreso: enero-2007
Ubicación: Caracas, Venezuela
Mensajes: 277
Antigüedad: 10 años, 11 meses
Puntos: 3
Respuesta: problema con centrado de div

Cita:
Iniciado por Mikmoro Ver Mensaje
No sé si lo que estás buscando es algo así. Por si acaso te lo pongo:



Copia y pega y pruébalo.

Te dejo el borde del central para que lo veas.

Mikel.
Si, es algo asi, pero lo terminé haciendo con tablas, y ha funcionado :)

Gracias de todas maneras! Saludos.
__________________
Twitter/kudry
mkd.la - blog
  #8 (permalink)  
Antiguo 17/06/2008, 17:55
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: problema con centrado de div

Bueno, pues lo siento.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:25.