como he visto a algunos que están comenzando a maquetar web y tienen algunos problemas de posicionamiento aquí les dejo una maquetacion de una web con un diseño básico, aquí esta el codigo.
Código:
<!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=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
body {
background-color: #EFEFEF;
}
.Caja_Principal {
padding: 0px;
height: 900px;
width: 900px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.Bloque_1 {
padding: 0px;
height: 100px;
width: 900px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.Logo {
padding: 0px;
height: 100px;
width: 900px;
}
.Bloque_2 {
padding: 0px;
height: 50px;
width: 900px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.Menu_ {
padding: 0px;
height: 50px;
width: 900px;
background-color: #09F;
}
.Boton {
float: left;
height: 35px;
width: 100px;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
text-align: center;
background-color: #09F;
text-transform: capitalize;
}
.Boton:hover {
background-color: #0F0;
}
a, a:visited {
color: #FFF;
text-decoration: none;
}
.Menu_Letra {
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
font-weight: bold;
text-transform: capitalize;
color: #FFF;
background-color: #0CF;
float: left;
height: 35px;
width: 100px;
padding-top: 15px;
text-align: center;
}
.Bloque_3 {
height: 700px;
width: 900px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.Contenido {
height: 700px;
width: 900px;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
text-transform: capitalize;
text-align: justify;
display: inline-block;
}
.Informacion_1 {
padding: 0px;
float: left;
width: 500px;
height: 500px;
position: static;
background-color: #F6F6F6;
}
.Informacion_2 {
padding: 0px;
float: left;
height: 500px;
width: 400px;
position: static;
background-color: #D9D9D9;
}
.Informacion_3 {
padding: 0px;
float: left;
height: 200px;
width: 900px;
position: static;
background-color: #C0C0C0;
}
.Bloque_4 {
padding: 0px;
height: 50px;
width: 900px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #F6F6F6;
}
.Otro_Contenido {
height: 35px;
width: 900px;
text-align: center;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 14px;
text-transform: capitalize;
}
</style>
</head>
<body>
<div class="Caja_Principal" id="Caja_Principal">
<div class="Bloque_1" id="Bloque_1">
<div class="Logo" id="Logo"><img src="" alt="Logotipo De la Web" name="Logotipo" width="900" height="100" id="Logotipo" /></div>
</div>
<div class="Bloque_2" id="Bloque_2">
<div class="Menu_" id="Menu_">
<div class="Menu_Letra" id="Menu_Letra">menu</div>
<div class="Boton" id="Boton"><a href="">inicio</a></div>
<div class="Boton" id="Boton"><a href="">la web</a></div>
<div class="Boton" id="Boton"><a href="">descargas</a></div>
<div class="Boton" id="Boton"><a href="">sonidos</a></div>
<div class="Boton" id="Boton"><a href="">musica</a></div>
<div class="Boton" id="Boton"><a href="">videos</a></div>
<div class="Boton" id="Boton"><a href="">ayuda</a></div>
<div class="Boton" id="Boton"><a href="">nosotros</a></div>
</div>
</div>
<div class="Bloque_3" id="Bloque_3">
<div class="Contenido" id="Contenido">
<div class="Informacion_1" id="Informacion_1">aqui va la informacion 1</div>
<div class="Informacion_2" id="Informacion_2">aqui va la informacion 2</div>
<div class="Informacion_3" id="Informacion_3">aqui va la informacion 3</div>
</div>
</div>
<div class="Bloque_4" id="Bloque_4">
<div class="Otro_Contenido" id="Otro_Contenido">aqui puede ir el copy right @ 2011-2012</div>
</div>
</div>
</body>
</html>
el logo de la web, el menú y 3 cajas para colocar la información, y el copy right
¿pues como se ve la pagina? asi
