Ayuda con diseño de pagina

uselox · #1 (**permalink**) 14/03/2009, 16:08

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

dART · #2 (**permalink**) 14/03/2009, 16:17

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.

uselox · #3 (**permalink**) 14/03/2009, 16:20

-.- muy facil, Gracias Brother...

jomaruro · #4 (**permalink**) 14/03/2009, 16:34

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.