Foros del Web » Creando para Internet » HTML »

diseño de una web ayuda prfavor??

Estas en el tema de diseño de una web ayuda prfavor?? en el foro de HTML en Foros del Web. 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> ...
  #1 (permalink)  
Antiguo 26/03/2008, 20:10
 
Fecha de Ingreso: diciembre-2005
Mensajes: 201
Antigüedad: 12 años
Puntos: 2
Pregunta diseño de una web ayuda prfavor??

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

Última edición por sagitariosTheBest; 26/03/2008 a las 21:32
  #2 (permalink)  
Antiguo 27/03/2008, 00:51
Avatar de Edypu  
Fecha de Ingreso: octubre-2003
Ubicación: La Paz - Bolivia
Mensajes: 394
Antigüedad: 14 años, 2 meses
Puntos: 1
Re: diseño de una web ayuda prfavor??

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:58.