Dudas en mi codigo...

hernino88 · #1 (**permalink**) 10/09/2007, 22:51

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)|::.::

PatomaS · #2 (**permalink**) 11/09/2007, 03:27

Hola

Te sugiero que revises este mensaje, en el encontrarás un ejemplo con dos opciones para hacer lo que quieres.

Sobre el código que nos muestras, te comento un detallín. Para usar adecuadamente los float, debes ordenar las capas en el sentido normal de aparición, es decir, menu, body y derecha.

Recuerda que los floats sacan los objetos del flujo normal de la página.

Al posicionar primero la columna derecha con el float right y el menú con el float left, , el body está posicionado de forma normal, empezando por el primer espacio debajo de la cabacera, por lo que una zona de esa capa queda "bajo" el menu y otra parte queda "bajo" la columna derecha.

No puedes espaciarlo debido a ese efecto.

Una forma de ajustar tu código, sería que dejaras un margen a ambos lados del ancho de las capas laterales y redujeras el ancho de la capa body al tamaño del área visible entre ellas, pero dudo que tenga un funcionamiento estable en todos los navegadores debido a las diferencias en las consideraciones del margin y el padding.

Revisa los ejemplos que te puse y nos comentas como te va.

Felicidad