[Ovillo] Ayuda con este maquetado

Mie Mayo 24 20:05:02 UTC 2006

Reynier Perez Mira escribió:
> 1) La imagen es una sola y el tamaño no debe exceder los 80x80 px
> 2) El texto es por separado. Mira un ejemplo:
> Hola, Kmitnick (1ra linea)
> tienes 7 mensajes, 4 son nuevos. (2da linea)
> Tiempo total en línea: 3 horas y 25 minutos. (3ra linea) 
> Mostrar mensajes no leídos desde la última visita. (4ta linea)
> Mostrar nuevas respuestas a tus mensajes. (5ta Linea)
>
> Me entiendes ?
>   
Asi me salio, calro que le puse colores y tal para que se vean las 
divisiones, espero te sirva, si es que entendi bien XXDDD

Saludos

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
body { font:"Trebuchet MS", Verdana, Arial, sans-serif 12px #CCC; }

#wrap { width:400px; }

#top { height:80px; }
#image { float:left; width:80px; height:80px; background-color:#CCCCCC; }
#saludo { float:right; width:320px; height:40px; background-color:#99CC99; }
#msg { float:right; width:320px; height:40px; background-color:#FFFFCC; }
#bottom div { height:40px; }

</style>
</head>

<body>
    <div id="wrap">
        <div id="top">
            <div id="image">
                <img src="" alt="" width="80" height="80" />
            </div>
            <div id="saludo">
                <p>Hola, Kmitnick</p>
            </div>
            <div id="msg">
                <p>Tienes 7 mensajes, 4 son nuevos.</p>
            </div>
        </div>
        <div id="bottom">
            <div>Tiempo total en línea: 3 horas y 25 minutos.</div>
            <div style="background-color:#66FFFF;">Mostrar mensajes no 
leídos desde la última visita.</div>
            <div>Mostrar nuevas respuestas a tus mensajes.</div>
        </div>
    </div>
</body>
</html>