Tema: Problemas con Divs..
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 19/11/2011, 07:41
Avatar de oNefl0w189
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..