diseño de una web ayuda prfavor??

sagitariosTheBest · #1 (**permalink**) 26/03/2008, 19:10

Hola buenas tardes, e buscado por muchas partes el como hacer el siguinte diseño:

Código:

El contenedor debe tener un ancho de 800px
<div>------------>contenedor
<div>  coloco una serie de imagenes  </div>--->para cabecera
<div>imagen relacionada con texto</div>

<div>a la derecha de la imagen el texto descriptivo</div





/* y lo mas complicado u footer que este en el fondo de la web*/
<div>footer</div>

<div>------------->fin de contenedor

he buscado distintas maneras pero no doy con el resultado que les estoy planteando, no se como hacerlo coloco esos divs y cuando comienzo a maquetear con css se me desacomoda todo.

alguien sabe de algun tutorial donde se esplique como llegar a este resultado??
o alguin si me ayuda se lo agradecere muchisimo.

saludo2

Edypu · #2 (**permalink**) 26/03/2008, 23:51

Haber si te sirve esto ...

Código HTML:

<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<style type="text/css"> 
<!-- 
body  {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #666666;
    margin: 0; 
    padding: 0;
    text-align: center; 
    color: #000000;
}
 #container { 
    position: relative; 
    width: 780px;  
    background: #FFFFFF;
    margin: 0 auto; 
    border: 1px solid #000000;
    text-align: left; 
} 

 #header { 
    height: 60px; 
    background: #DDDDDD; 
    padding: 0 10px 0 20px;  
} 
 #header h1 {
    margin: 0; 
    padding: 10px 0; 
}
 #sidebar1 {
    position: absolute;
    top: 60px;
    left: 0;
    width: 150px; 
    background: #EBEBEB; 
    padding: 15px 10px 15px 20px; 
}
 #sidebar2 {
    position: absolute;
    top: 60px;
    right: 0;
    width: 160px; 
    background: #EBEBEB; 
    padding: 15px 10px 15px 20px; 
}
 #mainContent { 
    margin: 0 200px; 
    padding: 0 10px; 
}
 #footer { 
    padding: 0 10px 0 20px; 
    background:#DDDDDD;
} 
 #footer p {
    margin: 0; 
    padding: 10px 0; 
}
.fltrt { 
    float: right;
    margin-left: 8px;
}
.fltlft { 
    float: left;
    margin-right: 8px;
}
--> 
</style><!--[if IE 5]>
<style type="text/css"> 
 #sidebar1 { width: 180px; }
 #sidebar2 { width: 190px; }
</style>
<![endif]--></head>

<body>

<div id="container">
  <div id="header">
    <h1>Cabecera</h1>
    </div>
  <div id="sidebar1">
  <h3>Menu izquierda </h3>
    <p>menu texto<br />
    menu texto</p>
    <p>menu texto</p>
    <p>menu texto</p>
    <p>menu texto</p>
    <p>menu texto</p>
    </div>
  <div id="sidebar2">
    <h3>Menu derecha</h3>
    <p>Menu derecha Menu derecha Menu derecha Menu derecha Menu derecha Menu derecha Menu derecha Menu derecha Menu derecha Menu derecha Menu derecha </p>
    </div>
  <div id="mainContent">
    <h1> central</h1>
    <p>Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto Texto </p>
    </div>
  <div id="footer">
  </div>
</div>
</body>
</html>

Saludos.