Problema al crear un diseño de pagina con divs en dreamweaver

**diegobd** · 19-mar-2011

Buenas amigos, les pido el favo de que me ayuden a solucionar el siguiente problema.
Quiero diseñar una pagina con divs en dream weaver de la siguiente manera, un primer div que seria el contenedor con un tamaño de 1024 pxs de ancho,los siguientes divs van dentro del div contenedor, un segundo div para el encabezado con 1024 pxs de ancho, un tercer div para el menu lateral con 200pxs de ancho, un cuarto div para el contenido con 614 pxs de ancho, un quinto div para el menu de la derecha con 210 pxs de ancho y un ultimo div para el footer con 1024 pxs de ancho.

El problema se da cuando intento insertar el quinto div para el menu de la derecha, pues no me lo deja colocar seguido del div contenido, sino que me lo manda para abajo, y lo que se quiere es que el div del menu lateral izquierdo, el div del contenido y el div del menu derecho queden uno despues del otro de izquierda a derecha.
Podra por favor alguien decirme que debo hacer o que error estoy cometiendo.
Agradezco su colaboracion.

**Dianela** · 19-mar-2011

Podrías poner tu código para entenderte mejor?

Es algo así lo que quieres hacer?

Código HTML:

<head>
       <title>Título de Tu página</title>
       <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
   <div class="header"></div>
   <div class="nav"></div>
   <div class="sidebar-left"></div>
   <div class="post"></div>
   <div class="sidebar-right"></div>
   <div class="footer"></div>
</div>
</body>
</html>

**diegobd** · 20-mar-2011

Si esa es la idea o como lo estaba maquetando.
El diseño tiene un ancho de 1024 pixeles entonces:
el div contenedor tiene de ancho 1024 pixeles
y dentro de ese div vienen los otros divs asi:
uno de cabecera con 1024 de ancho, pues ocupa todo el ancho del diseño.
Luego vienen tres divs que son los que me generan problemas, pues necesito que queden uno al lado del otro, no uno debajo del otro, como me sucede.
Al primero de esos tres le doy un ancho de 200, al segundo de 614 y al tercero de 210, se supone que los tres deben caber a lo ancho pues la suma de las anchuras me da 1024, sin embargo al insertar el tercer div (el de 210 de ancho), se ma va debajo y no se queda al lado del segundo, el de 614.
Porque no se alinearan, sera por el margen que les resta espacio. o porque no debo darle a los tres dimensiones que sumen exactamente el ancho del contenedor.
Gracias por tu rapida respuesta y espero sus consejos.

**diegobd** · 20-mar-2011

Pensaba agregar una imagen que hice sobre como quedaria el diseño, pero no fui capaz de subirla, asi que disculpas.

**Dianela** · 20-mar-2011

Debes subir la imágen a un hosting gratuito de imágenes..
ej:

Código:

http://min.us

**diegobd** · 20-mar-2011

haber si me funcional la imagen es esta:

¡¡¡Si funciona, una mas que me se...por supuesto gracias a usted¡¡¡

**Dianela** · 20-mar-2011

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
       <head>
       <title>Tu Pagina</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link href="base.css" rel="stylesheet" type="text/css" />
       </head>
       <body>
   <div id="container">
   <div class="header">Header</div>
   <div class="izquierda">Sidebar-Letf</div>
   <div class="derecha">Sidebar-Right</div>
   <div class="principal">Post</div>
   <div class="footer">Footer</div>
   </div>
   </body>
   </html>

Aspectos generales de Diseño:

Código PHP:


			
body {
    font:11px Verdana, Arial, Helvetica, sans-serif;
    background-color:#FFFFFF;
    text-align : justify;
    line-height: 10px;
}
p {
    font-size:11px;
    color: #586885;
    line-height: 120%;
}
hr {
    display:none;
 }
h1 {
    font-size:25px;
    text-align : left;
    color : #666666;
    margin:0;
}
h2 {
    font-size:20px;
    text-align : left;
    color:#486895;
    text-transform: capitalize;
}
h3 {
    font-size:18px;
    text-align : left;
    color : #666666;
}
h4 {
    font-size:15px;
    text-align : left;
    color : #666666;
}
h5 {
    font-size: 13px;
    text-align : left;
    color : #666666;
}
h6 {
    font-size:12px;
    text-align : left;
    color : #666666;
}
td {
    font-size: 12px;
    text-align : center;
    color : #586885;
}
a {
    font-size:12px;
    color:#325FA0;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color:#325FA0;
}
a:hover {
    text-decoration: none;
    color:#000066;
}
a:active {
    text-decoration: none;
    color:#0099CC;
}

Ahora lo que te ocaciona problemas...

Código PHP:


			
#container {
       background-color:#FFFFFF;
       border-style:solid;
       border-color:#000000;
       margin: 0 auto;
       width:1024px;
       height:auto;
}

.header{
       width:1024px;
       height:140px;
       background-color:#2E2EFE;
       border-bottom-style:solid;
       border-bottom-color:#000000;
       margin:0 0 10px 0;
}

.izquierda{
       width:200px;
       height:auto;
       background-color:#EFEFEF;
       border-style:solid;
       border-width:1px;
       border-color:#000000;
       margin:0 0 0 5px;
       float:left;
       padding:3px;
}

.izquierda ul {
       font:bold 11px Verdana, Arial, Helvetica, sans-serif;
       color:#586885;
       line-height: 140%;
       text-transform:capitalize;
}

.derecha{
       width:210px;
       height:auto;
       background-color:#FFFFDD;
       border-style:solid;
       border-width:1px;
       border-color:#000000;
       margin:0 5px 0 0;
       float:right;
       padding:5px;
}

.principal{
       width:548px;
       height:auto;
       background-color:#FFF;
       border-style:solid;
       border-width:1px;
       border-color:#000000;
       margin:0 5px 0 220px;
       padding:10px;
}

.footer{
       width:auto;
       height:30px;
       background-color:#FFF;
       border-style:solid;
       border-width:1px;
       border-color:#000000;
       margin:5px;
}
.footer h6{
       text-align:center;
       text-transform:uppercase;
       margin:5px auto;
       color:#666666;
       font-size:10px;
}

**diegobd** · 20-mar-2011

Dianela, muchas gracias por tu respuesta, tengo un par de preguntas, una es que usted reduce el tamaño de el div del medio, en este caso principal a 548 pxs, quiere esto decir que el error que estaba cometiendo era el darle a la suma de lo ancho de los 3 divs el valor exacto de lo ancho del div contenedor?

La segunda es de ignorancia pura (¡como si la anterior no fuera por lo mismo¡) el codigo que usted pone php, es el mismo para css....el problema es que yo solo se trabajar con el html y el css.

Gracias por tu respuesta y espero sus consejos.
con aprecio.

**Dianela** · 20-mar-2011

Así es, al ser muy grande el DIV, del medio, no deja espacio par el de la derecha, por lo tanto pasa abajo.

No es código PHP.... Sólo HTML y CSS...

**diegobd** · 20-mar-2011

ok, muchas gracias por tu ayuda, creo que ya con tu explicación y paciencia pude solucionar el problema

19-mar-2011	#1
diegobd Ayudante Frecuente Ingreso: septiembre-2010 Mensajes: 135 Sexo: País: Signo: Agradecido: +162	Problema al crear un diseño de pagina con divs en dreamweaver Buenas amigos, les pido el favo de que me ayuden a solucionar el siguiente problema. Quiero diseñar una pagina con divs en dream weaver de la siguiente manera, un primer div que seria el contenedor con un tamaño de 1024 pxs de ancho,los siguientes divs van dentro del div contenedor, un segundo div para el encabezado con 1024 pxs de ancho, un tercer div para el menu lateral con 200pxs de ancho, un cuarto div para el contenido con 614 pxs de ancho, un quinto div para el menu de la derecha con 210 pxs de ancho y un ultimo div para el footer con 1024 pxs de ancho. El problema se da cuando intento insertar el quinto div para el menu de la derecha, pues no me lo deja colocar seguido del div contenido, sino que me lo manda para abajo, y lo que se quiere es que el div del menu lateral izquierdo, el div del contenido y el div del menu derecho queden uno despues del otro de izquierda a derecha. Podra por favor alguien decirme que debo hacer o que error estoy cometiendo. Agradezco su colaboracion.

20-mar-2011	#7
Dianela Administradora Ingreso: abril-2009 Ubicación: Intercambios Virtuales Mensajes: 2.342 Sexo: País: Signo: Agradecido: +6.635	Código HTML: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Tu Pagina</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="base.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div class="header">Header</div> <div class="izquierda">Sidebar-Letf</div> <div class="derecha">Sidebar-Right</div> <div class="principal">Post</div> <div class="footer">Footer</div> </div> </body> </html> Aspectos generales de Diseño: Código PHP: body { font:11px Verdana, Arial, Helvetica, sans-serif; background-color:#FFFFFF; text-align : justify; line-height: 10px; } p { font-size:11px; color: #586885; line-height: 120%; } hr { display:none; } h1 { font-size:25px; text-align : left; color : #666666; margin:0; } h2 { font-size:20px; text-align : left; color:#486895; text-transform: capitalize; } h3 { font-size:18px; text-align : left; color : #666666; } h4 { font-size:15px; text-align : left; color : #666666; } h5 { font-size: 13px; text-align : left; color : #666666; } h6 { font-size:12px; text-align : left; color : #666666; } td { font-size: 12px; text-align : center; color : #586885; } a { font-size:12px; color:#325FA0; } a:link { text-decoration: none; } a:visited { text-decoration: none; color:#325FA0; } a:hover { text-decoration: none; color:#000066; } a:active { text-decoration: none; color:#0099CC; } Ahora lo que te ocaciona problemas... Código PHP: #container { background-color:#FFFFFF; border-style:solid; border-color:#000000; margin: 0 auto; width:1024px; height:auto; } .header{ width:1024px; height:140px; background-color:#2E2EFE; border-bottom-style:solid; border-bottom-color:#000000; margin:0 0 10px 0; } .izquierda{ width:200px; height:auto; background-color:#EFEFEF; border-style:solid; border-width:1px; border-color:#000000; margin:0 0 0 5px; float:left; padding:3px; } .izquierda ul { font:bold 11px Verdana, Arial, Helvetica, sans-serif; color:#586885; line-height: 140%; text-transform:capitalize; } .derecha{ width:210px; height:auto; background-color:#FFFFDD; border-style:solid; border-width:1px; border-color:#000000; margin:0 5px 0 0; float:right; padding:5px; } .principal{ width:548px; height:auto; background-color:#FFF; border-style:solid; border-width:1px; border-color:#000000; margin:0 5px 0 220px; padding:10px; } .footer{ width:auto; height:30px; background-color:#FFF; border-style:solid; border-width:1px; border-color:#000000; margin:5px; } .footer h6{ text-align:center; text-transform:uppercase; margin:5px auto; color:#666666; font-size:10px; } Última edición por Dianela; 20-mar-2011 a las 16:23

Temas Similares
Tema	Autor	Foro	Respuestas	Último mensaje
Manual fspassengers en español	Corbet	AudioLibros, Manuales, Libros & Revistas	4	30-mar-2011 23:57
Diseño de una revista (mini-guía).	Orpheus96	Tutoriales & Videos Tutoriales	1	24-nov-2010 03:17

Usuarios que han agradecido este mensaje de diegobd
baduser (19-mar-2011)

Usuarios que han agradecido este mensaje de Dianela
jchierro (23-mar-2011)

(0 miembros y 1 visitantes)