Maquetacion CSS (div)

Leojtm · May 5, 2012

hola!.

bueno tengo dudas con maquetar por medio de css, acá les dejo lo que estoy creando para aprender bien el uso de los atributos float,position,clear.

pero tengo unas dudas a ver si alguien me puede dar unos consejos:

cuando re dimensiono la ventana los divs se desplazan, que puedo hacer?

como puedo maquetar por medio de % en vez de indicar pixeles?.

por favor comentarios que me permitan mejorar el código y aprender el correcto uso de la maquetacion css los agradeceré mucho, saludos!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/D TD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<link rel="stylesheet" type="text/css" href="new.css">
</head>
<body>
	<div id="contenedor">
		<div id="banner"></div>
		<div id="menu"></div>
		<div id="centro"></div>
		<div id="publicidad"></div>
		<div id="pie"></div>
	</div>
</body>
</html>

Quote

#contenedor{
width: 100%;
border: solid 1px;
float: left;
margin: auto
}

#banner{
margin: 10px 10px 5px 10px;
border: solid 1px;
width: 98%;
height: 60px;
clear: both
}

#menu{
margin: 5px 5px 5px 10px;
border: solid 1px;
width: 15%;
height: 200px;
float: left
}

#centro{
margin: 5px;
border: solid 1px;
width: 60%;
height: 200px;
float: left

}

#publicidad{
margin: 5px 10px 5px 5px;
border: solid 1px;
width: 20%;
height: 200px;
float: right
}

#pie{
margin: 5px 10px 10px 10px;
border: solid 1px;
width: 98%;
height: 30px;
float: left

}

PUEDEN DESCARGAR LA PAGINA DE ACÁ:

http://www.mediafire.com/download.php?f8rfv8u8whyfmkp

Edited May 5, 2012 by Leojtm

AshWilliams · May 5, 2012

Te dejo 2 links que te pueden interesar:

http://www.librosweb.es/css/capitulo5/posicionamiento_flotante.html

http://www.luiscanada.com/manualCSS/css-posicionamiento-absoluto.php#!prettyPhoto

Saludos :krider:

Leojtm · May 5, 2012

hooo gracias esta bastante bueno los links, he entendido varias cosas!!!

Sign In

Maquetacion CSS (div)

Recommended Posts

Leojtm

Link to comment

Share on other sites

AshWilliams

Link to comment

Share on other sites

Leojtm

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity