¿porque me pasa esto en HTML y CSS?

nico123 · #1 (**permalink**) 23/12/2013, 07:08

Hola!!!!. Ayer estaba haciendo una pagina de inicio para mi navegador, y, como otras veces, los div se metian uno debajo del otro, como en la siguiente imagen:

http://k39.kn3.net/9/C/F/3/F/5/F1B.png

Trate de solucionarlo poniendoles (a algunos div) position: relative; , pero yo tenia una "barra horizontal" con width: 100%; y height: 100px; y position: absolute, pero al cambiarla a relative se creaban unos margenes entre esa "barra". ¿Cual puede ser la solucion? Aca esta el codigo fuente:

Código HTML:

Ver original<html>
<head>
    <title>ttulo</title>
<style type="text/css">
    body
    {
        background-color: white;
        text-align: center;
    }
    #cabecera
    {
        width: 100%;
        height: 80px;
        background-color: transparent;
        border-bottom: 2px solid black;
        position: absolute;
        top: 0;
        left: 0;
    }
    #contenedor
    {
        width: 1000px;
        height: auto;
        background-color: red;
        text-align: left;
        margin: auto;
    }
    #panel
    {
        width: 700px;
        height: auto;
        margin: auto;
        background-color: blue;
    }
</style>
</head>
<body>
    <div id="cabecera">   
    </div>
    <div id="contenedor">
        <h1>Encabezado 1</h1>
        <p>Parrafo de prueba 1</p>
        <p>Parrafo de prueba 2</p>
    </div>
    <div id="panel">
        <h2>adsdadsadas</h2>
    </div>
</body>
</html>

TSG · #2 (**permalink**) 23/12/2013, 07:33

La imagen no se ve, si pudieras arreglarla.

Saludos.

nico123 · #3 (**permalink**) 23/12/2013, 07:38

Cita:

Iniciado por TSG

La imagen no se ve, si pudieras arreglarla.

Saludos.

Creo que puedo describirtela, lo intentare :D.

Tengo la cabecera por encima de todo, pero luego al crear el div "contenedor", este se queda "ocupando" la primer linea del documento, en vez de posicionarse debajo del div "cabecera". Tambien tengo el div "panel", que este si se coloca por debajo del div "contenedor". ¿que puede estar pasando?. Gracias!!! :D

pzin · #4 (**permalink**) 23/12/2013, 07:51

Pues pasa que así funcionan las posiciones absolutas; salen del flujo natural del documento.

Tal como lo tienes, tanto la cabecera como el contenedor están "en la primera linea del documento".

Así que si le quitas esa posición absoluta se verá como esperas que se vea.

nico123 · #5 (**permalink**) 23/12/2013, 07:56

Cita:

Iniciado por pzin

Pues pasa que así funcionan las posiciones absolutas; salen del flujo natural del documento.

Tal como lo tienes, tanto la cabecera como el contenedor están "en la primera linea del documento".

Así que si le quitas esa posición absoluta se verá como esperas que se vea.

Eso lo entiendo, pero solo la cabecera tiene position: absolute; , y si le pongo relative se crea un margen entre la cabecera y el borde del navegador, y cuando quito zoom (-50, -25 etc...) la cabecera si queda en width: 100%, mostrandose a lo largo de la pantalla, pero con los margenes o espacios en blanco, ¿como se quita ese "espacio en blanco" con position: relative; ?

pzin · #6 (**permalink**) 23/12/2013, 08:13

Supongo que te refieres al margen de body:

Código CSS:

Ver originalbody {
  margin: 0;
}

nico123 · #7 (**permalink**) 23/12/2013, 08:18

Cita:

Iniciado por pzin

Supongo que te refieres al margen de body:

Código CSS:

Ver originalbody {
  margin: 0;
}

Cierto!!!!, ¿entonces esta bien usar position: relative para los div o hay otra manera?. Me salvaste con lo de los margenes!!!!!!!!!!!

nico123 · #8 (**permalink**) 23/12/2013, 08:48

Una ultima pregunta. Esa misma pagina que dije que estaba haciendo, ya solucione lo de los div, pero ahora el problema es que unos botones (algo similar a los de la cabecera de esta pagina) se ven como yo quiero en Google Chrome y en IE, pero en Firefox se ven mas abajo. ¿hay alguna forma de hacer una hoja de estilos aparte para Firefox?

pzin · #9 (**permalink**) 23/12/2013, 15:08

Cita:

Iniciado por nico123

Cierto!!!!, ¿entonces esta bien usar position: relative para los div o hay otra manera?. Me salvaste con lo de los margenes!!!!!!!!!!!

¿Otra manera de hacer qué cosa? La mayoría de las veces hay una manera correcta de hacer algo, de que salga como uno quiere muchas, pero correcta, la gran mayoría de las veces, una forma.

Cita:

Iniciado por nico123

Una ultima pregunta. Esa misma pagina que dije que estaba haciendo, ya solucione lo de los div, pero ahora el problema es que unos botones (algo similar a los de la cabecera de esta pagina) se ven como yo quiero en Google Chrome y en IE, pero en Firefox se ven mas abajo. ¿hay alguna forma de hacer una hoja de estilos aparte para Firefox?

Y esto que comentas seguramente tenga relación con mi respuesta de arriba; si usas una de las mil otras formas, pueden ocurrir cosas no deseadas, ya sea con el tiempo, añadiendo otros elementos, diferencias entre navegadores, etc. Otra hoja para según qué navegador suele ser un parche malillo.