Foros del Web » Creando para Internet » CSS »

Alineación de DIVs

Estas en el tema de Alineación de DIVs en el foro de CSS en Foros del Web. Buenos días, justo he empezado a migrar des de las TBALAS a las CSSmediantes las dos partes de "migración sin dolor". Mi problema reside en ...
  #1 (permalink)  
Antiguo 03/02/2009, 04:18
 
Fecha de Ingreso: febrero-2009
Mensajes: 11
Antigüedad: 15 años, 1 mes
Puntos: 0
Pregunta Alineación de DIVs

Buenos días, justo he empezado a migrar des de las TBALAS a las CSSmediantes las dos partes de "migración sin dolor". Mi problema reside en como alinear DIVs que se encuentren dentro de otro DIV. Concretamente tengo:


Código HTML:
<div class="subcontainer2">
            <div id="v" class="buttonClicked" onmouseover="function1('v')" onmouseout="function2('v')"
                onclick="function3('v')">
                <img id="imgV" src="Resources/imgs/vertical.png" height="100" />
                <div>
                    <label>
                        <strong>Vertical</strong></label></div>
            </div>
            <div id="h" class="buttonNormal" onmouseover="function1('h')" onmouseout="function2('h')"
                onclick="function3('h')">
                <img id="imgH" src="Resources/imgs/horitzontal.png" height="100" />
                <div>
                    <label>
                        <strong>Horizontal</strong></label></div>
            </div>
        </div> 
Que esta dentro de otro DIV que contiene otros 2 como este. El codio CSS que uso es:

Código:
.subcontainer2
{
    width: 500px;
    height: 190px;
    
    margin-top: 5px;
    margin-bottom: 5px;
    
    text-align:center;
    position:relative;
    
    border:1px solid #000;
    background-color:White;
    font-family:Arial;
    font-size:small;
    color:Black;
    text-align:center;
}

.buttonNormal
{
    float:left;
    
	width:110px;
	height:125px;
	
	border:1px solid #000;
	background-color:#E2EBED;
	font-family:Arial;
	font-size:small;
	color:Gray;
	text-align:center;
	
	margin: 20px;
}

.buttonOver
{
    float:left;
    
	width:110px;
	height:125px;
	
	border:1px solid #000;
	background-color:#0066CC;
	font-family:Arial;
	font-size:small;
	color:#DDDDDD;
	text-align:center;
	
	margin: 20px;
}

.buttonClicked
{
    float:left;
    
	width:110px;
	height:125px;
	
	border:1px solid #000;
	background-color:#FF6633;
	font-family:Arial;
	font-size:small;
	color:#DDDDDD;
	text-align:center;
	
	margin: 20px;
}
Mi pregunta es: ¿Como puedo alinear esas dos DIV que se encuentran dentro de "subcontainer2" al centro de la división? Ya que tal y como lo tengo queda a la izquierda.

Muhisimas gracias de antemano.
  #2 (permalink)  
Antiguo 03/02/2009, 08:28
 
Fecha de Ingreso: enero-2008
Mensajes: 133
Antigüedad: 16 años, 2 meses
Puntos: 1
Respuesta: Alineación de DIVs

<div class="subcontainer2" align="center">
  #3 (permalink)  
Antiguo 03/02/2009, 08:40
 
Fecha de Ingreso: septiembre-2008
Ubicación: Nuñez, Capital Federal
Mensajes: 423
Antigüedad: 15 años, 6 meses
Puntos: 1
Respuesta: Alineación de DIVs

fijate que en el primero pusiste dos veces text-align.. quizas eso hace que no se centre.. pero no hace falta poner align=Center en el html.. teoricamente, con eso, se centra.. igual, fijate que no ocupe todo el ancho del div.. proba poniendo un solo div dentro del contenedor a ver si te lo centra, y si lo hace, pone los otros...

si no funciona, entonces... prueba con el contenedor, ponerlo
margin:0 auto.. esto teoricamente tambien lo centra...

un saludo!

pablo
  #4 (permalink)  
Antiguo 03/02/2009, 08:40
 
Fecha de Ingreso: septiembre-2008
Ubicación: Nuñez, Capital Federal
Mensajes: 423
Antigüedad: 15 años, 6 meses
Puntos: 1
Respuesta: Alineación de DIVs

bueno.. viendo el codigo.. en tu caso seria
margin:5px auto;

un saludo.
  #5 (permalink)  
Antiguo 03/02/2009, 12:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Alineación de DIVs

Yo diría que si deben mantener la distancia entre ellas, una manera de hacerlo sería añadir una caja que sirva para centrar:
Cita:
<div class="subcontainer2">
<div class="centrador">
<div id="v" class="buttonClicked" onmouseover="function1('v')" onmouseout="function2('v')"
onclick="function3('v')">
<img id="imgV" src="Resources/imgs/vertical.png" height="100" />
<div>
<label>
<strong>Vertical</strong></label></div>
</div>
<div id="h" class="buttonNormal" onmouseover="function1('h')" onmouseout="function2('h')"
onclick="function3('h')">
<img id="imgH" src="Resources/imgs/horitzontal.png" height="100" />
<div>
<label>
<strong>Horizontal</strong></label></div>
</div>
</div>
</div>
y en la CSS hacer estos cambios:
Cita:
.buttonNormal{float:left;
width:110px;
height:125px;
border:1px solid #000;
background-color:#E2EBED;
font-family:Arial;
font-size:small;
color:Gray;
text-align:center;
margin: 20px 0 20px 40px;
}
.buttonClicked{float:left;
width:110px;
height:125px;
border:1px solid #000;
background-color:#FF6633;
font-family:Arial;
font-size:small;
color:#DDDDDD;
text-align:center;
margin: 20px 0 0;
}
.centrador {width: 264px;
margin: 0 auto;

}
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 04/02/2009, 16:31
 
Fecha de Ingreso: febrero-2009
Mensajes: 11
Antigüedad: 15 años, 1 mes
Puntos: 0
Respuesta: Alineación de DIVs

Antes que nada, gracias por la velocidad con la que me habéis contestado y disculpas por la mía.

He probado lo que me habéis dicho, he borrado la duplicidad del "text-align" sin buen resultado y tampoco ha funcionado el añadir un "centrador". Me he asegurado que las dos DIV's contenidas no superen el tamaño del subcontenedor...

Antes de proseguir quisiera hacerles una pregunta:

Lo que yo estoy diseñando no es, del todo, una web; sino una interfaz web para un programa desarrollado en ASP.net, entonces ¿Sigue siendo tan necesario el seguir el "estándar CSS" y no usar el "HTML + tablas" de toda la vida?

Gracias por todo, un saludo!
  #7 (permalink)  
Antiguo 04/02/2009, 17:26
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Alineación de DIVs

¿Estás seguro de que "no ha funcionado" el centrador?

http://www.araudi.net/forosdelweb/centrador.html
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 05/02/2009, 16:12
 
Fecha de Ingreso: febrero-2009
Mensajes: 11
Antigüedad: 15 años, 1 mes
Puntos: 0
Respuesta: Alineación de DIVs

Bien... algo he conseguido... solo que ahora, en vez de estar de lado, uno me los pone en columna... :-O
  #9 (permalink)  
Antiguo 05/02/2009, 16:15
 
Fecha de Ingreso: febrero-2009
Mensajes: 11
Antigüedad: 15 años, 1 mes
Puntos: 0
Respuesta: Alineación de DIVs

arreglado! un problema de tamaños!


muchísimas gracias!
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 08:15.