Ajustar Divs en Plantilla

Citar

Escrito el 30 Ene 2013 07:14 pm

Hola saludos a todos, esperando me puedan orientar soy nuevo en este ambiente de estilos y mas si se trata de divs :lol:

bueno mi duda es como puedo ajustar y darle un tamaño a mis divs en dibujos asi debe quedar:

[url=http://domi.comli.com/imgnes.html][/url]

no se que esta mal quiero darle tamaño y centrar el divs apDiv4 y los demas divs para que se vea bien :crap:

este es mi codigo completo

Estilo:

Código CSS :

<head>
<style type="text/css">
<!--
body
{
   margin: 0 auto;
   padding: 0;
   background-color: #262626;
   background-image:url(images/Page-BgTexture.jpg);
   background-repeat: no-repeat;
   background-attachment: scroll;
   background-position: top center;
}
#head {
   position: relative;
   top: -10px;
   left: 0px;
   background-repeat: no-repeat;
   background-position: center;
   text-align:center;
}
#apDiv1 {
   position:relative;
   z-index:1;
   left: 0px;
   top: 601px;
   text-align:center;
}
#apDiv2 {
   position: relative;
   z-index:2;
   left: 0px;
   top: -45px;
   text-align:center;
   /*background-image:url(../images/Block-h.png);*/
   
}
#izq{
    width: 96px; 
     float:left;
    background-color: #262626;
   height:400px;
}
#der{
   width: -96px; 
      float: right;
   background-color: #262626;
}
#apDiv3 {
   position:relative;
   width:220px;
   height:34px;
   z-index:3;
   left: 195px;
   top: 331px;
}
#apDiv4 {
   position: relative;
   z-index:4;
   left: 0px;
   top: 0px;
   color: #FFF;*/
   margin-left:auto;
   margin-right:auto;
}
-->
</style>
</head>

y este es el body

Código HTML :

<body>
<div id="apDiv1">footer</div>
<div id="head"><img src="images/Header.jpg" width="890" height="250" alt="imagen"  /></div>
<img src="images/BlockHeader.png" width="890" height="41" />
<div id="apDiv2">
  <div id="apDiv4">
  </p>
  <p>    <a href="cliente.php"><img src="images/us1.png" width="96" height="96" alt="cliente"></a>Cliente</p>
<p>&nbsp; </p>
  <p><a href="Distribuidor.php"><img src="images/us2.png" width="96" height="96" alt="dist"></a>Distribuidor  </p>
</div>
  <div id="der">
  </div>
</div>
</body>

espero me puedan orientar de como estructurar mi plantilla, y si conocen un buen tutorial recomiendenmelo xfa

De antemano agradezco su atencion, Saludos y Buen Dia

Por langel_rr

20 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Desarollador Web

Citar

Escrito el 01 Feb 2013 06:11 pm

Lo que necesitas es un wrapper o un contenedor general dónde envuelvas a todos tus elementos y en este definas el ancho y el centrado.

Código CSS :

div.contenedor {
  width: 960px;
  height: auto;
  margin: 0 auto;
}

Así, podrás llamar a este contenedor para realizar lo que necesitas.

Saludos.

BROTIP: Ten cuidado con los floats y los tops negativos, intenta hacer tu CSS lo mas apegado a los estándares para que no tengas problemas con compatibilidad entre navegadores.

Por Kinduff

Claber