Foros del Web » Creando para Internet » CSS »

ayuda con estructura con divs y css

 Estas en el tema de ayuda con estructura con divs y css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/11/2010, 06:38
 
Fecha de Ingreso: junio-2006
Ubicación: España
Mensajes: 122
Antigüedad: 17 años, 10 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.
  #2 (permalink)  
Antiguo 08/11/2010, 10:12
 
Fecha de Ingreso: junio-2006
Ubicación: España
Mensajes: 122
Antigüedad: 17 años, 10 meses
Puntos: 2
Respuesta: ayuda con estructura con divs y css
para que se vea afectado, hay que poner unas cuantas lineas de texto en el div del contenido, ya que aqui no lo podia copiar porque sino superaba los caracteres maximos permetidos.

gracias de nuevo.
  #3 (permalink)  
Antiguo 08/11/2010, 15:12
Avatar de Paramericano  
Fecha de Ingreso: agosto-2010
Mensajes: 137
Antigüedad: 13 años, 8 meses
Puntos: 8
Respuesta: ayuda con estructura con divs y css
Ufff, con tanto texto al final paso.
Pero por lo visto creo que la solución es: aplicar margen a la columna (div) central, tanto a la derecha como a la izquierda, y el grosor de los margenes que sean sendos anchos de las columnas laterales.
  #4 (permalink)  
Antiguo 08/11/2010, 15:59
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: ayuda con estructura con divs y css
Imerli:
Le sugiero que le ponga un borde de 1px a sus tres cajas principales para que comprenda el porqué.

Y como esto es una cuestión básica (la creación de un layout de 3 columnas) sobre la que existe mucha información y ejemplos al respecto, mejor un poco de investigación y comparación.
Aquí puede obtener unas cuantas estructuras:
http://bit.ly/9LkVrY

2ª cuestión, el input y el campo de búsqueda en línea:
Dele un tamaño al form y a los dos input flótelos (además del resto de propiedades: valores)
  #5 (permalink)  
Antiguo 08/11/2010, 16:09
Avatar de jomaruro
Colaborador
  
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 9 meses
Puntos: 361
Respuesta: ayuda con estructura con divs y css
Hola:

Y otro grave error que aparece en su hoja de estilos: float:center No Existe.

Saludos.
  #6 (permalink)  
Antiguo 09/11/2010, 11:11
 
Fecha de Ingreso: junio-2006
Ubicación: España
Mensajes: 122
Antigüedad: 17 años, 10 meses
Puntos: 2
Respuesta: ayuda con estructura con divs y css
hola, muchas gracias por vuestras respuestas, y con lo del borde me ha ayudado bastante para ver claro el error que tenia. Ahora ya me llegan hasta el final dependiendo del texto, en firefox se me ve perfecto, pero en IE nosé porqué el centro tiene tendecia a desvariar.

[URL="http://img843.imageshack.us/img843/8764/fotoej.jpg"]ver imagen 1[/URL]


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. <div id="cabezera">aqui la cabezera</div>
  8.  
  9.         <div id="contenedor">
  10.             <div id="barralateraliz"></div> <!-- cierro barra lateral izquierda-->
  11.             <div id="barralateralde"></div> <!-- cierro barra lateral derecha -->
  12.             <div id="contenido"><p>aqui va el contenido</p></div><!-- cierro contenido-->
  13.         </div> <!-- ciero contenedor-->
  14.         
  15.         <div id="footer">pie de pagina hola hola hola</div><!-- cierro pie de pagina-->
  16.  
  17. </body>
  18. </html>




Código CSS: 
Ver original
  1. /* GENERAL*/
  2.  
  3. * {margin: 0; padding:0; outline: none; border: 0;}
  4.  
  5. body {
  6.     font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Verdana, Helvetica, sans-serif;
  7.     font-size: 12px;
  8.     color: #333; /*color letra*/
  9.     text-align: center;
  10.     background-color: #8EB7DA
  11.  
  12. }
  13. p {font-size:1em; line-height:1.5em; margin:0; padding:5px;}
  14.  
  15. /* modulos auxiliares */
  16.  
  17.  
  18.  
  19.  
  20.  
  21. /*estructura pagina
  22. */
  23. #contenedor {overflow:hidden;width:995px; margin: 0 auto;}
  24. #cabezera {background:#521E39;}
  25. #barralateraliz {float:left; width:180px; padding:10px;margin-right: 10px;}
  26. #barralateralde {float:right; width:180px; padding:10px; margin-left: 10px;}
  27. #contenido {padding-top:10px; overflow:hidden;}
  28. #barralateraliz, #contenido, #barralateralde {padding-bottom:10000px; margin-bottom:-10000px;}
  29. #footer {clear:both; background:#FFFFFF;}



gracias!
  #7 (permalink)  
Antiguo 11/11/2010, 11:45
 
Fecha de Ingreso: junio-2006
Ubicación: España
Mensajes: 122
Antigüedad: 17 años, 10 meses
Puntos: 2
Respuesta: ayuda con estructura con divs y css
Hoola!.
Alguien puede echarme una mano? por más que lo intento no logro ver el fallo, o porque razón en IE se me ve como en la imagen.

gracias d enuevo

Etiquetas: estructura
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 08:47.