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, 14:16
Avatar de kike00  
Fecha de Ingreso: febrero-2005
Ubicación: El Salvador
Mensajes: 180
Antigüedad: 19 años, 2 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. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <link href="test2.css" rel="stylesheet" type="text/css" />
  6.  
  7. </head>
  8.  
  9. <body>
  10. <div class="outer-container">
  11.     <div class="barraSuperior">
  12.         <div class="bordeEsquinaIzqSup"></div>
  13.         <div class="bordeBarraSup"></div>
  14.         <div class="bordeEsquinaDerSup"></div>
  15.     </div>
  16.     <div class="barraCentral">
  17.         <div class="contenidoDerecho">
  18.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  19.                 Nunc porta consectetur nibh sed tempor. 
  20.                 Vivamus gravida feugiat ante pretium cursus. 
  21.                 Donec tincidunt dui sit amet urna dignissim in fermentum odio egestas. 
  22.                 Nunc consectetur fermentum ipsum quis blandit. 
  23.                 Duis sed massa elit, et placerat ante. 
  24.                 Phasellus sit amet erat ut ante pulvinar euismod. 
  25.                 Aliquam eu volutpat lacus. 
  26.                 Duis vel condimentum augue. 
  27.                 Curabitur magna metus, pharetra a tincidunt id, luctus nec diam. 
  28.                 Sed sit amet justo at ipsum consectetur suscipit. 
  29.                 Praesent tincidunt pellentesque scelerisque.
  30.                 <br />
  31.                 <br />
  32.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  33.                 Nunc porta consectetur nibh sed tempor. 
  34.                 Vivamus gravida feugiat ante pretium cursus. 
  35.                 Donec tincidunt dui sit amet urna dignissim in fermentum odio egestas. 
  36.                 Nunc consectetur fermentum ipsum quis blandit. 
  37.                 Duis sed massa elit, et placerat ante. 
  38.                 Phasellus sit amet erat ut ante pulvinar euismod. 
  39.                 Aliquam eu volutpat lacus. 
  40.                 Duis vel condimentum augue. 
  41.                 Curabitur magna metus, pharetra a tincidunt id, luctus nec diam. 
  42.                 Sed sit amet justo at ipsum consectetur suscipit. 
  43.                 Praesent tincidunt pellentesque scelerisque.
  44.                 <br />
  45.                 <br />
  46.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  47.                 Nunc porta consectetur nibh sed tempor. 
  48.                 Vivamus gravida feugiat ante pretium cursus. 
  49.                 Donec tincidunt dui sit amet urna dignissim in fermentum odio egestas. 
  50.                 Nunc consectetur fermentum ipsum quis blandit. 
  51.                 Duis sed massa elit, et placerat ante. 
  52.                 Phasellus sit amet erat ut ante pulvinar euismod. 
  53.                 Aliquam eu volutpat lacus. 
  54.                 Duis vel condimentum augue. 
  55.                 Curabitur magna metus, pharetra a tincidunt id, luctus nec diam. 
  56.                 Sed sit amet justo at ipsum consectetur suscipit. 
  57.                 Praesent tincidunt pellentesque scelerisque.
  58.                 <br />
  59.                 <br />
  60.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  61.                 Nunc porta consectetur nibh sed tempor. 
  62.                 Vivamus gravida feugiat ante pretium cursus. 
  63.                 Donec tincidunt dui sit amet urna dignissim in fermentum odio egestas. 
  64.                 Nunc consectetur fermentum ipsum quis blandit. 
  65.                 Duis sed massa elit, et placerat ante. 
  66.                 Phasellus sit amet erat ut ante pulvinar euismod. 
  67.                 Aliquam eu volutpat lacus. 
  68.                 Duis vel condimentum augue. 
  69.                 Curabitur magna metus, pharetra a tincidunt id, luctus nec diam. 
  70.                 Sed sit amet justo at ipsum consectetur suscipit. 
  71.                 Praesent tincidunt pellentesque scelerisque.
  72.                 <br />
  73.                 <br />
  74.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  75.                 Nunc porta consectetur nibh sed tempor. 
  76.                 Vivamus gravida feugiat ante pretium cursus. 
  77.                 Donec tincidunt dui sit amet urna dignissim in fermentum odio egestas. 
  78.                 Nunc consectetur fermentum ipsum quis blandit. 
  79.                 Duis sed massa elit, et placerat ante. 
  80.                 Phasellus sit amet erat ut ante pulvinar euismod. 
  81.                 Aliquam eu volutpat lacus. 
  82.                 Duis vel condimentum augue. 
  83.                 Curabitur magna metus, pharetra a tincidunt id, luctus nec diam. 
  84.                 Sed sit amet justo at ipsum consectetur suscipit. 
  85.                 Praesent tincidunt pellentesque scelerisque.
  86.                 <br />
  87.                 <br />
  88.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  89.                 Nunc porta consectetur nibh sed tempor. 
  90.                 Vivamus gravida feugiat ante pretium cursus. 
  91.                 Donec tincidunt dui sit amet urna dignissim in fermentum odio egestas. 
  92.                 Nunc consectetur fermentum ipsum quis blandit. 
  93.                 Duis sed massa elit, et placerat ante. 
  94.                 Phasellus sit amet erat ut ante pulvinar euismod. 
  95.                 Aliquam eu volutpat lacus. 
  96.                 Duis vel condimentum augue. 
  97.                 Curabitur magna metus, pharetra a tincidunt id, luctus nec diam. 
  98.                 Sed sit amet justo at ipsum consectetur suscipit. 
  99.                 Praesent tincidunt pellentesque scelerisque.        
  100.         </div>
  101.         <div class="sideBar">
  102.                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  103.                 Nunc porta consectetur nibh sed tempor. 
  104.                 Vivamus gravida feugiat ante pretium cursus. 
  105.                 Donec tincidunt dui sit amet urna dignissim in fermentum odio egestas. 
  106.                 Nunc consectetur fermentum ipsum quis blandit. 
  107.                 Duis sed massa elit, et placerat ante. 
  108.                 Phasellus sit amet erat ut ante pulvinar euismod. 
  109.                 Aliquam eu volutpat lacus. 
  110.                 Duis vel condimentum augue. 
  111.                 Curabitur magna metus, pharetra a tincidunt id, luctus nec diam. 
  112.                 Sed sit amet justo at ipsum consectetur suscipit. 
  113.                 Praesent tincidunt pellentesque scelerisque.        
  114.         </div>
  115.     </div>
  116.     <div class="barraInferior">
  117.         <div class="bordeEsquinaIzqInf"></div>
  118.         <div class="bordeBarraInf"></div>
  119.         <div class="bordeEsquinaDerInf"></div>
  120.     </div>
  121.     
  122. </div>
  123. </body>
  124. </html>
  #2 (permalink)  
Antiguo 04/07/2009, 14:17
Avatar de kike00  
Fecha de Ingreso: febrero-2005
Ubicación: El Salvador
Mensajes: 180
Antigüedad: 19 años, 2 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 14:28
  #3 (permalink)  
Antiguo 04/07/2009, 14:48
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 16 años, 4 meses
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, 15:01
Avatar de kike00  
Fecha de Ingreso: febrero-2005
Ubicación: El Salvador
Mensajes: 180
Antigüedad: 19 años, 2 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, 15:04
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 16 años, 4 meses
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, 15:06
Avatar de kike00  
Fecha de Ingreso: febrero-2005
Ubicación: El Salvador
Mensajes: 180
Antigüedad: 19 años, 2 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, 15:10
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 16 años, 4 meses
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, 15:11
Avatar de kike00  
Fecha de Ingreso: febrero-2005
Ubicación: El Salvador
Mensajes: 180
Antigüedad: 19 años, 2 meses
Puntos: 7
Respuesta: Problema con CSS
ok dame 5 minutos y la subo...
  #9 (permalink)  
Antiguo 04/07/2009, 15:14
Avatar de kike00  
Fecha de Ingreso: febrero-2005
Ubicación: El Salvador
Mensajes: 180
Antigüedad: 19 años, 2 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, 16:02
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: Problema con CSS
Añade overflow: auto; al selector .barraCentral
__________________
Visita mi nueva web idplus.org
  #11 (permalink)  
Antiguo 04/07/2009, 16:20
Avatar de kike00  
Fecha de Ingreso: febrero-2005
Ubicación: El Salvador
Mensajes: 180
Antigüedad: 19 años, 2 meses
Puntos: 7
Respuesta: Problema con CSS
Muchas Gracias!!!!!!!!!!!! funcionó =D
  #12 (permalink)  
Antiguo 04/07/2009, 16:32
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: Problema con CSS
De nada, es un placer.

Saludos.
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 04/07/2009, 20:47
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 16 años, 4 meses
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 16:08.