Foros del Web » Creando para Internet » CSS »

Problema con CSS

Estas en el tema de Problema con CSS en el foro de CSS en Foros del Web. Hola, Aqui vengo con un pequeño problema con CSS, la verdad es que no soy nada bueno con CSS aqui esta una imagen del problema ...
  #1 (permalink)  
Antiguo 04/07/2009, 15:16
Avatar de kike00  
Fecha de Ingreso: febrero-2005
Ubicación: El Salvador
Mensajes: 180
Antigüedad: 12 años, 9 meses
Puntos: 7
Problema con CSS

Hola,
Aqui vengo con un pequeño problema con CSS, la verdad es que no soy nada bueno con CSS

aqui esta una imagen del problema



como ven el fondo no se repite....

el HTML y el CSS que tengo son:

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <link href="test2.css" rel="stylesheet" type="text/css" />
  5.  
  6. </head>
  7.  
  8. <div class="outer-container">
  9.     <div class="barraSuperior">
  10.         <div class="bordeEsquinaIzqSup"></div>
  11.         <div class="bordeBarraSup"></div>
  12.         <div class="bordeEsquinaDerSup"></div>
  13.     </div>
  14.     <div class="barraCentral">
  15.         <div class="contenidoDerecho">
  16.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  17.                 Nunc porta consectetur nibh sed tempor.
  18.                 Vivamus gravida feugiat ante pretium cursus.
  19.                 Donec tincidunt dui sit amet urna dignissim in fermentum odio egestas.
  20.                 Nunc consectetur fermentum ipsum quis blandit.
  21.                 Duis sed massa elit, et placerat ante.
  22.                 Phasellus sit amet erat ut ante pulvinar euismod.
  23.                 Aliquam eu volutpat lacus.
  24.                 Duis vel condimentum augue.
  25.                 Curabitur magna metus, pharetra a tincidunt id, luctus nec diam.
  26.                 Sed sit amet justo at ipsum consectetur suscipit.
  27.                 Praesent tincidunt pellentesque scelerisque.
  28.                 <br />
  29.                 <br />
  30.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  31.                 Nunc porta consectetur nibh sed tempor.
  32.                 Vivamus gravida feugiat ante pretium cursus.
  33.                 Donec tincidunt dui sit amet urna dignissim in fermentum odio egestas.
  34.                 Nunc consectetur fermentum ipsum quis blandit.
  35.                 Duis sed massa elit, et placerat ante.
  36.                 Phasellus sit amet erat ut ante pulvinar euismod.
  37.                 Aliquam eu volutpat lacus.
  38.                 Duis vel condimentum augue.
  39.                 Curabitur magna metus, pharetra a tincidunt id, luctus nec diam.
  40.                 Sed sit amet justo at ipsum consectetur suscipit.
  41.                 Praesent tincidunt pellentesque scelerisque.
  42.                 <br />
  43.                 <br />
  44.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  45.                 Nunc porta consectetur nibh sed tempor.
  46.                 Vivamus gravida feugiat ante pretium cursus.
  47.                 Donec tincidunt dui sit amet urna dignissim in fermentum odio egestas.
  48.                 Nunc consectetur fermentum ipsum quis blandit.
  49.                 Duis sed massa elit, et placerat ante.
  50.                 Phasellus sit amet erat ut ante pulvinar euismod.
  51.                 Aliquam eu volutpat lacus.
  52.                 Duis vel condimentum augue.
  53.                 Curabitur magna metus, pharetra a tincidunt id, luctus nec diam.
  54.                 Sed sit amet justo at ipsum consectetur suscipit.
  55.                 Praesent tincidunt pellentesque scelerisque.
  56.                 <br />
  57.                 <br />
  58.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  59.                 Nunc porta consectetur nibh sed tempor.
  60.                 Vivamus gravida feugiat ante pretium cursus.
  61.                 Donec tincidunt dui sit amet urna dignissim in fermentum odio egestas.
  62.                 Nunc consectetur fermentum ipsum quis blandit.
  63.                 Duis sed massa elit, et placerat ante.
  64.                 Phasellus sit amet erat ut ante pulvinar euismod.
  65.                 Aliquam eu volutpat lacus.
  66.                 Duis vel condimentum augue.
  67.                 Curabitur magna metus, pharetra a tincidunt id, luctus nec diam.
  68.                 Sed sit amet justo at ipsum consectetur suscipit.
  69.                 Praesent tincidunt pellentesque scelerisque.
  70.                 <br />
  71.                 <br />
  72.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  73.                 Nunc porta consectetur nibh sed tempor.
  74.                 Vivamus gravida feugiat ante pretium cursus.
  75.                 Donec tincidunt dui sit amet urna dignissim in fermentum odio egestas.
  76.                 Nunc consectetur fermentum ipsum quis blandit.
  77.                 Duis sed massa elit, et placerat ante.
  78.                 Phasellus sit amet erat ut ante pulvinar euismod.
  79.                 Aliquam eu volutpat lacus.
  80.                 Duis vel condimentum augue.
  81.                 Curabitur magna metus, pharetra a tincidunt id, luctus nec diam.
  82.                 Sed sit amet justo at ipsum consectetur suscipit.
  83.                 Praesent tincidunt pellentesque scelerisque.
  84.                 <br />
  85.                 <br />
  86.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  87.                 Nunc porta consectetur nibh sed tempor.
  88.                 Vivamus gravida feugiat ante pretium cursus.
  89.                 Donec tincidunt dui sit amet urna dignissim in fermentum odio egestas.
  90.                 Nunc consectetur fermentum ipsum quis blandit.
  91.                 Duis sed massa elit, et placerat ante.
  92.                 Phasellus sit amet erat ut ante pulvinar euismod.
  93.                 Aliquam eu volutpat lacus.
  94.                 Duis vel condimentum augue.
  95.                 Curabitur magna metus, pharetra a tincidunt id, luctus nec diam.
  96.                 Sed sit amet justo at ipsum consectetur suscipit.
  97.                 Praesent tincidunt pellentesque scelerisque.       
  98.         </div>
  99.         <div class="sideBar">
  100.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  101.                 Nunc porta consectetur nibh sed tempor.
  102.                 Vivamus gravida feugiat ante pretium cursus.
  103.                 Donec tincidunt dui sit amet urna dignissim in fermentum odio egestas.
  104.                 Nunc consectetur fermentum ipsum quis blandit.
  105.                 Duis sed massa elit, et placerat ante.
  106.                 Phasellus sit amet erat ut ante pulvinar euismod.
  107.                 Aliquam eu volutpat lacus.
  108.                 Duis vel condimentum augue.
  109.                 Curabitur magna metus, pharetra a tincidunt id, luctus nec diam.
  110.                 Sed sit amet justo at ipsum consectetur suscipit.
  111.                 Praesent tincidunt pellentesque scelerisque.       
  112.         </div>
  113.     </div>
  114.     <div class="barraInferior">
  115.         <div class="bordeEsquinaIzqInf"></div>
  116.         <div class="bordeBarraInf"></div>
  117.         <div class="bordeEsquinaDerInf"></div>
  118.     </div>
  119.    
  120. </div>
  121. </body>
  122. </html>
  #2 (permalink)  
Antiguo 04/07/2009, 15:17
Avatar de kike00  
Fecha de Ingreso: febrero-2005
Ubicación: El Salvador
Mensajes: 180
Antigüedad: 12 años, 9 meses
Puntos: 7
Respuesta: Problema con CSS

Y el CSS

Código CSS:
Ver original
  1. body{
  2.     font:12px/18px Arial,Helvetica,sans-serif;
  3.     padding-top: 10px;
  4.     padding-bottom: 10px;
  5.     background: url(images/design/bg_site.jpg) repeat-x #e4d8a6;
  6. }
  7.  
  8.  
  9. /********************************************/
  10. /******** CONTENEDOR PRINCIPAL **************/
  11. /********************************************/
  12.  
  13. .outer-container {
  14.     width:928px;
  15.     left: 50%;
  16.     position: relative;
  17.     margin-left: -464px;
  18.     clear: both;
  19. }
  20.  
  21. /********************************************/
  22. /****** BARRAS SUPERIOR E INFERIOR **********/
  23. /********************************************/
  24.  
  25. .barraSuperior, .barraInferior{
  26.     height:15px;
  27.     display: block;
  28.     clear: both;
  29. }
  30.  
  31. .bordeEsquinaIzqSup, .bordeEsquinaDerSup, .bordeEsquinaIzqInf, .bordeEsquinaDerInf{
  32.     float:left;
  33.     width:14px;
  34.     height:15px;
  35. }
  36.  
  37. .bordeEsquinaIzqSup{
  38.     background: url(images/design/contenido_borde_superior_izquierdo.png) top left no-repeat;
  39.     position: absolute;
  40.     left: 0px;
  41. }
  42.  
  43.  
  44. .bordeEsquinaDerSup{
  45.     background: url(images/design/contenido_borde_superior_derecho.png) top right no-repeat;
  46.     position: absolute;
  47.     left: 914px;
  48.    
  49. }
  50.  
  51. .bordeEsquinaIzqInf{
  52.     background: url(images/design/contenido_borde_inferior_izquierdo.png) bottom left no-repeat;
  53.     position: absolute;
  54.     left: 0px;
  55. }
  56.  
  57.  
  58. .bordeEsquinaDerInf{
  59.     background: url(images/design/contenido_borde_inferior_derecho.png) bottom right no-repeat;
  60.     position: absolute;
  61.     left: 914px;
  62. }
  63.  
  64. /* bordes en el medio de las esquinas */
  65. .bordeBarraSup, .bordeBarraInf{
  66.     float:left;
  67.     width: 900px;
  68.     height: 15px;
  69.     position: absolute;
  70.     left: 14px;
  71. }
  72.  
  73. .bordeBarraSup{
  74.     background:url(images/design/contenido_borde_superior.png) repeat-x;
  75. }
  76.  
  77.  
  78. .bordeBarraInf{
  79.     background:url(images/design/contenido_borde_inferior.png) repeat-x;
  80. }
  81.  
  82.  
  83. /********************************************/
  84. /************ BARRA CENTRAL *****************/
  85. /********************************************/
  86.  
  87. .barraCentral{
  88.     width:928px;
  89.     background:url(images/design/contenido_central.png) repeat-y;  
  90.     clear: both;
  91.  
  92. }
  93.  
  94. .contenidoDerecho{
  95.     float: left;
  96.     width: 640px;
  97.     margin-left: 10px;
  98.     padding-left: 5px;
  99. }
  100.  
  101. .sidebar{
  102.     width: 250px;
  103. }

Muchas gracias

PD. lo siento pero no cupo en un solo post :P

Última edición por kike00; 04/07/2009 a las 15:28
  #3 (permalink)  
Antiguo 04/07/2009, 15:48
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Problema con CSS

mira de darle un height a la barraCentral
__________________
No diseñes usando tablas.
  #4 (permalink)  
Antiguo 04/07/2009, 16:01
Avatar de kike00  
Fecha de Ingreso: febrero-2005
Ubicación: El Salvador
Mensajes: 180
Antigüedad: 12 años, 9 meses
Puntos: 7
Respuesta: Problema con CSS

pero el problema es que no puede tener un alto fijo....
porque la cantidad de contenido puede variar... podría incluso, llegar a ser mas largo de lo que
esta...
  #5 (permalink)  
Antiguo 04/07/2009, 16:04
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Problema con CSS

pues dale un height: auto, de esa forma se adaptará al contenido
__________________
No diseñes usando tablas.
  #6 (permalink)  
Antiguo 04/07/2009, 16:06
Avatar de kike00  
Fecha de Ingreso: febrero-2005
Ubicación: El Salvador
Mensajes: 180
Antigüedad: 12 años, 9 meses
Puntos: 7
Respuesta: Problema con CSS

nope... no funciono :(


EDIT:

solo funciono para IE7 ....... !!!! pero para FF no, ni para chrome....
  #7 (permalink)  
Antiguo 04/07/2009, 16:10
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Problema con CSS

Estaría interesante ver la web colgada en un hosting apra verla mas claramente
__________________
No diseñes usando tablas.
  #8 (permalink)  
Antiguo 04/07/2009, 16:11
Avatar de kike00  
Fecha de Ingreso: febrero-2005
Ubicación: El Salvador
Mensajes: 180
Antigüedad: 12 años, 9 meses
Puntos: 7
Respuesta: Problema con CSS

ok dame 5 minutos y la subo...
  #9 (permalink)  
Antiguo 04/07/2009, 16:14
Avatar de kike00  
Fecha de Ingreso: febrero-2005
Ubicación: El Salvador
Mensajes: 180
Antigüedad: 12 años, 9 meses
Puntos: 7
Respuesta: Problema con CSS

OK aqui esta la direccion... http://pruebas.inozy.net/sitio/test.html
  #10 (permalink)  
Antiguo 04/07/2009, 17:02
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con CSS

Añade overflow: auto; al selector .barraCentral
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 04/07/2009, 17:20
Avatar de kike00  
Fecha de Ingreso: febrero-2005
Ubicación: El Salvador
Mensajes: 180
Antigüedad: 12 años, 9 meses
Puntos: 7
Respuesta: Problema con CSS

Muchas Gracias!!!!!!!!!!!! funcionó =D
  #12 (permalink)  
Antiguo 04/07/2009, 17:32
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con CSS

De nada, es un placer.

Saludos.
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 04/07/2009, 21:47
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Problema con CSS

podrías explicar el porqué del overflow: auto? Gracia Mikmoro :)
__________________
No diseñes usando tablas.
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 05:33.