web Posicionamiento Basico

nedyer · #1 (**permalink**) 19/04/2011, 18:41

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

KoswiDigital · #2 (**permalink**) 20/04/2011, 08:23

Hola.

Está muy bien el aporte, seguro ayuda a muchos, pero he de advertir de algo importante:

Nunca debe repetirse un ID en una página. Además no es necesario utilizar clase e id en todas las etiquetas a menos que se vaya a hacer uso de ambos.

También es mejor habituarse a hacer los menús con listas (<ul></ul>). Siempre es bueno utilizar una buena semántica en el maquetado.

Un saludo.

jomaruro · #3 (**permalink**) 22/04/2011, 02:36

Hola:

Además en cada elemento pones una class y el mismo id ¿Para qué?

Código HTML:

Ver original<div class="Caja_Principal" id="Caja_Principal">
  <div class="Bloque_1" id="Bloque_1">

Saludos.