Foros del Web » Creando para Internet » CSS »

Problemas con Divs..

 Estas en el tema de Problemas con Divs.. en el foro de CSS en Foros del Web. Hola gente, he intentado cambiandole las posiciones a los divs, de flotantes a fijos, absolutos.. nose, de todo, y no consigo lo que quiero.. Cuando ...
  #1 (permalink)  
Antiguo 19/11/2011, 07:41
Avatar de oNefl0w189  
Fecha de Ingreso: abril-2010
Ubicación: Valladolid
Mensajes: 117
Antigüedad: 14 años
Puntos: 4
Problemas con Divs..
Hola gente, he intentado cambiandole las posiciones a los divs, de flotantes a fijos, absolutos.. nose, de todo, y no consigo lo que quiero..

Cuando cambio el texto por la imagen, como veréis a continuacion, se come la página.. (una imagen vale mas que mil palabras).

Así debería quedar [pero con el logo]:
http://imageshack.us/photo/my-images/841/80010614.png/

Y así queda :
http://imageshack.us/photo/my-images/171/59974484.png/


Este es el codigo de la página:
Código HTML: 
Ver original
  1. <body id="page1">
  2. <div class="body3"></div>
  3. <div class="body1">
  4.     <div class="main">
  5. <!-- header -->
  6.         <header>
  7.             <div id="logo_box">
  8.                 <h1><a href="index.php?id=0" id="logo"><img src="images/asir.png"></img><span>Tu soporte informatico a medida</span></a></h1>
  9.             </div>
  10.             <nav>
  11.                 <ul id="menu">
  12. </ul>
  13.             </nav>


Y este es el css:
Código CSS: 
Ver original
  1. #page1 #logo_box{padding:48px 0 32px 0px}
  2. #page1 header nav {top:72px}
  3. #page1 .body3 {background:url(../images/bg_img.png) center top no-repeat;position:absolute;height:415px;width:373px;top:22px;left:50%;margin-left:127px;z-index:10}
  4. #page1 .text1 {padding:199px 0 0 47px}
  5. #page1 #icons {padding:42px 0 0 353px}
  6. #page1 header {padding-bottom:183px}
  7. #logo_box {background:#2c2d2e;padding:38px 0 22px 0px;border-radius:18px;-moz-border-radius:18px;-webkit-border-radius:18px;box-shadow:0 1px 3px #b7b7b7;-moz-box-shadow:0 1px 3px #b7b7b7;-webkit-box-shadow:0 1px 3px #b7b7b7;behavior:url(js/PIE.htc);position:absolute;z-index:2;margin-top:-18px;width:100%;overflow:hidden}
  8. #logo {color:#fff;text-decoration:none}
  9. #logo span {font-size:17px;color:#a6a6a6;vertical-align:baseline}
  10. header nav {border:1px solid #bebebe;background:url(../images/menu_bg.gif) bottom repeat-x;padding-top:36px;height:47px;border-radius:18px;-moz-border-radius:18px;-webkit-border-radius:18px;behavior:url(js/PIE.htc);position:absolute;top:52px;z-index:1;padding-left:10px}
  11. #menu {width:948px}
  12. #menu li {float:left;padding-left:36px;background:url(../images/menu_line.gif) right 18px no-repeat;padding-right:37px}
  13. #menu .bg_none {background:none;padding-right:0;margin-right:0}
  14. #menu li a {display:block;font-size:17px;color:#2c2d2e;text-decoration:none;line-height:47px}
  15. #menu2 li a {display:block;font-size:17px;color:#2c2d2e;text-decoration:none;line-height:47px}
  16. #menu li a:hover, #menu #menu_active a {color:#0665a2}
  17. #menu2 li a:hover, #menu #menu_active a {color:#0665a2}
  18. /* Left & Right alignment */
  19. .left {float:left}
  20. .right {float:right}
  21. .wrapper {width:100%;overflow:hidden}
  22. /* Global properties */
  23. body {background:#fff;border:0;font:14px Arial, Helvetica, sans-serif;color:#6f6f6f;line-height:18px;min-width:960px}
  24. .css3{border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;box-shadow:0 0 4px rgba(0, 0, 0, .4);-moz-box-shadow:0 0 4px rgba(0, 0, 0, .4);-webkit-box-shadow:0 0 4px rgba(0, 0, 0, .4);behavior:url(js/PIE.htc);position:relative}
  25. /* Global Structure */
  26. .main {margin:0 auto;width:960px}
  27. .body1 {background:url(../images/bg_top.jpg) top center no-repeat #eee}
  28. .body2 {background:#f7f7f7}
  29. .body3 {background:url(../images/bg_img2.png) center top no-repeat;position:absolute;height:353px;width:327px;top:13px;left:50%;margin-left:160px;z-index:10}


Si me podeis echar una mano... porque no consigo dejarlo tal cual esta y con el logo.. xD

Aclaro: No me interesa reducir de tamaño el logo, lo que me interesa es que se adapte la página segun su tamaño.. es decir, que si el primer div baja xq se hace grande porque el logo es grande, el segundo div (div de abajo, donde va el menu) baje tambien lo que sea necesario para que quede como tiene que quedar..
  #2 (permalink)  
Antiguo 19/11/2011, 08:22
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: Problemas con Divs..
el problema parece que está aquí
Cita:
#page1 header nav {top:72px}
al darle un top si el logo ocupa mas de 72px se monta encima del menú. prueba a usar un bloque div.

en caso que no esto no funcione, déjanos la url
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #3 (permalink)  
Antiguo 19/11/2011, 11:55
Avatar de oNefl0w189  
Fecha de Ingreso: abril-2010
Ubicación: Valladolid
Mensajes: 117
Antigüedad: 14 años
Puntos: 4
Respuesta: Problemas con Divs..
He probado implementando divs.. de manera disparatada por lo que parece, pues no he podido arreglarlo.. aunque creo que el error Sí que esta ahí.
El problema es que si ajusto manualmente el Top se me mete en la siguiente parte de la página web..

os pongo todo el codigo de la cabecera de la página para que lo veais correctamente (suprimo el php que no sirve para nada...) haber si me podeis decir como implementar exactamente el div para obtener el resultado esperado..

Código HTML: 
Ver original
  1. <div class="body1">
  2.     <div class="main">
  3. <!-- header -->
  4.         <header>
  5.             <div id="logo_box">
  6.                 <h1><a href="index.php?id=0" id="logo"><img src="images/asir.png"></img><span>Tu soporte informatico a medida</span></a></h1>
  7.             </div>
  8.             <nav>
  9.                 <ul id="menu">
  10.                                <?php
  11.                                echo "<li id=\"menu_active\"><a href=\"index.php?id=0\">Inicio</a></li>";
  12.                 echo "<li><a href=\"index.php?id=1\">Quien somos</a></li>";
  13.                 echo "<li><a href=\"index.php?id=2\">Proyectos</a></li>";
  14.                 echo "<li class=\"bg_none\"><a href=\"index.php?id=3\">Contacto</a></li>";
  15.                                 ?>                  
  16.                 </ul>
  17.             </nav>
  18.             <div class="wrapper">
  19.                 <div class="text1">¿Tienes ideas de futuro?</div>
  20.                 <div class="text2">Nosotros trabajos por dar una imagen a tus ideas</div>
  21.                 <ul id="icons">
  22.                     <li><span>Siguenos en:</span></li>
  23.                     <li><a href="#"><img src="images/icon1.jpg" alt=""></a></li>
  24.                     <li><a href="#"><img src="images/icon2.jpg" alt=""></a></li>
  25.                     <li><a href="#"><img src="images/icon3.jpg" alt=""></a></li>
  26.                 </ul>
  27.             </div><div class="ic">Mas informacion en facebook.com</div>
  28.         </header>
  29. <!-- / header -->
  30.     </div>
  31. </div>
  #4 (permalink)  
Antiguo 19/11/2011, 12:21
Avatar de NJS
NJS
 
Fecha de Ingreso: noviembre-2011
Mensajes: 371
Antigüedad: 12 años, 5 meses
Puntos: 28
Respuesta: Problemas con Divs..
Asegúrate de que el logo no es demasiado grande.
si es demasiado grande empuja el div hacia abajo.
__________________
Mejores empresas de Hosting
-=-=-=-=-=-=-=-
Empresas de Hosting
  #5 (permalink)  
Antiguo 19/11/2011, 13:37
Avatar de oNefl0w189  
Fecha de Ingreso: abril-2010
Ubicación: Valladolid
Mensajes: 117
Antigüedad: 14 años
Puntos: 4
Respuesta: Problemas con Divs..
NJS claro que el logo es demasiado grande, ese es el problema, pero lo que me interesa no es disminuir el logo, si no arreglar los divs para que si empuja al div del logo y este baja, bajen todos con el y no se monten unos encima de otros..
  #6 (permalink)  
Antiguo 19/11/2011, 13:42
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: Problemas con Divs..
déjanos la url de web para poder hacer algunas pruebas. por cierto no has metido el menú en un bloque div
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #7 (permalink)  
Antiguo 21/11/2011, 13:53
Avatar de oNefl0w189  
Fecha de Ingreso: abril-2010
Ubicación: Valladolid
Mensajes: 117
Antigüedad: 14 años
Puntos: 4
Respuesta: Problemas con Divs..
Cita:
Iniciado por IsaBelM Ver Mensaje
déjanos la url de web para poder hacer algunas pruebas. por cierto no has metido el menú en un bloque div
Tuve que subirlo a un servidor, ya que trabajaba con ello de manera local.

El link: http://estoengancha.webuda.com

He puesto la imagen, aunque no lo parezca el menú esta debajo.

Espero que con esto puedas hacer las pruebas que me comentas, si necesitas algo mas o quieres saber alguna cosa, no dudes en preguntarmela, agradezco mucho tu ayuda en particular (y la de todo elforo en general).

A ver si me puedes resolver este problemilla ;)
  #8 (permalink)  
Antiguo 21/11/2011, 16:25
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: Problemas con Divs..
haz estos cambios

Cita:
<div id="menu_cont"><nav>
<ul id="menu">
<li id="menu_active"><a href="index.php?id=0">Inicio</a></li><li><a href="index.php?id=1">Quien somos</a></li><li><a href="index.php?id=2">Proyectos</a></li><li class="bg_none"><a href="index.php?id=3">Contacto</a></li>
</ul>
</nav></div>
Cita:
#menu_cont {
top: -30px;
position: relative;
z-index: 1;
border-color: #BEBEBE;
border-bottom-left-radius: 18px;
border-bottom-right-radius: 18px;
border-style: none solid solid solid;
border-width: 0 1px 1px 1px;
}

#logo_box {
background: #2C2D2E;
padding: 38px 0 22px 0px;
border-radius: 18px;
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
box-shadow: 0 1px 3px #b7b7b7;
-moz-box-shadow: 0 1px 3px #b7b7b7;
-webkit-box-shadow: 0 1px 3px #b7b7b7;
behavior: url(js/PIE.htc);
z-index: 2;
margin-top: -18px;
width: 100%;
overflow: hidden;
}

header nav {
background: url(../images/menu_bg.gif) bottom repeat-x;
padding-top: 36px;
height: 47px;
behavior: url(js/PIE.htc);
padding-left: 10px;
}


.text1 {
font-size: 36px;
color: #545454;
line-height: 48px;
letter-spacing: -2px;
}
elimina los selectores
Cita:
header, #page1 #logo_box, #page1 header nav, #page1 .text1
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #9 (permalink)  
Antiguo 21/11/2011, 17:01
Avatar de oNefl0w189  
Fecha de Ingreso: abril-2010
Ubicación: Valladolid
Mensajes: 117
Antigüedad: 14 años
Puntos: 4
Respuesta: Problemas con Divs..
IsaBelM, gracias por tu ayuda, efectivamente se ha "arreglado", pues ahora baja todo conjuntamente, pero como podrás ver en la web (la he actualizado) queda bastante mal visualmente, se ha roto toda la estética que tenia antes, supongo que será por los selectores que hemos borrado, aunque yo creí que los habrías incluido en los nuevos que creaste, pero parece ser que lago falla..

Debido a las horas que son ya no me voy a poner con ello, mañana intentaré rematar la faena a ver si puedo dejarlo como debería, aunque creo que va a estar un poco dificil porque no me llevo muy bien con los CSS jeje.

Si me puedes echar tu una manita.. te lo agradezco ;)
  #10 (permalink)  
Antiguo 22/11/2011, 06:14
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: Problemas con Divs..


haz esto cambios
Cita:
#menu_cont {
top: -12px;
position: relative;
z-index: 1;
border-color: #BEBEBE;
border-bottom-left-radius: 18px;
border-bottom-right-radius: 18px;
border-style: none solid solid solid;
border-width: 0 1px 1px 1px;
background: url(../images/menu_bg.gif) bottom repeat-x;
padding-top: 6px;
height: 47px;
}


header nav {
behavior: url(js/PIE.htc);
padding-left: 10px;
}


.text1 {
font-size: 36px;
color: #545454;
padding: 30px 0 0 47px;
line-height: 48px;
letter-spacing: -2px;
}
pd: tienes muchas reglas repetidas. eliminalas
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #11 (permalink)  
Antiguo 22/11/2011, 08:12
Avatar de oNefl0w189  
Fecha de Ingreso: abril-2010
Ubicación: Valladolid
Mensajes: 117
Antigüedad: 14 años
Puntos: 4
Respuesta: Problemas con Divs..
Revisaré los CSS para ver incoherencias (reglas repetidas, como me comentas).
He probado tu último post y funciona correctamente, pero hay un pequeño detalle que no esta del todo bien.

Si te fijas, en la página como debería ir, el Div que es negro tiene la esquinas redondeadas, mientras que con el CSS que me pasaste, es cuadrado.
  #12 (permalink)  
Antiguo 22/11/2011, 09:06
Avatar de oNefl0w189  
Fecha de Ingreso: abril-2010
Ubicación: Valladolid
Mensajes: 117
Antigüedad: 14 años
Puntos: 4
Respuesta: Problemas con Divs..
Por cierto IsaBelM, tengo otro problemilla, si le echas un ojo a la página de www.estoengancha.webuda.com lo verás rápidamente, el caso es que ahora al implementar el resto de la página el eslogan de "Tienes ideas de futuro blablabla.." se baja tambien :S xD
  #13 (permalink)  
Antiguo 22/11/2011, 11:17
Avatar de horacio11  
Fecha de Ingreso: enero-2011
Ubicación: provincia de buenos aires
Mensajes: 9
Antigüedad: 13 años, 3 meses
Puntos: 0
Respuesta: Problemas con Divs..
mira estuve viendo tu problema q se te superponen los divs una solución posible seria esta:
Código HTML: 
Ver original
  1. Al div con class="text1" modificar  su padding-top por este  padding-top: 25px;
  2. y Al div con id="contenido" agregar un margin-top=150;

Saludos espero que te haya servido mi respuesta
  #14 (permalink)  
Antiguo 22/11/2011, 13:53
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: Problemas con Divs..
vamos por partes
  • la url que dejas ya no existe
  • para el primer problema (en #menu_cont se trata de ir modificando las propiedades top y padding-top)
  • el segundo problema no comprendo como te está ocurriendo eso
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #15 (permalink)  
Antiguo 23/11/2011, 13:20
Avatar de oNefl0w189  
Fecha de Ingreso: abril-2010
Ubicación: Valladolid
Mensajes: 117
Antigüedad: 14 años
Puntos: 4
Respuesta: Problemas con Divs..
Cita:
Iniciado por horacio11 Ver Mensaje
mira estuve viendo tu problema q se te superponen los divs una solución posible seria esta:
Código HTML: 
Ver original
  1. Al div con class="text1" modificar  su padding-top por este  padding-top: 25px;
  2. y Al div con id="contenido" agregar un margin-top=150;

Saludos espero que te haya servido mi respuesta
Horacio lo he probado y no he obtenido resultado, los textos seguian en el mismo sitio, no se movieron. :S

Si puedes especificar más tu respuesta..
  #16 (permalink)  
Antiguo 23/11/2011, 13:33
Avatar de oNefl0w189  
Fecha de Ingreso: abril-2010
Ubicación: Valladolid
Mensajes: 117
Antigüedad: 14 años
Puntos: 4
Respuesta: Problemas con Divs..
Cita:
Iniciado por IsaBelM Ver Mensaje
vamos por partes
  • la url que dejas ya no existe
  • para el primer problema (en #menu_cont se trata de ir modificando las propiedades top y padding-top)
  • el segundo problema no comprendo como te está ocurriendo eso
IsaBelM revisa tu caché o algo de eso, porque la url www.estoengancha.webuda.com he comprobado que funciona correctamente :S
  #17 (permalink)  
Antiguo 23/11/2011, 13:35
Avatar de oNefl0w189  
Fecha de Ingreso: abril-2010
Ubicación: Valladolid
Mensajes: 117
Antigüedad: 14 años
Puntos: 4
Respuesta: Problemas con Divs..
Haber os comento la situación:

* He resuelto el problema de las esquinas. (el div blanco estaba encima del negro, con unas modificaciones esta echo).

* Persigue el problema del Eslogan "Tienes ideas de futuro? blablabla.."
Se ha bajado hacia abajo y no consigo arreglarlo..


PD: podeis mirar las modificaciones en www.estoengancha.webuda.com
  #18 (permalink)  
Antiguo 23/11/2011, 14:18
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: Problemas con Divs..
ahora he podido entrar. con respecto al primer problema, lo veo igual. es decir con el contenedor blanco solapando al negro.

el segundo problema se resuelve con
Cita:
elimina esta clase
#page1 .marg_top {
margin-top: -150px;
}

en estas otras
.marg_top {
position: relative;
z-index: 11;
}

.wrapper {
width: 100%;
overflow: hidden;
}
<offtopic>el layout es un desastre</offtopic>
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #19 (permalink)  
Antiguo 23/11/2011, 14:31
Avatar de oNefl0w189  
Fecha de Ingreso: abril-2010
Ubicación: Valladolid
Mensajes: 117
Antigüedad: 14 años
Puntos: 4
Respuesta: Problemas con Divs..
Ya lo he arreglado, os dejo los cambios de CSS que he echo:

Código CSS: 
Ver original
  1. .down { position:absolute; bottom:60px;}
  2. #prueba {position:relative;padding-bottom:200px;}
  3. #contenido {position:relative;}
  4. #logo_box {
  5. position: relative;
  6. background: #2C2D2E;
  7. padding: 38px 0 22px 0px;
  8. border-radius: 18px;
  9. -moz-border-radius: 18px;
  10. -webkit-border-radius: 18px;
  11. box-shadow: 0 1px 3px #b7b7b7;
  12. -moz-box-shadow: 0 1px 3px #b7b7b7;
  13. -webkit-box-shadow: 0 1px 3px #b7b7b7;
  14. behavior: url(js/PIE.htc);
  15. z-index: 2;
  16. margin-top: 0px;
  17. width: 100%;
  18. }
  19. #menu_cont {
  20. top: -13px;
  21. position: relative;
  22. z-index: 1;
  23. border-color: #BEBEBE;
  24. border-bottom-left-radius: 18px;
  25. border-bottom-right-radius: 18px;
  26. border-style: solid solid solid solid;
  27. border-width: 0 1px 1px 1px;
  28. background: url(../images/menu_bg.gif) bottom repeat-x;
  29. padding-top: 10px;
  30. height: 47px;
  31. }
  32. header nav {
  33. behavior: url(js/PIE.htc);
  34. padding-left: 10px;
  35. }
  36. .text1 {font-size:36px;color:#545454;padding:17px 0 0 35px;line-height:48px;letter-spacing:-2px}

y os dejo tambien el html:
Código HTML: 
Ver original
  1. <div id="prueba">
  2.             <div class="wrapper">
  3.                 <div class="text1">¿Tienes ideas de futuro?</div>
  4.                 <div class="text2">Nosotros trabajos por dar una imagen a tus ideas</div>
  5.                 <ul id="icons">
  6.                     <li><span>Siguenos en:</span></li>
  7.                     <li><a href="http://es-es.facebook.com/people/Grupo-Asir/612234882"><img src="images/icon1.jpg" alt=""></a></li>
  8.                     <li><a href="#"><img src="images/icon2.jpg" alt=""></a></li>
  9.                     <li><a href="#"><img src="images/icon3.jpg" alt=""></a></li>
  10.                 </ul>
  11.             </div><div class="ic">Mas informacion en facebook.com</div>
  12.             </div>
  13.         </header>
  14. <!-- / header -->
  15.     </div>
  16. </div>
  17. <!-- Contenido -->
  18. <div id="contenido">
  19. </div>


Muchas gracias a todos por vuestra ayuda.

Etiquetas: hover, fondo
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 00:18.