Aplicar margin left a un trozo de texto

[gVenom]

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.

[Mikmoro]

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:

#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.

[gVenom]

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?

[coljung]

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.

[Mikmoro]

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.

[gVenom]

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.

[gVenom]

Iniciado por Mikmoro

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