Foros del Web » Creando para Internet » CSS »

Problema con bordes en cabecera 3 columnas

Estas en el tema de Problema con bordes en cabecera 3 columnas en el foro de CSS en Foros del Web. Estoy tratando de montar una cabecera así a la manera que veis abajo. Es decir, es tipo tabla, una div envolvente y tres div "celdas". ...
  #1 (permalink)  
Antiguo 10/01/2008, 08:42
 
Fecha de Ingreso: septiembre-2007
Mensajes: 99
Antigüedad: 10 años, 2 meses
Puntos: 0
Problema con bordes en cabecera 3 columnas

Estoy tratando de montar una cabecera así a la manera que veis abajo. Es decir, es tipo tabla, una div envolvente y tres div "celdas". El problema es que Firefox la lee ya perfecto, pero IE se hace un pollo con los bordes de la "celda" central y me separa los bordes izquierdo y derecho de ella de los de sus "celdas" contiguas. ¿Como hago para que queden tambien en IE todo bien pegadito?

Gracias por adelantado...

Código:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
<!--
#div_cab {
	margin: 0px;
	padding: 0px;
	border: 2px solid #009900;
	height: 81px;
}

#div_cab_iz {
	float: left;
	width: 25%;
	background-image: url(../fondo1.jpg);
	background-repeat:  repeat-y;
	background-position: right;
	text-align: center;
	border: 1px solid #003300;
	height: 79px;
	margin: 0px;
	padding: 0px;
}
#div_cab_dr {
	float: right;
	width: 25%;
	background-image: url(../fondo2.jpg);
	background-repeat:  repeat-y;
	background-position: left;
	text-align: center;
	border: 1px solid #003300;
	height: 79px;
	margin: 0px;
	padding: 0px;
}
#div_cab_cent {
	width: auto;
	height: 79px;
	margin: 0px auto;
	padding: 0px;
	text-align: center;
	border: 1px solid #003300;
}
-->
</style>
</head>

<body>
<div id=div_cab>
  <div id="div_cab_iz"><img src="../logo.gif" width="168" height="79" /></div>
  <div id="div_cab_dr">derecha</div>
  <div id="div_cab_cent">central</div>
</div>
</body>
</html>
  #2 (permalink)  
Antiguo 10/01/2008, 08:43
 
Fecha de Ingreso: enero-2007
Mensajes: 157
Antigüedad: 10 años, 10 meses
Puntos: 2
Re: Problema con bordes en cabecera 3 columnas

Intenta poner al principio del css * { margin:0; padding: 0 } Lo que hace es quitar margenes a todos los elementos de la página.
  #3 (permalink)  
Antiguo 10/01/2008, 08:49
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: Problema con bordes en cabecera 3 columnas

yo no veo cual es el problema, no te salen las 3 celdas juntas?
  #4 (permalink)  
Antiguo 10/01/2008, 10:56
 
Fecha de Ingreso: septiembre-2007
Mensajes: 99
Antigüedad: 10 años, 2 meses
Puntos: 0
Re: Problema con bordes en cabecera 3 columnas

No sale, safranero....Hades87, te explico el problema mas detalladamente: en principio las celdas deben ocupar 25% las laterales y 50% la central. Al darle bordes, las celdas laterales pasan a tener 25%+borde. Entonces si la dejo en 50% la central, se desdibuja todo el diseño en IE porque ésta no cabe entre las otras dos. Tengo que ponerlo en auto. Todo bien, pero en auto, no se expande hasta rellenar todo el hueco. Se queda a unos 3 pixeles separado por cada lado...
  #5 (permalink)  
Antiguo 10/01/2008, 11:28
 
Fecha de Ingreso: septiembre-2007
Mensajes: 99
Antigüedad: 10 años, 2 meses
Puntos: 0
Re: Problema con bordes en cabecera 3 columnas

Lo solucioné con un workaround: he metido una div contenedera más. Ahora juego con ella, sus bordes y los de las divs exteriores para dibujar todos los bordes interiores que necesito, y la div celda central que es la que no encaja bien es invisible. Eah...
  #6 (permalink)  
Antiguo 10/01/2008, 14:04
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: Problema con bordes en cabecera 3 columnas

mmm entiendo, también podrias hacer 2 celdas con float left y right y meterles tamaño 25% y la del centro ya saldría automáticamente no?
  #7 (permalink)  
Antiguo 10/01/2008, 14:28
 
Fecha de Ingreso: septiembre-2007
Mensajes: 99
Antigüedad: 10 años, 2 meses
Puntos: 0
Re: Problema con bordes en cabecera 3 columnas

Bueno, de ahí partimos, Hades, de tener dos celdas flotantes como ves en el codigo, y una en medio que debería encajar líquida y perfecta para todos los navegadores y no lo hace. Los últimos valores que le he dado a la central son 25% de margen a los lados y width=auto, que es lo que mejor va. Ya he solucionado con eso y el truco que puse arriba el tema de los bordes. Pero esa div central debería llevar también un fondo...con lo cual estamos en lo mismo, que se ve exactamente ajustado en FF y en IE se me separa de las flotantes laterales unos pixeles. Ya no tengo más recursos, así que estoy viendo de cambiar el diseño original (se trata de una web hecha en tablas que tengo que pasar a divs) por culpa de estas cosas.
  #8 (permalink)  
Antiguo 10/01/2008, 15:44
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: Problema con bordes en cabecera 3 columnas

entiendo, pues yo ya no se que mas hacer, pq parece que ya has intentado todo no?:\
  #9 (permalink)  
Antiguo 10/01/2008, 17:11
 
Fecha de Ingreso: septiembre-2007
Mensajes: 99
Antigüedad: 10 años, 2 meses
Puntos: 0
Re: Problema con bordes en cabecera 3 columnas

Pues sí, ya hice de todo y puedo garantizar que no hay modo de que salga como tiene que salir. He jugado con overflows incluso. Nada. Los navegadores entienden de modo distinto la propiedad "auto" y en un caso así no puede variar ni un píxel, ni "auto" arriba ni "auto" abajo.
Aún me debato entre cambiar el diseño por mi cuenta o meter una sencilla, rápida y eficaz tablita de sólo tres celditas, formateada con tres mínimos apuntes de css y listo. La verdad, vaya tela, vaya tela, cómo se nos ha complicado la vida...
  #10 (permalink)  
Antiguo 12/01/2008, 05:37
 
Fecha de Ingreso: septiembre-2007
Mensajes: 99
Antigüedad: 10 años, 2 meses
Puntos: 0
Re: Problema con bordes en cabecera 3 columnas

Esto...he encontrado una manera de lograrlo a base de anidar más divs dentro de los 4 principales, para así jugar con los fondos. Puedo dar así un fondo general que me tapa todos los huecos en todos los navegadores y luego sobreponer el resto de fondos que necesito se vayan viendo en cada div-celda, haciendo algunos malabarismos de photoshop.
Pero me surge otra duda. Es bastante más código que usar una tablita de tres celdas y punto, sin fondos sobrepuestos ni nada... ¿Qué creéis que debería hacer?
  #11 (permalink)  
Antiguo 24/11/2009, 11:10
Avatar de youneedtotalk  
Fecha de Ingreso: noviembre-2009
Mensajes: 1
Antigüedad: 8 años
Puntos: 0
Respuesta: Problema con bordes en cabecera 3 columnas

Espero no llegar tarde , hace tanto tiempo....
Bueno, simplemente añade esta línea al CSS del div izquierdo (margin-left, para el derecho) ò los 2 al div central, donde gustes. Yo lo veo bien con -3px, tú verás:
*html #div_cab_iz {margin-right: -3px;}

Por razones de peso los navegadores de "verdad" cogerán los divs # y Exploiter el *html
Es un hack muy sencillo que funciona siempre

Saludos
  #12 (permalink)  
Antiguo 24/11/2009, 11:11
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Respuesta: Problema con bordes en cabecera 3 columnas

Hola youneedtotalk

Te recuerdo el aviso que había al final de este tema y que parece que no has leído.



Tema cerrado.
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.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 00:22.