Foros del Web » Creando para Internet » HTML »

Ayuda con diseño de pagina

Estas en el tema de Ayuda con diseño de pagina en el foro de HTML en Foros del Web. hola alguien me podria ayudar a diseñar algo asi como en la siguiente imagen. Lo que quiero es que la imagen este entre el texto. ...
  #1 (permalink)  
Antiguo 14/03/2009, 17:08
Avatar de uselox  
Fecha de Ingreso: agosto-2008
Ubicación: Lima, Perú
Mensajes: 168
Antigüedad: 9 años, 3 meses
Puntos: 12
Sonrisa Ayuda con diseño de pagina

hola alguien me podria ayudar a diseñar algo asi como en la siguiente imagen.


Lo que quiero es que la imagen este entre el texto.

Nota: El texto sera entroducido por el usuario, osea sera como una presentacion de lo que envio

desde ya le agradesco por sus respuestas
  #2 (permalink)  
Antiguo 14/03/2009, 17:17
Avatar de dART  
Fecha de Ingreso: enero-2009
Ubicación: Madrid
Mensajes: 246
Antigüedad: 8 años, 10 meses
Puntos: 7
Respuesta: Ayuda con diseño de pagina

Hola,

Aquí tienes un ejemplo:

Código HTML:
<div align="justify">
	<p><img src="http://www.telam.com.ar/archivos/imagen/TaianaInterior.jpg" width="400" height="298" align="right" />
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis, mauris
		in porta ultrices, mauris est porttitor nibh, faucibus molestie odio mauris
		non leo. Vivamus metus odio, mollis eget, tincidunt id, adipiscing eu, dui.
		Nullam orci tellus, feugiat et, ullamcorper lobortis, feugiat ac, massa. Integer
		eget augue quis massa interdum scelerisque. Vivamus nisi. Phasellus luctus mattis
		nibh. Etiam quis dolor. Duis ultrices fermentum lorem. Sed non ipsum vitae sem
		rhoncus rutrum. In risus metus, ultrices et, aliquet ultricies, luctus et, nunc.
		Quisque nulla augue, adipiscing eu, condimentum quis, suscipit quis, leo. Vivamus
		euismod, mauris non sodales pellentesque, diam ipsum euismod arcu, tincidunt
		imperdiet est orci vel orci. Proin bibendum, tellus a sodales hendrerit, est
		sem varius est, in vulputate magna urna a ipsum. Aenean lacinia. Sed ante diam,
		aliquet non, congue nec, molestie sed, nisi. Duis felis dolor, laoreet ut, rhoncus
		sed, semper in, risus.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis,
		mauris in porta ultrices, mauris est porttitor nibh, faucibus molestie odio
		mauris non leo. Vivamus metus odio, mollis eget, tincidunt id, adipiscing eu,
		dui. Nullam orci tellus, feugiat et, ullamcorper lobortis, feugiat ac, massa.
		Integer eget augue quis massa interdum scelerisque. Vivamus nisi. Phasellus
		luctus mattis nibh. Etiam quis dolor. Duis ultrices fermentum lorem. Sed non
		ipsum vitae sem rhoncus rutrum. In risus metus, ultrices et, aliquet ultricies,
		luctus et, nunc. Quisque nulla augue, adipiscing eu, condimentum quis, suscipit
		quis, leo. Vivamus euismod, mauris non sodales pellentesque, diam ipsum euismod
		arcu, tincidunt imperdiet est orci vel orci. Proin bibendum, tellus a sodales
		hendrerit, est sem varius est, in vulputate magna urna a ipsum. Aenean lacinia.
		Sed ante diam, aliquet non, congue nec, molestie sed, nisi. Duis felis dolor,
	laoreet ut, rhoncus sed, semper in, risus.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lobortis,
		mauris in porta ultrices, mauris est porttitor nibh, faucibus molestie odio
		mauris non leo. Vivamus metus odio, mollis eget, tincidunt id, adipiscing eu,
		dui. Nullam orci tellus, feugiat et, ullamcorper lobortis, feugiat ac, massa.
		Integer eget augue quis massa interdum scelerisque. Vivamus nisi. Phasellus
		luctus mattis nibh. Etiam quis dolor. Duis ultrices fermentum lorem. Sed non
		ipsum vitae sem rhoncus rutrum. In risus metus, ultrices et, aliquet ultricies,
		luctus et, nunc. Quisque nulla augue, adipiscing eu, condimentum quis, suscipit
		quis, leo. Vivamus euismod, mauris non sodales pellentesque, diam ipsum euismod
		arcu, tincidunt imperdiet est orci vel orci. Proin bibendum, tellus a sodales
		hendrerit, est sem varius est, in vulputate magna urna a ipsum. Aenean lacinia.
		Sed ante diam, aliquet non, congue nec, molestie sed, nisi. Duis felis dolor,
	laoreet ut, rhoncus sed, semper in, risus.</p>
</div> 
Sólo tienes que alinear la imagen a la izquierda, y justificar el texto.
  #3 (permalink)  
Antiguo 14/03/2009, 17:20
Avatar de uselox  
Fecha de Ingreso: agosto-2008
Ubicación: Lima, Perú
Mensajes: 168
Antigüedad: 9 años, 3 meses
Puntos: 12
Respuesta: Ayuda con diseño de pagina

-.- muy facil, Gracias Brother...
  #4 (permalink)  
Antiguo 14/03/2009, 17:34
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Ayuda con diseño de pagina

Hola:

Espero que te sirva este código o por lo menos te inspire.

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>
            Imagen a la derecha
        </title>

        <style type="text/css">
            * {
                padding:0;
                margin:0 auto;
                outline: 0;
            }

            html, body {
                height:100%;
                font-family: verdana, arial, sans-serif;
                font-size: 1em;
                outline: 0;
            }

            body {
                background-color: #fff;
                width:700px;
                border:1px solid #fca;
            }

            .ejemplo {
                position:relative;
                text-align:center;
                margin: 1em;
                top: 0.5em;
                font-size: 1.2em;
            }

            p {
                margin: 1em;
                text-align: justify;
            }
            
            img {
                float:right;
                margin:10px;
            }
        </style>
    </head>

    <body>
        <div id="contenido">

            <span class="ejemplo">Contenido</span>
            <img src="graficos/bloque.png" alt="Bloque" />
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            <p>Lorem ipsum eum partem corrumpit et, qui puto habemus ea, id pro dolor nostro. Tantas electram theophrastus nec cu. Sea libris prodesset ea, aeque facilisis id est, vituperatoribus concludaturque his ad. An modo kasd everti sed, in his alii singulis dignissim. Ad cotidieque complectitur mei, ne iusto iisque mel, quidam feugiat ut est.</p>
        </div>
    </body>
</html>
Saludos.

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 10:09.