hola, estoy aprendiendo esto de las css y estoy haciendo pruebas y pruebas, y ahora estoy "tratando" de maquetar una pag de 3 columnas de 800px de ancho, aca les dejo mi codigo, y quiero que lo revisen los que saben y tengan ganas para ver si voy por buen camino o si estoy haciendo cualquiera, a demas, si ustedes lo colocan en un notepad o dreamweaver, van a ver que entre el texto central y el menu izq no hay margen osea estan pegados, y quisiera que me digan como espaciarlos al menos con 5 px, como para que no queden pegados...
:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#contenedor{
width:800px;
height:600px;
margin:0 auto 0 auto;
border:solid #000000 1px;
}
#cabecera{
background:#666666;
border-bottom:1px #000000 solid;
font-family:tahoma;
font-size:24px;
color:#FFCC33;
font-weight:bold;
text-align:center;
}
#body{
width:650px;
font-family:arial;
font-size:12px;
color:#000000;
text-align:justify;
text-indent:10px;
text-decoration:none;
}
p:first-letter{
color:#999999;
font-size:18px;
}
#menu{
width:150px;
height:auto;
border-right:#000000 solid 1px;
float:left;
}
#menu ul{
margin:0;
padding:0;
list-style-type:none;
}
#menu li{
display:block;
background-image:url(images/link.gif);
border-bottom:#000000 solid 1px;
height:20px;
background-repeat:repeat-x;
vertical-align:middle;
}
#menu li:hover{
display:block;
background-image:url(images/hover.gif);
border-bottom:#000000 solid 1px;
height:20px;
background-repeat:repeat-x;
}
#menu a:link, a:visited, a:active{
font-family:arial;
font-size:11px;
font-weight:normal;
color:#FFFFFF;
text-align:left;
padding:10px;
text-decoration:none;
}
#menu a:hover{
font-family:arial;
font-size:11px;
font-weight:bold;
color:#FFFFFF;
text-align:left;
padding-left:10px;
text-decoration:none;
}
#derecha{
background:#0066CC;
width:139px;
float:right;
border-left:#000000 solid 1px;
}
</style>
<title>Documento sin título</title>
</head>
<body>
<div align:center id="contenedor">
<div id="cabecera">Prueba...</div>
<div id="derecha">
<br />
<br />
<br />
<br />
<br />
</div>
<div id="menu">
<ul>
<li><a href="#">:· Home</a></li>
<li><a href="#">:· Presentación</a></li>
<li><a href="#">:· Ediciones</a></li>
<li><a href="#">:· Publique</a></li>
<li><a href="#">:· Contacto</a></li>
</ul>
</div>
<div id="body">
<p>Texto simulado, texto simulado, texto simulado, texto simulado, texto simulado, texto simulado, texto simulado, texto simulado, texto simulado, texto simulado, texto simulado, texto simulado, texto simulado, texto simulado, texto simulado, texto simulado, texto simulado, texto simulado, texto simulado, texto simulado, texto simulado, texto simulado, texto simulado</p>
</div>
</div>
</body>
</html>
Mucas gracias por todo de ante mano...
::.::|Hernán(5)|::.::