¿Me ayudáis a terminar de maquetar esta pequeña web?

Usersito · #1 (**permalink**) 23/03/2013, 11:32

Hola a todos/as.

Estoy intentando hacer una pequeña pagina web y sinceramente, llevo varios días liado con ella. Hasta ahora he logrado hacer gran parte, pero llevo toda la tarde con un pequeño problema que no logro solucionar.

He creado la cabecera y he metido dentro un logo y una imagen (con las medidas de la futura publicidad que pondré en su lugar).
Debajo he creado otra capa con otra imagen que será enlaces de adsense
Debajo de esta quería crear 3 columnas, una para el menu, otra para el contenido y la derecha para otra publicidad.
Finalmente, debajo del todo, pero sin separación, un pie de página.

Me he quedado trabado en las 3 columnas, pues sale una a la izquierda, el contenido en el centro y a la derecha la del banner, pero más abajo. El pié también ha salido mezclado en ese cacao. No se como seguir con el código y la verdad es que estoy un poco cansado de tanto mirar la pantalla. Llevo desde esta mañana. Es lo que tiene no saber mucho de esto.

Os dejo los códigos que tengo hasta el momento, haber si podéis ayudarme un poco. Notareis que he puesto borde en las capas, es para poder orientarme, después los quitaré.

Gracias de antemano.

Namaste.

Código:

<!DOCTYPE HTML>
<html lang="es-es">
<head>
<meta charset="UTF-8"/>
<title></title>
<link rel="stylesheet" href="estilo.css"/>
</head>
<body>
<div id="contenedor">
	<div id="cabecera">
		<div id="logo"><img src="img/logo.jpg"/></div>
		<div id="bannercabecera"><img src="temp/banner_display_468_60.png"/></div>	
	</div>
	<div id="enlacescabecera">
		<center><img src="temp/enlaces_728_15.png"/></center>
	</div>
	<div id="cuerpo">
		<div id="menuizquierdo">menuizquierdo</div>
		<div id="contenido">contenido</div>
		<div id="bannerderecho">bannerderecho</div>	
	</div>
</div>
<div id="pie">pie</div>
</body>
</html>

Código:

body
{
margin-top: 0px;
margin-left: 0px;
background-color: #0174DF;
background-image: url(img/fondo.png)
}

#contenedor
{
/*background-color: #ffffff;*/
width: 100%;
min-width: 900px;
}

#cabecera
{
background-color: #ffffff;
width: 900px;
height: 121px;
margin: auto;
}

#logo
{
margin-top: 4px;
width: 340px;
height: 113px;
margin-left: 25px;
float: left;
}

#bannercabecera
{
float: right;
margin-top: 25px;
margin-right: 25px;
}


#enlacescabecera
{
background-color: #ffffff;
padding-top: 5px;
margin: auto;
width: 900px;
}

#cuerpo
{
width: 900px;
margin: auto;
background-color: #ffffff;
border-color: #000000;
border-width: 1px;
border-style: solid;
}

#menuizquierdo
{
float: left;
width: 200px;
border-color: #000000;
border-width: 1px;
border-style: solid;
}

#contenido
{
width: 500px;
border-color: #000000;
border-width: 1px;
border-style: solid;
}

#bannerderecho
{
float: right;
width: 200px;
border-color: #000000;
border-width: 1px;
border-style: solid;
}

#pie
{
width: 900px;
margin: auto;
background-color: #ffffff;
}

pzin · #2 (**permalink**) 23/03/2013, 12:00

Lo que pasa es que tu contenedor mide 900, y los tres elementos internos suman 906. Como los dos primeros miden un total de 704, para el tercero que mide 202 no le queda sitio y se va para abajo.

Es por cómo funciona el modelo de caja en CSS —aka box model— que añade, en tu caso, el borde al tamaño, haciendo que dichos elementos se agranden. Como tu borde mide un pixel por cada lado, a cada elemento se le suman dos pixeles.

Formas de evitarlo, que cambies el modelo de caja mediante:

Código CSS:

Ver originalbox-sizing: border-box;

O bien lo haces a la antigua y especificas el ancho restándole el borde. Es decir, para el primer elemento sería un ancho de 498.

También puedes montarte un pirulilla y simular los bordes usando una sombra:

Código CSS:

Ver originalbox-shadow: 0 0 1px 1px black;

Yo soy más de usar box-sizing porque soy vago para ir haciendo sumas

y lo de la sombra me parece algo un poco raro.

Usersito · #3 (**permalink**) 23/03/2013, 12:31

Muchas gracias Bonez pero, he quitado los bordes y sigue apareciendo mal. Incluso he cambiado el tamaño de las 3 capas a 150, 450, 150 y sigue apareciendo mal. No entiendo que sucede. Namaste.

pzin · #4 (**permalink**) 23/03/2013, 12:49

Acabo de mirar más atentamente el código.

Flota los tres elementos a la izquierda y se pondrán uno después del otro.

Mariano_Floyd · #5 (**permalink**) 23/03/2013, 12:52

Mira, te adjunto tu código con unas modificaciones que le hice:

Código HTML:

<!DOCTYPE HTML>
<html lang="es-es">
<head>
<meta charset="UTF-8"/>
<title></title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="wrapper">
<div id="contenedor">
	<div id="cabecera">
		<div id="logo"><img src="img/logo.jpg"/></div>
		<div id="bannercabecera"><img src="temp/banner_display_468_60.png"/></div>	
	</div>
	<div id="enlacescabecera">
		<center><img src="temp/enlaces_728_15.png"/></center>
	</div>
	<div id="cuerpo">
		<div id="menuizquierdo">menuizquierdo</div>
		<div id="contenido">contenido</div>
		<div id="bannerderecho">bannerderecho</div>	
	</div>
</div>
<div id="pie">pie</div>
</div>
</body>
</html>

Código:

  body
{
margin-top: 0px;
margin-left: 0px;
background-color: #0174DF;
background-image: url(img/fondo.png)
}

#contenedor
{
/*background-color: #ffffff;*/

width: 100%;
}
#wrapper{
margin:0 auto;
max-width:900px;
}
#cabecera
{
background-color: #ffffff;
width: 100%;
height: 121px;
margin:0 auto;
}

#logo
{
margin-top: 4px;
width: 38%;
height: 113px;
margin-left: 25px;
float: left;
}

#bannercabecera
{
float: right;
margin-top: 25px;
margin-right: 25px;
}


#enlacescabecera
{
background-color: #ffffff;
padding-top: 5px;
margin:0 auto;
width: 100%;
}

#cuerpo
{
width: 100%;
margin:0 auto;
background-color: #ffffff;
border-color: #000000;
border-width: 1px;
border-style: solid;
box-sizing:border-box;
}

#menuizquierdo
{
float: left;
width: 20%;
border-color: #000000;
border-width: 1px;
box-sizing:border-box;
border-style: solid;
}

#contenido
{
width: 60%;
float:left;
border-color: #000000;
border-width: 1px;
box-sizing:border-box;
border-style: solid;
}

#bannerderecho
{
float: left;
width: 20%;
box-sizing:border-box;
border-color: #000000;
border-width: 1px;
border-style: solid;
}

#pie
{
width: 100%;
margin:0 auto;
float:left;

background-color: #ffffff;
}

Le agregue un wrapper, que seria como el contenedor general. Te aconsejo que siempre trabajes con porcentajes, entonces así le das un ancho inicial, y luego a los elementos internos el ancho se lo das con %, por ejemplo si te fijas, yo le deje un ancho de 900px que ya lo tenia, y a los elementos le di un 20%, 60%, 20%. Ese porcentaje corresponde a la porción del ancho del elemento padre. Es decir que sera un 200% de 900px, y así sucesivamente.
Re acomode los bloques con float, y por ultimo le reste los bordes con box-sizing. Ademas, si achicas la ventana del navegador veras que los elementos se reajustan.
Por ultimo te recomiendo que utilices html5, es mucho mas ordenado y cómodo, ademas de todas las otras ventajas que tiene.
Saludos y espero haberte sido de ayuda!

Usersito · #6 (**permalink**) 23/03/2013, 13:27

Gracias a los dos, con vuestra ayuda he podido terminar de maquetar esto. Namaste.