Divs desalineados

cfoch · #1 (**permalink**) 28/07/2011, 00:19

Hola... he googleado tanto y no se como conseguirlo. En el código que pondré a continuación yo quisiera que el div "logo" ocupe toque el borde de la ventana del navegador y que el div "registrar" esté justo debajo del div "logo" sin dejar ningún espacio. Pero no me sale. ¿Qué falta a este codigo?

Código HTML:

Ver original<head>
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
<div class="logo" align="center">
<h1><strong>BLINDATE</strong></h1>
</div>
<div class="registrar" align="center">
<IMG align="center" src="anonimo.jpg" border="0" height="200" width="150">
<form method="post" action="registrar.php">
<p>Nombre: <input name="nombre" type="text" /></p>
<p>Edad: <input name="edad" type="text" /></p>
<p>e-mail: <input name="email" type="text" /></p>
<p>Sexo: <select name="forma" id="forma">
<option value="sex_h">Hombre</option>
<option value="sex_m">Mujer</option>
<option value="sex_g">Gay</option>
<option value="sex_l">Lesbiana</option>
</select></p>
<p>Me interesa: <select name="forma" id="forma">
<option value="int_hom">Hombre</option>
<option value="int_muj">Mujer</option>
<option value="int_gay">Gay</option>
<option value="int_les">Lesbiana</option>
</select></p>
<p><input type="submit" /></p>
</form>
</div>
</body>

Código CSS:

Ver originaldiv.logo {
    background-color: #FF8000;
    position:absolute;
    top:0;
    left:0;
    height: 15%;
    width: 100%;
}
 
div.logo h1 {
    color: #ff0000;
    font: bold 40px arial, sans-serif;
}
 
div.registrar {
    background-color: #81BEF7
 
}

Gracias de antemano... Felices fiestas a los de Perú ;)

Batan · #2 (**permalink**) 28/07/2011, 02:46

Buenas.
cuando dices que no quieres ningun espacio, te refieres al espacio que hay entre el div Logo y el div Registrar?

Saludos

cfoch · #3 (**permalink**) 28/07/2011, 02:57

Exacto... tampoco quiero que haya espacios entre los limites de la ventana y el fondo

Batan · #4 (**permalink**) 28/07/2011, 03:03

Añade esto a tu .css

Código CSS:

Ver originalbody{margin: 0px;}

Prueba y me dices.
De esta manera el body del documento html no cogerá ningun margen.

Saludos

cfoch · #5 (**permalink**) 28/07/2011, 03:16

No... pero casi... como quito el espaciado de arriba y dejo ese fondo celeste en todo el resto de la pantalla?

Código CSS:

Ver originalbody{
    margin: 0px;
}
div.logo {
    background-color: #FF8000;
    position:relative;
    top:0;
    left:0;
    height: 15%;
    width: 100%;
}
 
div.logo h1 {
    color: #ff0000;
    font: bold 40px arial, sans-serif;
}
 
div.registrar {
    background-color: #81BEF7;
    position: relative;
 
}

Batan · #6 (**permalink**) 28/07/2011, 03:22

H1 tiene por defecto un margen y con tu height lo que has echo es aumentar ese margen

Cambialo a este

Código CSS:

Ver originaldiv.logo {
        background-color: #FF8000;
        position:absolute;
        top:0;
        left:0;
        height: auto;
        width: 100%;
    }
     
    div.logo h1 {
        margin: 0px;
        color: #ff0000;
        font: bold 40px arial, sans-serif;
    }

Y el fondo azul claro

Código CSS:

Ver originalbody{
margin: 0px;
background-color: #81BEF7;
}

Asi haras que la etiqueta body que totalmente al fondo que tu querias, y quitale el brackground-color al DIV registrar.

Haber si es eso lo que quieres.
Saludos

cfoch · #7 (**permalink**) 28/07/2011, 03:32

Gracias... funcion de maravilla. Muchas gracias

Batan · #8 (**permalink**) 28/07/2011, 03:37

De nada.
Yo tambien soy de Perú, asi que feliz día.