Foros del Web » Creando para Internet » CSS »

Alineación de elementos en un div.

Estas en el tema de Alineación de elementos en un div. en el foro de CSS en Foros del Web. Saludo a tod@s... Tengo un div que contiene dos elementos, un texto y una imagen... el texto debe quedar alineado a la izquierda... y la ...
  #1 (permalink)  
Antiguo 01/06/2009, 10:10
Avatar de Salome  
Fecha de Ingreso: noviembre-2002
Ubicación: Colombia
Mensajes: 1.032
Antigüedad: 21 años, 4 meses
Puntos: 1
Alineación de elementos en un div.

Saludo a tod@s...

Tengo un div que contiene dos elementos, un texto y una imagen... el texto debe quedar alineado a la izquierda... y la imágen a la derecha... he maquetado poco con div, por no decir nada y no logro entender que pasa... pues ya tengo alienado el texto a la izquierda y la imagen a la derecha, pero la imagen me queda como un renglon abajo del texto y no al mismo nivel.... así tengo los css:

Código HTML:
/*este es el estilo para el texto*/
 li{
		font: normal 11px "trebuchet MS";
		list-style-type:none;
		cursor:default;
		border:1px solid #FFFFFF;
		background-color:#FFFFFF;
	        margin-top:3px;
		text-align: left;

	}

/*éste es para la imagen*/

	.alineacionimg{
		float: right;
		clear: right;		
	}
alineacionimg{...} ésta en un div dentro del li.... cómo puedo hacer para que la imagen aparezca en el top? sin tener que mover el resto que está bien, es sólo la imagen que no quiere subir....

Así se ve el resultado que ahora tengo...



saludos...

Última edición por Salome; 01/06/2009 a las 16:02
  #2 (permalink)  
Antiguo 01/06/2009, 10:13
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 elementos en un div.

Prueba a ponerla antes del texto en el HTML, es decir, primero la < img src="...., y luego el texto <p>bla bla bla...
  #3 (permalink)  
Antiguo 01/06/2009, 10:16
Avatar de Salome  
Fecha de Ingreso: noviembre-2002
Ubicación: Colombia
Mensajes: 1.032
Antigüedad: 21 años, 4 meses
Puntos: 1
Respuesta: Alineación de elementos en un div.

Antes del texto?, pero es que debe verse así el texto a la izquierda y la imagen a la derecha... el orden no me puede cambiar... mmmm pero ok, probaré, el asunto es que ésto ya está programado con java, asi que no puedo perder la lógica del negocio... y menos aún la programación... pruebo y te cuento.. gracias
  #4 (permalink)  
Antiguo 01/06/2009, 10:25
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 elementos en un div.

No vas a perder ninguna de las dos cosas. Tu has puesto seguramente dentro de una caja el texto y la imagen. Bien, pues debido al float right de la imagen, como te apunto, si colocas primero la imagen y luego el bloque de texto deberías conseguir exactamente lo que buscas, es decir, la imagen arriba del todo y a la derecha, y el texto a su izquierda, a tanta diferencia de altura como margen superior asignes al bloque de texto (o tenga por defecto si no lo eliminas).

Bueno, ya dirás. Si no es lo que buscas, pon el código generado en el navegador y lo vemos.
  #5 (permalink)  
Antiguo 01/06/2009, 10:32
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 elementos en un div.

Mira, antes de que toques la programación, por si algo no fuera bien, pruébalo con un simple ejemplo en HTML:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-es" lang="es-es">
<head>
<style type="text/css">
.caja {width: 300px; border: 1px solid #f00;padding: 10px;}
.caja img {float: right;}
.caja p {margin: 0; padding: 0 10px;}
</style>
</head>
<body>
<div class="caja">
<img src="img/1.jpg" />
<p>Esto es un texto de prueba para comprobar si se coloca correctamente en la parte superior, y permite al mismo tiempo que la imagen esté arriba del todo.</p>
</div>
</body>
</html>
  #6 (permalink)  
Antiguo 01/06/2009, 10:53
Avatar de Salome  
Fecha de Ingreso: noviembre-2002
Ubicación: Colombia
Mensajes: 1.032
Antigüedad: 21 años, 4 meses
Puntos: 1
Respuesta: Alineación de elementos en un div.

Excelente... lo hice antes de que enviaras el último mensaje... moví el código por debajo que tenia en java, para que primero pintara la imagen y todos sus estados y luego el texto y se ve excelente! gracias!! ya me estaba "sacando los ojos" con eso...

Aunque no entiendo la lógica, porque es como inversa?
  #7 (permalink)  
Antiguo 01/06/2009, 10:58
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 elementos en un div.

El float right de la imagen permite que otro elemento se coloque a su izquierda, mientras que el elemento de texto sin float no lo permite. De esa manera, y para que aparezca arriba del todo, ponemos en primer lugar la imagen flotada, de forma que aparece en el primer renglón del flujo del documento, y para el resto de elementos es casi como si no ocupara sitio (gracias al flotado).
Una vez que tenemos eso colocamos tranquilamente el elemento de texto (bloque, en este caso), que se acomodará a la izquierda de la imagen porque es ésta la que se lo permite. De esta manera el bloque de texto ocupará exactamente todo el espacio disponible, sin necesidad de darle un ancho.

Sólo es eso.
  #8 (permalink)  
Antiguo 01/06/2009, 11:23
Avatar de Salome  
Fecha de Ingreso: noviembre-2002
Ubicación: Colombia
Mensajes: 1.032
Antigüedad: 21 años, 4 meses
Puntos: 1
Respuesta: Alineación de elementos en un div.

mmmmm entiendo entiendo.. gracias!!!...
  #9 (permalink)  
Antiguo 01/06/2009, 15:08
Avatar de Salome  
Fecha de Ingreso: noviembre-2002
Ubicación: Colombia
Mensajes: 1.032
Antigüedad: 21 años, 4 meses
Puntos: 1
Respuesta: Alineación de elementos en un div.

Aunque me funcionó la alineación me daña un drag que tengo hacia el elemento...

Es como si el <li> quedara ya sólo en la imagen...


es decir, si el <li> es quien contiene el texto y la imagen.. deberia funcionar igual? no hay problema con tener un div ahi... o deberia hacer que el <li> sea el que tenga posición flotante?

  #10 (permalink)  
Antiguo 01/06/2009, 15:30
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 elementos en un div.

Buf, lo siento, no te he entendido, pero de entrada, o hay alguna muy buena razón o creo que no deberías usar una lista para presentar juntos datos como una imagen y un texto adjunto.
  #11 (permalink)  
Antiguo 01/06/2009, 15:57
Avatar de Salome  
Fecha de Ingreso: noviembre-2002
Ubicación: Colombia
Mensajes: 1.032
Antigüedad: 21 años, 4 meses
Puntos: 1
Respuesta: Alineación de elementos en un div.

Pues resula que tenemos una aplicación donde los elementos se mueven, y la imagen hace relaciones a otras imagenes...

Adicional tiene más cosas de programación, para cambiar colores de elementos y descripción entre otras...

Sólo quiero alinear la imágen (a la derecha)... y pues creo, estoy casi segura que lo puedo lograr desde los estilos, pero como lo dije en mi primer post, apenas comienzo a maquetar a partir de estilos....





Cómo vez en la imagen dos elementos tienen relación (raya roja) y la imagen cambia de estado, ahora se ve activa; donde dice elemento de recursos, vez como puedo mover el elemento (cuándo cambio el orden para que me funcione la alinación, se me daña ésta función).

Creo que ando haciendo mal con ponerlo en un div aparte.. deberia heredarse del li el que el img esté alineado no? si es así, cómo lo hago? o que puedo leer para ir aprendiendo...

Igual.. gracias!!
  #12 (permalink)  
Antiguo 01/06/2009, 16:06
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 elementos en un div.

Lo siento, sin ver el código que se genera en el navegador no entiendo en absoluto que son los LI, cómo es que esos iconitos aparecen ahí si estás usando el código del que hemos hablado antes, etcétera.

Deberías mostrar un pequeño trozo de HTML generado y el CSS ue le intentas aplicar, si no, yo estoy perdido.
  #13 (permalink)  
Antiguo 01/06/2009, 16:11
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 elementos en un div.

Si no es así como ha de funcionar, ya sí que no sé:
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-es" lang="es-es">
<head>
<style type="text/css">
.caja {width: 240px; border: 1px solid #f00;margin-bottom: 10px;}
.caja img {float: right;height: 10px; width: 10px;padding: 5px;}
.caja p {margin: 0; padding: 0 10px;background-color:#f0f;}
</style>
</head>
<body>
<div class="caja">
<img src="img/1.jpg" />
<p>Esto es un texto de prueba</p>
</div>
<div class="caja">
<img src="img/1.jpg" />
<p>Esto es un texto de prueba</p>
</div>
<div class="caja">
<img src="img/1.jpg" />
<p>Esto es un texto de prueba</p>
</div>
<div class="caja">
<img src="img/1.jpg" />
<p>Esto es un texto de prueba</p>
</div>
</body>
</html>
  #14 (permalink)  
Antiguo 01/06/2009, 16:16
Avatar de Salome  
Fecha de Ingreso: noviembre-2002
Ubicación: Colombia
Mensajes: 1.032
Antigüedad: 21 años, 4 meses
Puntos: 1
Respuesta: Alineación de elementos en un div.

Okas, acá va un trozo del html que se genera:

Código HTML:
<ul id="bloque5" >
<li style="background-color: #7FB58A" id="node12" 		
onmouseover="javascrip:initArrangableNodes(document.forms[0].elemento12,'5');"
<a ondblclick="javascript:verDetalleElemento('12', '5');"> otro nuevo</a>
<img src="imagenes/relacionesOff.gif" id="elemento12" name="elemento12" alt="Crear relación" 
onclick="javascript:crearRelacion(this,'5');" 														 
onmouseover="javascript:visualizarRelacionFija(document.forms[0].elemento12);" 
onmouseout="javascript:limpiarLineas(document.forms[0].elemento12);" 
ondblclick="javascript:visualizarRelacionFijaOndbClick(document.forms[0].elemento12);"     border="0"/>												
</li>
</ul> 
el css que empleo es el siguiente:

Código HTML:
#movableNode{
		position:absolute;
	}
	
	#arrDestInditcator{
		position:absolute;
		display:none;
		width:100px;
	}
	/* End options that shouldn't be changed */

	
	#arrangableNodes,#movableNode,#bloque9,#bloque8,#bloque7,#bloque6,#bloque5,#bloque4,#bloque3,#bloque2,#bloque1, ul{
		padding-left:0px;
		margin-left:0px;
		margin-top:0px;
		padding-top:0px;
		/*width:100%;*/
	}
	
	#arrangableNodes li,#movableNode li, #bloque9 li,#bloque8 li,#bloque7 li,#bloque6 li,#bloque5 li,#bloque4 li,#bloque3 li,#bloque2 li,#bloque1 li{
		font: normal 11px "trebuchet MS";
		list-style-type:none;
		cursor:default;
		border:1px solid #D8D5D5;
		padding:2px;
		background-color:#FFFFFF;
		margin-top:2px;

Luego habia creado éste estilo que es el que aplique y cambie el orden de los elementos como me habias dicho, pero ya luego el li sólo quedaba en la imagen, por lo que tuve que devolver el cambio en cvs

Código HTML:
	.alineacionimg{
		float: right;
		clear: right;		
	}
Aplicaba ese estilo alineacionimg en un div, antes de que se viera la imagen... así se veia, pero se dañó la funcionalidad de moverse. (al parecer el li quedaba sólo rodenado la imagen)

Saludos...

PD: yo lo que digo es poner o intentar hacerlo en los estilos que puse anteriormente, sin tener que mover la estructura de los elementos (el orden).

De nuevo ... gracias...
  #15 (permalink)  
Antiguo 01/06/2009, 16:23
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 elementos en un div.

Pues sin mover elementos tendrás que simularlo, con algo como

ul li img {float: right;margin-top: -5px;}
  #16 (permalink)  
Antiguo 01/06/2009, 16:27
Avatar de Salome  
Fecha de Ingreso: noviembre-2002
Ubicación: Colombia
Mensajes: 1.032
Antigüedad: 21 años, 4 meses
Puntos: 1
Respuesta: Alineación de elementos en un div.

Pues tocará seguir probando, no quiero impactar la programación...

Algo como el estilo que diste lo habia hecho, pero igual vuelvo a quedar como el principio, con el elemento de imagen, alineado pero un renglón más abajo...

Te estaré contando! Gracias ;)
  #17 (permalink)  
Antiguo 01/06/2009, 16: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 elementos en un div.

¿Y tocando ese -5 hasta que esté donde tú quieres tampoco?

De acuerdo, ya contarás.

Saludos.

P.D.: por último, si no lo consigues escribe, porque estoy casi seguro que al cambiar la programación algo no estuvo bien del todo, porque hecho correctamente es bastante poco probable que el orden del enlace y la imagen afecte a la acción de los scripts, en ese caso.
  #18 (permalink)  
Antiguo 01/06/2009, 16:34
Avatar de Salome  
Fecha de Ingreso: noviembre-2002
Ubicación: Colombia
Mensajes: 1.032
Antigüedad: 21 años, 4 meses
Puntos: 1
Respuesta: Alineación de elementos en un div.

Sip, quedó así moviéndolo a -18px... por fin! se ve donde quiero, no me afectó la programación de todo el tablero... no impacté el proyecto... que felicidad!!!

Gracias!!

#arrangableNodes li img,#movableNode li img, #bloque9 li img,#bloque8 li img,#bloque7 li img,#bloque6 li img,#bloque5 li img,#bloque4 li img,#bloque3 li img,#bloque2 li img,#bloque1 li img {
float: right;
clear: right;
margin-top: -18px;
}
  #19 (permalink)  
Antiguo 01/06/2009, 16:35
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 elementos en un div.

Me alegro. Hasta la vista.
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:04.