Este es mi xhtml:
Código HTML:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Zona rock</title> <link href="Untitled-2.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="contenedor"> <div id="cabesera"></div> <div id="barra-lateral"> <p>sadfnfnjdsf</p> <p>dsfkdfodsfod</p> <p>fdsfdsfdsdf</p> <p>dfdsfdsfdsf</p> </div> <div id="contenido"> <div id="top" class="top"> <img src="img/esq-sup-izq.gif" alt="Esquina superior izquierda" class="esquina_sup_izq" /> <img src="img/esq-sup-der.gif" alt="Esquina superior derecha" class="esquina_sup_der" /></div> <div id="content" class="content"> <div id="boxcontrol" class="boxcontrol"> <h1>Título del artículo.</h1> <p>Párrafo de prueba #1. Aquí va la información del artículo. Aquí va información del artículo. </p> <p>Párrafo de prueba #2. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo. </p> <p>Párrafo de prueba #3. Aquí va la información del artículo. Aquí va la información del artículo. Aquí va la información del artículo. </p> <p class="autor">Pie del artículo<br />Autor, fecha, referencias, etc.</p> </div> </div> <div id="bottom" class="bottom"> <img src="img/esq-inf-izq.gif" alt="Esquina inferior izquierda" class="esquina_inf_izq" /> <img src="img/esq-inf-der.gif" alt="Esquina inferior derecha" class="esquina_inf_der" /> </div> </div> <div id="pie">Colocar aquí el contenido para id "pie"</div> </div> </body> </html>
Código:
/* CSS Document */ *{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px} p {text-align:justify; padding: 5px 5px 5px 10px} #contenedor {width:900px; margin:4px auto } #cabesera {height:100px; padding:5px; margin-bottom:5px; background-image:url(imagenes/logozr.gif); background-repeat:no-repeat} #barra-lateral {width:140px; height:100%; float:left; margin-bottom:10px} #contenido {width:740px; height:100%; float:left; margin-left:10px; margin-bottom:5px; margin-top:5px} #pie {clear:both; background-color:#0000FF; margin-top:5px} div.top { height:22px; background-image:url(img/bord-sup.gif); background-repeat: repeat-x; } img.esquina_sup_izq { float:left; } img.esquina_sup_der { float:right; } div.content { background-image:url(img/bord-izq.gif); background-repeat:repeat-y; background-color:#e6e6e6; } div.boxcontrol { padding:0 5% 0 5%; background-image:url(img/bord-der.gif); background-position:right; background-repeat:repeat-y; } div.bottom { height:22px; background-image:url(img/bord-inf.gif); background-repeat:repeat-x; border:0; padding:0; margin:0;} img.esquina_inf_izq { float:left; } img.esquina_inf_der { float:right; } h1 { margin:0; border-bottom:1px #996;} p.autor { padding-right:8px; border-right:1px dashed #996; text-align:right; margin:-.1em 0 0 0; }