Foros del Web » Creando para Internet » CSS »

Divs desalineados

Estas en el tema de Divs desalineados en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/07/2011, 00:19
 
Fecha de Ingreso: octubre-2008
Mensajes: 42
Antigüedad: 9 años
Puntos: 0
Pregunta Divs desalineados

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
  1. <link rel="stylesheet" type="text/css" href="estilo.css" />
  2. </head>
  3. <div class="logo" align="center">
  4. <h1><strong>BLINDATE</strong></h1>
  5. </div>
  6. <div class="registrar" align="center">
  7. <IMG align="center" src="anonimo.jpg" border="0" height="200" width="150">
  8. <form method="post" action="registrar.php">
  9. <p>Nombre: <input name="nombre" type="text" /></p>
  10. <p>Edad: <input name="edad" type="text" /></p>
  11. <p>e-mail: <input name="email" type="text" /></p>
  12. <p>Sexo: <select name="forma" id="forma">
  13. <option value="sex_h">Hombre</option>
  14. <option value="sex_m">Mujer</option>
  15. <option value="sex_g">Gay</option>
  16. <option value="sex_l">Lesbiana</option>
  17. </select></p>
  18. <p>Me interesa: <select name="forma" id="forma">
  19. <option value="int_hom">Hombre</option>
  20. <option value="int_muj">Mujer</option>
  21. <option value="int_gay">Gay</option>
  22. <option value="int_les">Lesbiana</option>
  23. </select></p>
  24. <p><input type="submit" /></p>
  25. </form>
  26. </div>
  27. </body>

Código CSS:
Ver original
  1. div.logo {
  2.     background-color: #FF8000;
  3.     position:absolute;
  4.     top:0;
  5.     left:0;
  6.     height: 15%;
  7.     width: 100%;
  8. }
  9.  
  10. div.logo h1 {
  11.     color: #ff0000;
  12.     font: bold 40px arial, sans-serif;
  13. }
  14.  
  15. div.registrar {
  16.     background-color: #81BEF7
  17.  
  18. }


Gracias de antemano... Felices fiestas a los de Perú ;)
  #2 (permalink)  
Antiguo 28/07/2011, 02:46
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 7 años, 1 mes
Puntos: 63
Respuesta: Divs desalineados

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

Saludos
  #3 (permalink)  
Antiguo 28/07/2011, 02:57
 
Fecha de Ingreso: octubre-2008
Mensajes: 42
Antigüedad: 9 años
Puntos: 0
Respuesta: Divs desalineados

Exacto... tampoco quiero que haya espacios entre los limites de la ventana y el fondo
  #4 (permalink)  
Antiguo 28/07/2011, 03:03
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 7 años, 1 mes
Puntos: 63
Respuesta: Divs desalineados

Añade esto a tu .css

Código CSS:
Ver original
  1. body{margin: 0px;}

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

Saludos
  #5 (permalink)  
Antiguo 28/07/2011, 03:16
 
Fecha de Ingreso: octubre-2008
Mensajes: 42
Antigüedad: 9 años
Puntos: 0
Respuesta: Divs desalineados

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 original
  1. body{
  2.     margin: 0px;
  3. }
  4. div.logo {
  5.     background-color: #FF8000;
  6.     position:relative;
  7.     top:0;
  8.     left:0;
  9.     height: 15%;
  10.     width: 100%;
  11. }
  12.  
  13. div.logo h1 {
  14.     color: #ff0000;
  15.     font: bold 40px arial, sans-serif;
  16. }
  17.  
  18. div.registrar {
  19.     background-color: #81BEF7;
  20.     position: relative;
  21.  
  22. }
  #6 (permalink)  
Antiguo 28/07/2011, 03:22
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 7 años, 1 mes
Puntos: 63
Respuesta: Divs desalineados

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 original
  1. div.logo {
  2.         background-color: #FF8000;
  3.         position:absolute;
  4.         top:0;
  5.         left:0;
  6.         height: auto;
  7.         width: 100%;
  8.     }
  9.      
  10.     div.logo h1 {
  11.         margin: 0px;
  12.         color: #ff0000;
  13.         font: bold 40px arial, sans-serif;
  14.     }

Y el fondo azul claro

Código CSS:
Ver original
  1. body{
  2. margin: 0px;
  3. background-color: #81BEF7;
  4. }

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
  #7 (permalink)  
Antiguo 28/07/2011, 03:32
 
Fecha de Ingreso: octubre-2008
Mensajes: 42
Antigüedad: 9 años
Puntos: 0
Respuesta: Divs desalineados

Gracias... funcion de maravilla. Muchas gracias
  #8 (permalink)  
Antiguo 28/07/2011, 03:37
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 7 años, 1 mes
Puntos: 63
Respuesta: Divs desalineados

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

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:55.