Tema: ayuda con estructura con divs y css
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 08/11/2010, 06:38
lmerli
 
Fecha de Ingreso: junio-2006
Ubicación: España
Mensajes: 122
Antigüedad: 17 años, 11 meses
Puntos: 2
ayuda con estructura con divs y css
Hola, tengo creada todo el cuerpo que quería para mi pagina, el container el ancho lo tengo fijo a 1000px y de altura lo tengo al 100%, tengo una cabezera, dos laterales (izquirda, derecha), el centro donde ira el contenido de la pagina y el pie de pagina.
la estructura es como se puede ver en la imagen 1

[URL="http://img801.imageshack.us/img801/5562/imagen1pi.jpg"]imagen 1[/URL]

en el cuerpo he metido mucho texto, para ver como quedaba, pero mi sorpresa es que quedó descuadrado, y el contenedor se va luego hacia la izquirda, invadiendo el espacio del laterial izquierdo. ([URL="http://img440.imageshack.us/img440/2571/imagen2qo.jpg"]ver imagen 2[/URL])

esto me pasa con el Mozilla Firefox, en canvio con el IE version 8, el contenedor respeta el texto al centro, pero el texto empieza muy abajo. Llevo un quebrado d cabeza, ya no sé por donde pueden ir los tiros. espero que alguien sepa orientarme e ayudarme.

también lo que he intentado y no he podido es poner el form text y el submit en una misma linea, es decir poner la lupa al lado del input.

adjunto codigos:

Código HTML: 
Ver original
  1. <html>
  2. <head>
  3. <title></title>
  4. <link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />
  5. </head>
  6. <body>
  7.  
  8. <div id="contenedor">
  9.  
  10. <div id="cabecera">Esta es la cabecera</div>
  11. <div id="barralateraliz">
  12.  
  13.  
  14. <div id="nav">
  15.  
  16.     <div class="p-sideitem">
  17.         <div class="p-boxhead">
  18.                 <div class="p-headfill"></div>
  19.         </div>
  20.         
  21.         <div class="p-boxbody">
  22.             
  23.                 <div id="search">
  24.                     <form method="get" action="">
  25.                         <fieldset>
  26.                             <input type="text" name="s" id="search-text" size="15" />
  27.                             <input type="submit" id="search-submit" value="Buscar" />
  28.                         </fieldset>
  29.                     </form>
  30.                     busqueda avanzada
  31.                 </div>  
  32.         </div>
  33.     </div>
  34.  
  35.  
  36. </div> <!-- end nav -->
  37.  
  38.  
  39. </div> <!--aqui termina div barralateral iz -->
  40.  
  41.  
  42.  
  43. <div id="barralateralde">Esta es la barra lateral derecha</div>
  44.  
  45.  
  46. <div id="contenido">aqui el contenido</div>
  47. <div id="pie">Este es el pie de pagina</div>
  48.  
  49.  
  50.  
  51.  
  52.  
  53.  
  54.  
  55. </div> <!-- aqui termina CONTENEDOR -->
  56. </body>
  57. </html>







Código CSS: 
Ver original
  1. html,body{
  2.     margin: 0;
  3.     padding: 0;
  4.     background-color: #8EB7DA;
  5. }
  6.  
  7.  
  8.  
  9. body {
  10.     font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Verdana, Helvetica, sans-serif;
  11.     font-size: 12px;
  12.     color: #333; /*color letra*/
  13.     text-align: center;
  14. }
  15.  
  16.  
  17.  
  18.  
  19. #nav {
  20.     padding-left: 0px;
  21.     padding-right: 0px;
  22.     float: left;
  23.     width: 100%;
  24.     text-align: left;
  25. }
  26.  
  27.  
  28. .p-sideitem {
  29.             background: url("img/psbbodyrbl4.gif") no-repeat bottom right;
  30. }
  31.  
  32.  
  33. .p-boxhead {
  34.             background: url("img/psbheadrii2.gif") no-repeat top right;
  35. }
  36.  
  37.  
  38. .p-boxhead .p-headfill {
  39.             background: url("img/psbheadlsl9.gif") no-repeat top left;
  40. }
  41.  
  42. #nav .p-boxbody {
  43.             background: url("img/psbbodyltj4.gif") no-repeat bottom left;
  44. }
  45.  
  46.  
  47. #nav .p-boxbody {
  48.             margin: 0;
  49.             padding: 15px 30px 131px;
  50.             color: White;
  51. }
  52.  
  53. .p-boxhead .p-headfill {
  54.             margin: 0;
  55.             padding: 10px 30px 5px;
  56.             color: white; 
  57.             font-weight: bold; 
  58.             font-size: 1.2em; 
  59.             line-height: 1em;
  60. }
  61.  
  62. /* Search */
  63.  
  64. #search {
  65.     float: right;
  66.     padding: 1px 0px 0px 40px;
  67. /* ultimo parametro lo desplaza hacia la derecha*/
  68. }
  69.  
  70. #search form {
  71.     float: right;
  72.     margin: 0;
  73.     padding: 0px 10px 0px 0px;
  74. }
  75.  
  76. #search fieldset {
  77.     margin: 0px;
  78.     padding: 0;
  79.     border: none;
  80.     
  81. /* para tener el cuadre remarcado, asi veo como lo hago pequeño*/
  82. }
  83.  
  84. #search input {
  85.     float: left;
  86.     font: 12px Georgia, "Times New Roman", Times, serif;
  87. }
  88.  
  89. /* si toco el valor float aqui, se desplaza el casillero hacia la direccion indicada*/
  90.  
  91. #search-text {
  92.     width: 110px;
  93.     height: 28px;
  94.     padding: 1px 0px 0px 7px;
  95.     border: none;
  96.     background: url(images/imagen_formulario.gif) no-repeat left top;
  97.     color: #000000;
  98.     
  99. }
  100.  
  101. #search-submit {
  102.     width: 82px;
  103.     height: 18px;
  104.     margin-right: 90px;
  105.     padding: 0px 15px;
  106.     background: url("images/a.gif") no-repeat left top;
  107.     border: none;
  108.     text-indent: 0px;
  109.     color: #FFFFFF;
  110. }
  111.  
  112.  
  113.  
  114.  
  115.  
  116. /* CONTENEDOR */
  117.  
  118. #contenedor {width:1000px; height:100%; margin: 5px auto;}
  119.  
  120. /* si toco le height se arregla el cuerpo*/
  121.  
  122.  
  123. /* CABECERA */
  124.  
  125. #cabecera {height: 140px;margin-top: 0px;}
  126. /* border-top:2px solid #F40; */
  127.  
  128. /* BARRA LATERAL IZQUIERDA*/
  129.  
  130. #barralateraliz {float:left; width:240px; height:100%; padding: 5px}
  131.  
  132.  
  133. /* BARRA LATERAL DERECHA*/
  134.  
  135. #barralateralde {background-color:#00CCFF; float: right; width:140px; height:100%; padding:5px }
  136.  
  137.  
  138. /* CONTENIDO*/
  139.  
  140. #contenido {margin-top:15px;float:center; width: 678px; height:100%; padding::5px }
  141.  
  142. /* margin top, para indicar donde empezar el contenido en esta capa (texto, imagenes)*/
  143.  
  144. /* PIE */
  145.  
  146. #pie {background-color:#FFFFFF; clear: both; padding:5px }


Muchas gracias de antemano!


un saludo.