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