Foros del Web » Creando para Internet » CSS »

Div de altura variable, no repite el background imagen

Estas en el tema de Div de altura variable, no repite el background imagen en el foro de CSS en Foros del Web. Tengo el siguiente codigo, <div class="sit"> <div class="sitlef cntrpt-y"></div> <div class="sitcen"> <div class="sitrig cntrpt-y"></div> </div> Con el css .cntrpt-y{background:url('../../theme/img/CntRpt-Y.png') repeat-y;} .sit{width:980px;clear:both;} .sitlef{width:1px;background-position:-2px 0px;float:left;} .sitcen{width:977px; background-color:#f3f3f3; ...
  #1 (permalink)  
Antiguo 10/01/2011, 13:17
 
Fecha de Ingreso: septiembre-2010
Mensajes: 8
Antigüedad: 7 años, 3 meses
Puntos: 0
Div de altura variable, no repite el background imagen

Tengo el siguiente codigo,

<div class="sit">
<div class="sitlef cntrpt-y"></div>
<div class="sitcen">
<div class="sitrig cntrpt-y"></div>
</div>

Con el css
.cntrpt-y{background:url('../../theme/img/CntRpt-Y.png') repeat-y;}
.sit{width:980px;clear:both;}
.sitlef{width:1px;background-position:-2px 0px;float:left;}
.sitcen{width:977px; background-color:#f3f3f3; float:left;}
.sitrig{width:2px;background-position:-1px 0px;float:left;}

El problema es que cuando ingreso informacion en el div sitcen, este va aumentando su altura, ya que es variable, pero los div's laterales no aumenta el alto y por ende, no repite el background.

alquien puede ayudarme con este problema.

Saludos y Gracias...
  #2 (permalink)  
Antiguo 10/01/2011, 13:23
Avatar de GAST0N  
Fecha de Ingreso: agosto-2010
Ubicación: Buenos Aires
Mensajes: 680
Antigüedad: 7 años, 4 meses
Puntos: 64
Respuesta: Div de altura variable, no repite el background imagen

<div class="sit">
<div class="sitlef cntrpt-y"></div>
<div class="sitcen">
<div class="sitrig cntrpt-y"></div>
</div>


fijate que tenes 4 div de apertura y solo 3 de cierre... corregi eso
__________________
Twitter: @GastonArnedo

Muerte a los <tr> y <td>
  #3 (permalink)  
Antiguo 10/01/2011, 13:42
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Div de altura variable, no repite el background imagen

busca en el foro sobre columnas equilibradas, los divs no funcionan como las tablas y no crecerán los que tienes a los lados, revisa este ejemplo de mikmoro haber si le entiendes

http://www.araudi.net/ejemplos/colum...ilibradas.html

e igual busca en el foro y google seguro encontraras mucha información
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #4 (permalink)  
Antiguo 10/01/2011, 13:46
 
Fecha de Ingreso: septiembre-2010
Mensajes: 8
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Div de altura variable, no repite el background imagen

Gracias Gaston, pero eso fue solo error de escritura en la pregunta, en codigo estan todos cerrados.

Gracias A66, voy a revisar la info...
  #5 (permalink)  
Antiguo 10/01/2011, 14:50
Avatar de Kurozaki  
Fecha de Ingreso: diciembre-2010
Ubicación: Con mi Zanpakutou (Colima, MEX).
Mensajes: 175
Antigüedad: 7 años
Puntos: 9
Respuesta: Div de altura variable, no repite el background imagen

mete todo esto a un contenedor y a este contenedor dale un height auto.

Y a los3divs que estaran adentro de este contenedor (los dos laterales y sifcen que es donde tiene tu contenido)
Dales altura 100%.

Entonces lo que esto hace es que el contenedor de ajuste a la altura del contenido mas grande de los 3 divs que tienes.

Y al ajustarse a esta altura, como los otros dos divs laterales, tienen height 100% tambien se ajustaran a la misma altura.

Y con background repeat-y se repetira el background.
Kurozaki
  #6 (permalink)  
Antiguo 10/01/2011, 15:08
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Div de altura variable, no repite el background imagen

Cita:
Iniciado por Kurozaki Ver Mensaje
mete todo esto a un contenedor y a este contenedor dale un height auto.

Y a los3divs que estaran adentro de este contenedor (los dos laterales y sifcen que es donde tiene tu contenido)
Dales altura 100%.

Entonces lo que esto hace es que el contenedor de ajuste a la altura del contenido mas grande de los 3 divs que tienes.

Y al ajustarse a esta altura, como los otros dos divs laterales, tienen height 100% tambien se ajustaran a la misma altura.

Y con background repeat-y se repetira el background.
Kurozaki
y donde esta el truco? hasta donde tengo entendido lo que usted dice es valido siempre y cuando el div contenedor tenga una altura fija y no variable, si le digo height:200px; funcionara sin problemas, pero si le digo height:auto; obtendré un fracaso total...

compañero y si nos pone un codigo funcional probado por usted con su teoría?

y ya de paso si conoce algún link donde se hable al respecto compartalo para documentarnos bien ñ.ñ y lo digo por puede y yo me equivoque y no estaría de mas informarme donde esta mi error
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #7 (permalink)  
Antiguo 17/01/2011, 14:31
 
Fecha de Ingreso: septiembre-2010
Mensajes: 8
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Div de altura variable, no repite el background imagen

Lo solucione de la siguiente forma


Código CSS:
Ver original
  1. .cntrpt-y{background:url('../../theme/img/CntRpt-Y.png') repeat-y;}
  2. #cnt .sit{width:980px;clear:both;}
  3. #cnt .sitlef{width:1px;background-position:-2px 0px;margin-bottom:-1000px;padding-bottom:1000px;min-height:300px;}
  4. #cnt .sitcen{width:977px; background-color:#fff;}
  5. #cnt .sitrig{width:2px;background-position:-1px 0px;margin-bottom:-1000px;padding-bottom:1000px;min-height:300px;}

Código HTML:
Ver original
  1. <div class="sit">
  2. <div class="sitlef cntrpt-y"></div>
  3. <div class="sitcen">
  4. <div class="sitrig cntrpt-y"></div>
  5. </div>

Gracias a todos los que aportaron

Etiquetas: altura, variables, fondo
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 18:00.