Foros del Web » Creando para Internet » CSS »

Problema con Bordes (Ayuda porfavor)

Estas en el tema de Problema con Bordes (Ayuda porfavor) en el foro de CSS en Foros del Web. Hola, escribo esto despues de haber intentado hacer mil cosas para solucionarlo. Os pongo primero un croquis de la web es sencillo : Ahora os ...
  #1 (permalink)  
Antiguo 01/12/2009, 10:15
Avatar de Sr_Furia  
Fecha de Ingreso: abril-2009
Mensajes: 111
Antigüedad: 8 años, 8 meses
Puntos: 8
Problema con Bordes (Ayuda porfavor)

Hola, escribo esto despues de haber intentado hacer mil cosas para solucionarlo. Os pongo primero un croquis de la web es sencillo :





Ahora os enseño como me queda, para que veais lo que me ocurre, y podais ayudarme, como se ve en esta imagen, no se ven los bordes




Bueno queria que me dijeseis como puedo hacer para que al meter contenido, y consecuentemente se alargue la div CENTRO, se me alargue la plantilla, y que claro, pueda ver los bordes tambien.

Os pongo el codigo html y CSS para facilitar mas la posible ayuda :

Código CODIGO HTML:
Ver original
  1. <body>
  2. <div id="web">
  3. <div id="cabecera" style="clear:both"><img src="http://www.forosdelweb.com/f53/imagenes/cabecera.jpg"/></div>
  4. <div id="contenedor">
  5. <div id="izquierda">IZQUIERDA</div>
  6. <div id="centro">CENTRO</div>
  7. <div id="derecha">DERECHA</div>
  8. </div>
  9. <div id="footer">
  10. <div id="f1"><img src="http://www.forosdelweb.com/f53/imagenes/fot-izq.jpg" width="35" height="57" /></div>
  11. <div id="f2" align="center"></div>
  12. <div id="f3"><img src="http://www.forosdelweb.com/f53/imagenes/fot-dch.jpg" width="35" height="57" /></div>
  13. </div>
  14. </div>
  15. </body>

Código:
#web {
width:966px;
position:relative; 
margin-left: auto; 
margin-right: auto;
}


#cabecera {
   width:966px;
   height:153px;
}


#contenedor{
	width:938px;
	background:#CCC;
	clear:both;
	border-left:#F0F;
	border-left-style:solid;
	border-left:14px;
	border-right:#F0F;
	border-right-style:solid;
	border-right:14px;
	
}


#izquierda{
	background:#CCC;
	width:200px;
	background:#CCC;
	float:left;

}
#centro{
	background:#CCC;
	width:538px;
	background:#6CF;
	float:left;

}
#derecha{
	background:#CCC;
	width:200px;
	background:#CCC;
	float:left;

}

#footer{
	height:57px;
	background:#3F0;
	float:right;
	width:966px;
	background:#69C;
	clear:both;
}

Espero que me podais ayudar con el problema, y perdonad que haya puesto tanto, pero lo hago para facilitar la respuesta.
Gracias de antemano
  #2 (permalink)  
Antiguo 01/12/2009, 10:25
 
Fecha de Ingreso: julio-2003
Ubicación: Cochabamba Bolivia
Mensajes: 300
Antigüedad: 14 años, 4 meses
Puntos: 14
De acuerdo Respuesta: Problema con Bordes (Ayuda porfavor)

Hola prueba con agregar esto:

Código css:
Ver original
  1. #contenedor
  2. {
  3.     overflow: auto;
  4.     width:938px;
  5.     background:#CCC;
  6.     clear:both;
  7.     border-left:#F0F;
  8.     border-left-style:solid;
  9.     border-left:14px;
  10.     border-right:#F0F;
  11.     border-right-style:solid;
  12.     border-right:14px;
  13. }

Tambien tienes que hacer un corte despues de tu div derecha para que se ordenen correctamente para eso necesitas usar un div sin contenido con la propiedad clear:both asi:

Código html:
Ver original
  1. <div id="web">
  2. <div id="cabecera" style="clear:both"><img src="http://www.forosdelweb.com/f53/imagenes/cabecera.jpg"/></div>
  3. <div id="contenedor">
  4. <div id="izquierda">IZQUIERDA</div>
  5. <div id="centro">CENTRO</div>
  6. <div id="derecha">DERECHA</div>
  7. <div id="neutral"></div>
  8. </div>
  9. <div id="footer">
  10. <div id="f1"><img src="http://www.forosdelweb.com/f53/imagenes/fot-izq.jpg" width="35" height="57" /></div>
  11. <div id="f2" align="center"></div>
  12. <div id="f3"><img src="http://www.forosdelweb.com/f53/imagenes/fot-dch.jpg" width="35" height="57" /></div>
  13. </div>
  14. </div>
  15. </body>

En el tu css aumentas esto:

Código css:
Ver original
  1. #neutral
  2. {
  3.       clear: both;
  4. }

Con eso deberia solucionarse tu problema.

Saludos.
__________________
:policia: Uno para todos y todos para uno.
  #3 (permalink)  
Antiguo 01/12/2009, 11:12
Avatar de Sr_Furia  
Fecha de Ingreso: abril-2009
Mensajes: 111
Antigüedad: 8 años, 8 meses
Puntos: 8
Respuesta: Problema con Bordes (Ayuda porfavor)

Mmm Sander, gracias por la ayuda, pero probe eso y no me funcionó.

Los bordes solo se ven cuando le doy una altura fija a la DIV CENTRO. Pero claro, no me interesa darle altura fija, sino que sea expandible.

A ver si alguien puede exarme un cable, q llevo varios dias tirandome de los pelos con esto jajaja.

Saludos y gracias de nuevo Sander.

Última edición por Sr_Furia; 01/12/2009 a las 11:28
  #4 (permalink)  
Antiguo 01/12/2009, 14:34
 
Fecha de Ingreso: julio-2003
Ubicación: Cochabamba Bolivia
Mensajes: 300
Antigüedad: 14 años, 4 meses
Puntos: 14
Respuesta: Problema con Bordes (Ayuda porfavor)

Por que no pruebas ponerlo asi:

Código css:
Ver original
  1. #contenedor
  2. {
  3.     overflow: auto;
  4.     width:938px;
  5.     background:#FFF;
  6.     clear:both;
  7.     border-left: 14px solid #F0F;
  8.     border-right: 14px solid #F0F;
  9. }

Tambien cambiale el fondo a color blanco para ver si el div contenedor esta tomando el tamaño o no.

Saludos.
__________________
:policia: Uno para todos y todos para uno.
  #5 (permalink)  
Antiguo 01/12/2009, 18:03
Avatar de Sr_Furia  
Fecha de Ingreso: abril-2009
Mensajes: 111
Antigüedad: 8 años, 8 meses
Puntos: 8
Respuesta: Problema con Bordes (Ayuda porfavor)

Gracias, Sander, ya lo he solucionado
  #6 (permalink)  
Antiguo 01/12/2009, 19:35
 
Fecha de Ingreso: mayo-2008
Ubicación: Santiago-Chile
Mensajes: 253
Antigüedad: 9 años, 6 meses
Puntos: 1
Respuesta: Problema con Bordes (Ayuda porfavor)

yo creo la clase "clear:both" y la agrego a un <br class="clear" /> entonces así se me soluciona.

pero que bueno que lo hayas solucionado
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 22:44.