Foros del Web » Creando para Internet » CSS »

Dudas en mi codigo...

Estas en el tema de Dudas en mi codigo... en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/09/2007, 23:51
 
Fecha de Ingreso: septiembre-2007
Mensajes: 55
Antigüedad: 10 años, 3 meses
Puntos: 0
Exclamación Dudas en mi codigo...

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&iacute;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)|::.::
  #2 (permalink)  
Antiguo 11/09/2007, 04:27
Avatar de PatomaS
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: En alguna otra parte
Mensajes: 4.656
Antigüedad: 13 años, 9 meses
Puntos: 63
Re: Dudas en mi codigo...

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
__________________
¡ hey, hou, hou, hey !
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:32.