Busca Preguntas

Necesito saber el codigo css para poner una imagen al lado izquierdo de la pagina y el texo al cosado derecho

Ginevra - 2007-07-19 14:59:50 - Programming Design

Necesito saber el codigo css para poner una imagen al lado izquierdo de la pagina y el texo al cosado derecho.. Solo he podido centrar la imagen y el texto me sale debajo de la imagen.. alguna idea?? Grax

Mejor Respuesta:

Hubieras especificado como lo quieres, pero yo creo que esto te puede servir: 1.- Quieres que en un párrafo de texto (<p>) poner una imagen alineada a la izquierda mientras que el texto siga en su posición. El HTML y CSS se hace así: <p><img src="mimagen.gif" alt="" style="float:left;" />Mi texto</p> 2. Bloques, una gran imagen a la izquierda o fondo y el texto a la derecha: Para imagen: <style type="text/css"> #overflow { overflow:hidden; } * html #overflow { height:1%; } #imagen { width:150px;float:left; /*o el ancho de tu imagen */ } #texto { padding-left:10px;margin-left:151px; } /*este ultimo parametro debe ser del width anterior +1 */ </style> <div id="overflow"> <div id="imagen"><img src="imagen.gif" alt="" /></div> <div id="texto">Este es todo mi texto</div> </div> Con fondo: <style type="text/css"> #overflow { overflow:hidden; } * html #overflow { height:1%; } #imagen { width:150px;float:left;background-image:url(imagen.gif);} #texto { padding-left:10px;margin-left:151px; } /*este ultimo parametro debe ser del width anterior + 1*/ </style> <div id="overflow"> <div id="imagen">Un menú por ejemplo...</div> <div id="texto">Este es todo mi texto</div> </div> Eso seria simplemente, el código se explica solo y funciona en IE, Safari y Firefox, si es necesario se puede extender mucho mas pero así es básicamente es como funciona. Saludos, PD: Cualquier cosa puedes escribirme por Yahoo y te respondo lo antes posible.

Respuestas:

Hubieras especificado como lo quieres, pero yo creo que esto te puede servir: 1.- Quieres que en un párrafo de texto (<p>) poner una imagen alineada a la izquierda mientras que el texto siga en su posición. El HTML y CSS se hace así: <p><img src="mimagen.gif" alt="" style="float:left;" />Mi texto</p> 2. Bloques, una gran imagen a la izquierda o fondo y el texto a la derecha: Para imagen: <style type="text/css"> #overflow { overflow:hidden; } * html #overflow { height:1%; } #imagen { width:150px;float:left; /*o el ancho de tu imagen */ } #texto { padding-left:10px;margin-left:151px; } /*este ultimo parametro debe ser del width anterior +1 */ </style> <div id="overflow"> <div id="imagen"><img src="imagen.gif" alt="" /></div> <div id="texto">Este es todo mi texto</div> </div> Con fondo: <style type="text/css"> #overflow { overflow:hidden; } * html #overflow { height:1%; } #imagen { width:150px;float:left;background-image:url(imagen.gif);} #texto { padding-left:10px;margin-left:151px; } /*este ultimo parametro debe ser del width anterior + 1*/ </style> <div id="overflow"> <div id="imagen">Un menú por ejemplo...</div> <div id="texto">Este es todo mi texto</div> </div> Eso seria simplemente, el código se explica solo y funciona en IE, Safari y Firefox, si es necesario se puede extender mucho mas pero así es básicamente es como funciona. Saludos, PD: Cualquier cosa puedes escribirme por Yahoo y te respondo lo antes posible.