Foros del Web » Creando para Internet » CSS »

Aplicar margin left a un trozo de texto

Estas en el tema de Aplicar margin left a un trozo de texto en el foro de CSS en Foros del Web. Saludos. Bueno, gracias a nuestro amigo Mikmoro me estoy poniendo a diseñar webs sin tablas, usando los div, pero como todo lo nuevo, me complico ...
  #1 (permalink)  
Antiguo 23/02/2009, 08:38
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Exclamación Aplicar margin left a un trozo de texto

Saludos.

Bueno, gracias a nuestro amigo Mikmoro me estoy poniendo a diseñar webs sin tablas, usando los div, pero como todo lo nuevo, me complico la vida en detalles que no se como se hacen, por ejm, estoy diseñando un web que tiene una imagen con texto a un lado y debajo de ella, pero lo que pasa es que la imagen esta a un poco mas de la mitad de la pantalla, no a la iz, y el texto deberia comenzar abajo de la imagen, pero se me va totalmente a la izquierda, suena raro pero si ven la página verán a que me refiero.

El sitio es http://goodsamaritanmission.net/

y este es el efecto a lograr



como ven, el texto debajo del camion es la continuacion de el texto que tiene al lado, lo que no se es como lograr que el texto de abajo comience ahi. Acaso tengo que ponerlo en un div? Estaba tratando de poner el texto suelto, sin cajas ni nada, pero no se si es lo correcto.

este es el código de la imagen del camion y del titulo Welcome txt:

Código HTML:
#truck-index{
	width:228px;
	height:160px;
	margin-left:205px;
	margin-top:-15px;
	margin-right:7px;
	float:left;
}	
#welcome_txt{
	position:absolute;
	width:203px;
	margin-top:-15px;
}
bueno y ademas, en IE se pierde todo el css y se hace un desmadre.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr

Última edición por gVenom; 23/02/2009 a las 08:49
  #2 (permalink)  
Antiguo 23/02/2009, 08:58
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: Aplicar margin left a un trozo de texto

Me alegro de tener parte de culpa

Como el título también es una imagen, la has colocado con posición absoluta, pero creo que no lo necesitas.

Busca este selector y bórralo por un momento:
Cita:
#welcome_txt {margin-top:-15px;
position:absolute;
width:203px;
}
La imágen del título debería ir a su sitio por el propio flujo del documento.

Prueba y comentas.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 23/02/2009, 09:10
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Aplicar margin left a un trozo de texto

Que tal Mikmoro, me alegro que andes por aqui.

Checkeando exactamente eso del flujo, cambie algunos parametros del position, y me quedo asi:
Código HTML:
#truck-index{
	position:relative;
	width:228px;
	height:160px;
	margin-left:205px;
	margin-top:-15px;
		}	
#welcome_txt{
	position:absolute;
	width:203px;
	margin-top:-175px;
	margin-left:438px;
}
#txt1{
	margin-top:-144px;
	width:250px;
	position:relative;
	height:145px;
	margin-left:438px;
	text-align:justify;
	}
#txt2{
	position:relative;	
	width:470px;
	margin-left:205px;
	margin-top:-144px;
	}
el welcome txt es la imagen (que le quite el position y se perdio)
el txt1 es el texto junto a la imagen
eltxt2 es el texto de abajo

ahora, el firefox me respeta el código de todo, menos de el txt2, me lo pone arriba encima (o abajo, no se) de el primer text, y en IE es al revez, no me respeta los margenes del txt1 pero si los demás, Que hago mal?
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #4 (permalink)  
Antiguo 23/02/2009, 11:31
 
Fecha de Ingreso: febrero-2009
Ubicación: Colombia
Mensajes: 20
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: Aplicar margin left a un trozo de texto

txt2 es el q esta pegado debajo de la imagen ?? (" His dreams started....." ) ?

si es asi entonces yo lo q haria es meterle a la imagen un margin-bottom para q asi el texto no quede debajo de la imagen sino justificado al lado derecho de la misma.

yo he intentado meter el texto en un <p> y meterle un margin-left pero en IE y firefox tienen comportamientos muy diferentes entonces este metodo no sirve.
  #5 (permalink)  
Antiguo 23/02/2009, 11:46
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: Aplicar margin left a un trozo de texto

mmm... yo ahora lo veo perfectamente bien en IE6 y FF2. No sé cuál es el problema.

No obstante siempre es mejor que intentes utilizar el flujo del documento (las posiciones que les son naturales a cada cosa según su orden de aparición), que usar las pocicioines absolutas para colocarlas donde quieres, porque éstas si no tiene mucho cuidado, siempre acaban siendo un foco de problemas.
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 23/02/2009, 11:48
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Aplicar margin left a un trozo de texto

saludos coljung

pues si, ese es el texto debajo de la imagen, y al igual que tu, hice pruebas pero se ve distinto dependiendo del navegador. He optado por meter el texto en divs y darle position:absolute; solo asi he logrado que se vea igual en ambos.
Código HTML:
#txt1{
	position:absolute;
	left:474px;
	top:264px;
	width:265px;
	height:135px;
	text-align:justify;
	}
#txt2{
	position:absolute;
	left:236px;
	top:401px;
	width:493px;
	height:42px;
}
Lo que pasa es que yo vi en un template que baje, que al texto le ponian margenes a la izq para que comenzara desde cierto punto, pero no recuerdo como es y no se como usarlo con los div de pormedio.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #7 (permalink)  
Antiguo 23/02/2009, 11:51
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Aplicar margin left a un trozo de texto

Cita:
Iniciado por Mikmoro Ver Mensaje
mmm... yo ahora lo veo perfectamente bien en IE6 y FF2. No sé cuál es el problema.

No obstante siempre es mejor que intentes utilizar el flujo del documento (las posiciones que les son naturales a cada cosa según su orden de aparición), que usar las pocicioines absolutas para colocarlas donde quieres, porque éstas si no tiene mucho cuidado, siempre acaban siendo un foco de problemas.
Si, lo lei de tu guia, y de ahi trate de llevar lo de el flujo de la página, pero a la hora de colocar algunas cosas me perdí, porque no se veia bien en IE, solo Firefox
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
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 11:01.