Problema con plantilla

emiliodeg · #1 (**permalink**) 30/05/2006, 14:54

estoy preparando una plantilla para un sitio, la cual tiene q estar hecha con bloques, la idea es la siguiente, el sitio se tiene q acomodar a cualquier resoluicon de pantalla por lo cual, tiene q haber 2 pequeñas barritas al costado de fondo gris, luego el encabezado ancho 100% y 160px de alto, al medio 3 barras las 2 barras laterales son de ancho fijo (200px) mientras la barra central tendra el ancho restante para meterse al medio de las dos barras laterales, y finalmente el pie con 160px de alto y 100% del ancho, yo lo hice pero no me queda tan bien aomodado como deberia estar les dejo el codigo para ver si me pueden ayudar ya q estas cosas de css siempre me complicaron la existencia

plantilla.html

Código PHP:

  <html> 
<head> 
    <title></title> 
    <link href="estilos.css" type="text/css" rel="stylesheet" /> 
</head> 
<body> 
<div id="fondo"> 
<div id="contenedor"> 
<div id="encabezado">encabezado</div> 
<div id="barraIzq">menu en barra izquierda</div> 
<div id="main">contenido principal</div> 
<div id="barraDer">menu barra derecha</div> 
<div id="pie">pie de la pagina</div> 
</div> 
</div> 
</body> 
</html>

estilos.css

Código PHP:

  body { 
    margin:0px 0px 0px 0px; 
} 
#fondo { 
    background-color:#DADADA; 
    width:100%; 
    height:100%; 
    text-align:center; 
} 
#contenedor { 
    background-color:#FFF; 
    width:96%; 
    height:100%; 
} 
#encabezado { 
    width:100%; 
    height:160px; 
    border:1px solid #F00; 
} 
#barraIzq { 
    width:200px; 
    border:1px solid #0F0; 
    float:left; 
} 
#main { 
    width:100%; 
    border:1px solid #000; 
} 
#barraDer { 
    width:200px; 
    border:1px solid #00F; 
    float:right; 
} 
#pie { 
    width:100%; 
    height:160px; 
    border:1px solid #3399CC; 
}

fijense q cuando muestran la pagina salen mal acomodados los bloques el "barraDer" sale abajo en vez de aparecer a la derecha del main
le puse unos bordes de colores para ver nada msa donde estan los bloques, pero se sacaran luego del codigo cuando este termianda la plantialla
saludos

dario-g · #2 (**permalink**) 07/06/2006, 19:15

cuando defines la parte de contenido central, le indicas que ocupe el 100%

#main {
width:100%;
border:1px solid #000;}

que es lo que hace y por eso el bloque de la derecha queda abajo, una manera seria que las de la dereche tuviera medida relativa asi tendria un ancho de 20% y el principal de 80%, solo ten cuidado con las diferentes implementaciones de los estandares entre iexplorer y mozilla