Maquetacion. Noob Question

kelevrabonloup · #1 (**permalink**) 05/10/2012, 10:10

Tengo una estructura:

Código HTML:

Ver original<body>
        <div id="cont">
            <div id="topbar">
            </div>
            <div id="menu">
            </div>
            <div id="call">
            </div>
            <div id="rigthcont">
            </div>
            <div id="upperfoot">
            </div>
            <div id="foot">
            </div>
            <div id="clean">
            </div>
        </div>
    </body>

Con el reset css y el css mio que seria:

Código CSS:

Ver original#cont {
    position: relative;
    width: 1000px;
    height: 100%;
    background-color: dark;
    margin: 10 auto 5 auto;
    padding: 0;
 }
#topbar {
    padding: 0px;
    width: 1000px;
    height: 85px;
    background-color: transparent;
    margin: 0;
}
#menu {
  padding: 0px;
  width: 1000px;
  height: 65px;
  background-color: transparent;
  float: left;
}
#call {
  padding: 0px;
  width: 850px;
  height: 400px;
  background-color: transparent;
  float: left;
}
#rigthcont {
  padding: 0px;
  width: 150px;
  height: 400px;
  background-color: transparent;
  float: left;
}
#upperfoot {
  padding: 0px;
  width: 1000px;
  height: 110px;
  background-color: transparent;
  float: left;
}
#foot {
  padding: 0px;
  width: 1000px;
  height: 25px;
  background-color: transparent;
  float: left;
}
#clean {
  clear:both;
}

El problema es que la div id=cont, con el height: 100%; Segun me enseñaron, deberia hacer que fuera del largo total del resto de las div...

Pero Google chrome, hace que me quede mas chica, y no entiendo mi error, puesto que solo la hace mas chica cuando habro la herramienta para desarrolladores, es como que, cuando habro una ventana o algo del explorador, me la achica a la div contendora porque se achica la visualizacion de la pagina, y me pone los scrollbars para bajar y subir (y eso no esta mal, lo que esta mal es que el pie, y el pie superior me quedan afuera de la div contenedora aunque no se vee feo (con exepcion, de que tienen fondo blanco, cuando la contenedora tiene fondo azul, y yo le pongo a todo lo demas fondo trasparente...)

pelao777 · #2 (**permalink**) 07/10/2012, 14:47

Envia el ejemplo en línea para entender tu situación...

Saludos

#3 (**permalink**) 07/10/2012, 16:34

Un height 100% nunca te va a funcionar, te recomiendo buscar hacks para hacer esto.

Por ejemplo, mirando tu código veo que la capa la usas para poner el contenido ahí como si fuese el body, pues podrías dejar solamente el body.

Por otro lado supongo que te gustarí centrar esa capa y tal vez sería importantisima, pues mi sugerencia es la siguiente:

Convierte tu capa en absoluta y aplica top de 0 y bottom de 0, esto forzará a tu capa un height de 100% y sin usar la propiedad height (ojo, con IE7 no funciana, pero a quien le importa? ). ej.

Código CSS:

Ver original#cont {
    position: absolute;
    width: 1000px;
    height: auto;
    background-color: dark;
    margin: auto;
    padding: 0;
    top: 10px; bottom: 5px;
 }

Otra cosa, al no declarar las propiedades left y rigth esta capa se centrará al tener margin auto y una anchura fija.

Saludos.

C2am · #4 (**permalink**) 08/10/2012, 14:22

Cita:

Iniciado por danneg

Convierte tu capa en absoluta y aplica top de 0 y bottom de 0, esto forzará a tu capa un height de 100% y sin usar la propiedad height (ojo, con IE7 no funciana, pero a quien le importa? ). ej.

Código CSS:

Ver original#cont {
    position: absolute;
    width: 1000px;
    height: auto;
    background-color: dark;
    margin: auto;
    padding: 0;
    top: 10px; bottom: 5px;
 }

Saludos.

Una caja (no capa) contenedora general como la que presenta ¿en posición absoluta???, mmm, la verdad que no estoy de acuerdo con vos.

Bueno, probe con código que dejas kelevrabonloup y no pude visualizar en Chrome el error que comentas. En el único momento que el pie se sale del div contenedor es cuando el contenido no cabe en la altura asignada del foot de 25px. Ahí sí el contenido de foot queda por fuera del contenedor general.

#5 (**permalink**) 08/10/2012, 20:44

C2am
Caja, capa, contenedor divisor, pues hasta ahora no le encuentro sentido discutir por eso, en la actualidad al elemento A le dicen link, vinculo, enlace, etc, cuando en realidad se llama anchor (ancla).

Y bueno, me gustaría saber por que no es una buena idea el position absolute? si observa detenidamente el código vez que no afecta a nada y que ademas se usa el height 100% (el cual no es soportado en muchos navegadores, no sólo en chrome).

Ademas por algo existe el position absolute y es bastante útil cuando se sabe utilizar bien, por ejemplo: los menus de este foro tienen un position absolute ;) ...

Igual si tienes una mejor idea pues para eso estamos, para aprender ;)

C2am · #6 (**permalink**) 08/10/2012, 21:19

La verdad que no soy experto, así que no podría darte una clase de css.
Pero me gusta, para comprender mejor las cosas llamarlas por su nombre, sobre todo cuando existe una diferencia fundamental que hace a la base de lo que se está hablando.

La corrección no es por decir "yo sé más que vos", sino para que vayamos, todos, acostumbrándonos a los términos correctos.

En html -css se habla de Modelo de Cajas, de ahí que no sea capa, sino caja. Solo por eso, además que al estar acostumbrado a layers o capas en programas como autocad, se me hace que capa tiene más que ver con el nivel (en el eje z) que con un contenedor o caja.

Sobre la position:absolute, pues en mi forma de ver, no digo que no se deba usar, sino que debe usarse cuando se requiere precisión en colocar un elemento, sobre todo debido a diseño, pero coincido que cuando realmente se sabe usar no hay problemas.

Ahora, también se debe tener en cuenta que al posicionar algo en forma absoluta, el resto de los elementos la ignoran, con lo cual el trabajo es más engorroso, ya que al modificar dicho elemento deberemos estar modificando (re posicionando) todo el resto.
En cambio con relative, de por sí, el resto se acomoda a la caja que hemos modificado.

Pero todo es relativo.

Sobre lo de height al 100%, pues la verdad que no ví/entendí cual era el problema. Lo que sí, es que, sí es soportado por todos los navegadores, pero no como el sentido común nos dicta.

Cita:

"Cuando un elemento establece su altura mediante un porcentaje, la referencia que se toma es la altura de su elemento contenedor. Sin embargo, si ese elemento contenedor no tiene establecida una altura de forma explícita, se ignora la altura en porcentaje y se sustituye por el valor auto.

"

http://www.librosweb.es/referencia/css/height.html

Saludos

kelevrabonloup · #7 (**permalink**) 10/10/2012, 06:07

Cita:

Iniciado por C2am

Bueno, probe con código que dejas kelevrabonloup y no pude visualizar en Chrome el error que comentas. En el único momento que el pie se sale del div contenedor es cuando el contenido no cabe en la altura asignada del foot de 25px. Ahí sí el contenido de foot queda por fuera del contenedor general.

Aparentemente, ese fue mi problema...El foot de 25 px, junto a un problema de instalacion y de mi pc (no se cual)

PD: Estoy evaluando los demas comentarios, sobre la modificacion de las cajas, y bueno, supongo que postergare la realizacion de la pagina para solo dedicarme a leer la teoria de los codigos.

Muchas gracias por los comentarios y consejos!