Foros del Web » Creando para Internet » CSS »

Problema con diseño simple a tres columnas expandibles

Estas en el tema de Problema con diseño simple a tres columnas expandibles en el foro de CSS en Foros del Web. Hola, mi problema es el siguiete. Estoy haciendo una web, cuyo cuerpo central sera de 950px, y los laterales, el izquierdo y el derecho se ...
  #1 (permalink)  
Antiguo 18/06/2010, 07:23
 
Fecha de Ingreso: enero-2005
Ubicación: Málaga
Mensajes: 30
Antigüedad: 12 años, 11 meses
Puntos: 1
Problema con diseño simple a tres columnas expandibles

Hola, mi problema es el siguiete.

Estoy haciendo una web, cuyo cuerpo central sera de 950px, y los laterales, el izquierdo y el derecho se auto ajustaran al ancho de la resolucion del usuario .... mostrando una imagen de fondo.

Este es el codigo basico que he realizado:

Código:
<style>
#barraBusqueda {
	margin: 0 auto;
	background-color:#012e57;
	height:30px;
}
#leftContainerSB {
	float:left;
	background-color:#012e57;
	width: auto;
	height:30px;
}
#mainContainerSB {
	background-color:#fffff;
	width: 980px;
	padding:0px;
	margin:0px;
	height:30px;
}
#rightContainerSB {
	float: right;
	background-color:#012e57;
	margin-right: auto;
	margin-left: auto;
	width: auto;
	height:30px;
}
</style>

  <div id="barrabusqueda" align="center">
     <div id="leftContainerSB"> izquierda </div>
     <div id="rightContainerSB"> derecha </div>
     <div id="mainContainerSB">Cuerpo central</div>
  </div>
Todo funciona, se ajusta al centro, y los laterales se expanden y contraen cuando cambia la resolucion PERO ... estoy intentado poner en la izquierda y en la derecha una imagen de fondo que se repita para rellenar la zona que se expande o contrae con un dibujo .... pero la imagen de fondo que defino no aparece a no ser que tenga algún texto o contenido dentro del DIV ... en cuyo caso la imagen llega unicamente hasta donde alcanza el texto ...

he probado con:

Código:
    <div id="leftContainer" style="background:url(/imagenes/fleco_izq.png); background-repeat:repeat;">

    ó    

    <div id="leftContainer" style="background: transparent url(/imagenes/fleco_izq.png) repeat top right; background-repeat:repeat ">
pero nada, no lo consigo, tambien he probado a meter la imagen dentro del div ...

<div id="leftContainer"><img src="...." width="100%" height="100%"></div>

pero nada ...

Cualquier ayuda sería muy apreciada .... muchas gracias
  #2 (permalink)  
Antiguo 18/06/2010, 10:08
Avatar de modeloscanarias  
Fecha de Ingreso: junio-2010
Ubicación: Canarias
Mensajes: 37
Antigüedad: 7 años, 6 meses
Puntos: 1
Respuesta: Problema con diseño simple a tres columnas expandibles

Hola,
en vez de poner como height 30 px(me imagino que es la altura de la imagen) pon min-height:

<style>
#barraBusqueda {
margin: 0 auto;
background-color:#012e57;
height:30px;
}
#leftContainerSB {
float:left;
background-color:#012e57;
width: auto;
min-height: 30px;
background-image: url(/imagenes/fleco_izq.png);
background-repeat: repeat;

}
#mainContainerSB {
background-color:#fffff;
width: 980px;
padding:0px;
margin:0px;
min-height: 30px;
}
#rightContainerSB {
float: right;
background-color:#012e57;
margin-right: auto;
margin-left: auto;
width: auto;
min-height: 30px;
background-image: url(/imagenes/fleco_izq.png);
background-repeat: repeat;

}
</style>

....tendria que funcionar ya que poniendo o no contenido en los divs, tu impones de que la altura sea de por lo meno 30px
  #3 (permalink)  
Antiguo 20/06/2010, 09:21
 
Fecha de Ingreso: enero-2005
Ubicación: Málaga
Mensajes: 30
Antigüedad: 12 años, 11 meses
Puntos: 1
Respuesta: Problema con diseño simple a tres columnas expandibles

Nada, no funciona, .... la imagen no sale .... pruebalo, veras como no sale ... unicamente sale .. si meto algo en el div ... texto por ejemplo ... pero si no hay nada ... no se muestra la imagen ni el repeat claro está


Cita:
Iniciado por modeloscanarias Ver Mensaje
Hola,
en vez de poner como height 30 px(me imagino que es la altura de la imagen) pon min-height:

<style>
#barraBusqueda {
margin: 0 auto;
background-color:#012e57;
height:30px;
}
#leftContainerSB {
float:left;
background-color:#012e57;
width: auto;
min-height: 30px;
background-image: url(/imagenes/fleco_izq.png);
background-repeat: repeat;

}
#mainContainerSB {
background-color:#fffff;
width: 980px;
padding:0px;
margin:0px;
min-height: 30px;
}
#rightContainerSB {
float: right;
background-color:#012e57;
margin-right: auto;
margin-left: auto;
width: auto;
min-height: 30px;
background-image: url(/imagenes/fleco_izq.png);
background-repeat: repeat;

}
</style>

....tendria que funcionar ya que poniendo o no contenido en los divs, tu impones de que la altura sea de por lo meno 30px
  #4 (permalink)  
Antiguo 21/06/2010, 01:16
 
Fecha de Ingreso: enero-2005
Ubicación: Málaga
Mensajes: 30
Antigüedad: 12 años, 11 meses
Puntos: 1
Respuesta: Problema con diseño simple a tres columnas expandibles

Nada .... si le pongo por ejemplo al width una tamaño fijo en pixeles si que se muestra la imagen de fondo... pero si le pongo auto, la imagen no se muestra y unicamente aparece si hay contenido dentro del DIV

AYUDA POR FAVOR .... alguien puede decirme como puede aparecer la imagen de fondo con un repeat automaticamente sin que haya contenido en la celda??? y que llegue hasta donde se expande el DIV???

Muchas gracias
  #5 (permalink)  
Antiguo 21/06/2010, 13:13
 
Fecha de Ingreso: mayo-2010
Ubicación: Lima, Peru.
Mensajes: 176
Antigüedad: 7 años, 6 meses
Puntos: 6
Respuesta: Problema con diseño simple a tres columnas expandibles

cheka esto ya lo probe... y si sale

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. <title>Documento sin t&iacute;tulo</title>
  5. </head>
  6. #barraBusqueda {
  7.     margin: 0 auto;
  8.     background-color:#012e57;
  9.     height:30px;
  10. }
  11. #leftContainerSB {
  12.     float:left;
  13.     width: auto;
  14.     min-height:10240px;
  15.     background:url(bg-light.jpg) repeat-y;
  16. }
  17. #mainContainerSB {
  18.     background-color:#fffff;
  19.     width: 980px;
  20.     padding:0px;
  21.     margin:0px;
  22.     height:30px;
  23. }
  24. #rightContainerSB {
  25.     float: right;
  26.     background-color:#012e57;
  27.     margin-right: auto;
  28.     margin-left: auto;
  29.     width: auto;
  30.     height:30px;
  31. }
  32.  
  33.   <div id="barrabusqueda" align="center">
  34.      <div id="leftContainerSB"> izquierda </div>
  35.      <div id="rightContainerSB"> derecha </div>
  36.      <div id="mainContainerSB">Cuerpo central</div>
  37.   </div>
  38. </body>
  39. </html>

si no te sale puede deberse a tu browser.. saludos por ejemplo en el IE6 no funciona x q no reconoce la propiedad min-height.

Última edición por TheDark03; 21/06/2010 a las 15:18

Etiquetas: expandible, 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 00:29.