Foros del Web - Ver Mensaje Individual

kseso? · #4 (**permalink**) 24/07/2009, 10:04

Mira a ver si en este ejemplo ves cómo hacerlo. La imagen del cuerpo central está hecha a la carrera y sin cuidar los detalles, por eso la parte derecha hace algo de feo. Pero eso es una cuestión de diseño gráfico, no de css.

Código html:

Ver original<!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" lang="es-es">
<head>
<title>Kseso? jugando con css </title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0; border:0; outline:none; position: relative;}
 
#contenedor{
width:250px;
margin: 0 auto;
background: url(http://s3.subirimagenes.com:81/privadas/previo/thump_570288righttop.gif) no-repeat;
overflow: hidden;
}
 
#header {
width: 100%;
height: 25px;
background: url(http://s3.subirimagenes.com:81/privadas/previo/thump_570288righttop.gif) no-repeat;
font-size: 1.4em;
color: #030;
text-transform: uppercase;
font-family: serif;
text-align: center;
}
#cuerpo{
background: url(http://img43.imageshack.us/img43/6701/cuerpoc.jpg) repeat-y;
padding: 0 5px;
}
#cuerpo p {
font-size: 1.2em
font-family: san-serif;
color: #600;
}
#pie {
background: url(http://img32.imageshack.us/img32/6260/piewxg.jpg) no-repeat;
height: 25px;
font-size: 1em
font-family: san-serif;
color: #300;
text-align: right;
padding-top: 7px;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="header">
hola mundo
</div>
<div id="cuerpo">
<p>el contenido del cuerpo se aloja aquí, podría ser sólo texto o contener alguna imagen</p>
<p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
<p>Añadir más texto</p>
</div>
<div id="pie">
Fin
</div>
</div>
</body>
</html>

Un saludo