Ayuda con 4 DIV en uno

[carlospc]

Tengo el siguiente problema al tratar de acomodar 4 divs dentro de uno solo... no se como explicarlo asi que mejor se los pongo en imagenes, el IE se ve bien pero en Firefox no, quisiera que alguien me de una manita en los css, o en lo que este fallando

Este es el codigo html

Código HTML:

<div class="anun1">
<div class="anun1_img"><img src="publi/mini.gif" border="0" /></div>
<div class="anun1_det">esta es una frase comun y sencilla sin nada de extraordinario, solo esta escrita para rellenar el div que lo contiene y punto, bueno y tambien esta para ver la cantidad de caracteres que soporta.</div>
<div class="anun1_city">ciudad</div>
<div class="anun1_tip">01-9806.....</div>
</div> 

Y este el CSS correspondiente

Código HTML:

.anun1{
   	border: 2px solid #0d0d0d;
  	float: left;
  	margin-left:2px;
  	margin-top:2px;
  	width: 264px;
	height: 150px;
	background-color:#0d0d0d;
}
.anun1_img{
	display:table-cell;
   	border: 0px solid #fff;
  	float: left;
  	margin-left:0px;
  	margin-top:0px;
  	width: 100px;
	height: 130px;
	padding-left:10px;
	padding-top:5px;
	vertical-align:middle;
}
.anun1_det{
   	border: 0px solid #fff;
  	float: left;
  	margin-left:0px;
  	margin-top:0px;
  	width: 160px;
	height: 130px;
	text-align:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#cccccc;
}
.anun1_city{
   	border: 0px solid #fff;
  	float: left;
  	margin-left:0px;
  	margin-top:0px;
  	width: 100px;
	height: 16px;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	background-image:url(publi/city.gif);
	color:#0d0d0d;
}
.anun1_tip{
   	border: 0px solid #fff;
  	float: left;
  	margin-left:0px;
  	margin-top:0px;
  	width: 160px;
	height: 16px;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	background-image:url(publi/tip.gif);
	color:#0d0d0d;
}

y en esta imagen el resultado de como se ve

[jmdz]

Y vos como queres que se vea? De paso, tenes muchas propiedades CSS a revisar. Saludos

[Kaze71]

Prueba con algo así:

Código HTML:

<div class="anun1">
    <div class="anun1_img"><img align="left" src="publi/mini.gif" border="0" /></div>
    <span class="anun1_det">esta es una frase comun y sencilla sin nada de extraordinario, solo esta escrita para rellenar el div que lo contiene y punto, bueno y tambien esta para ver la cantidad de caracteres que soporta.</span>
    <div>
        <span class="anun1_city">ciudad</span>
        <span class="anun1_tip">01-9806.....</span>
    </div>
</div> 

Código:

// CSS

.anun1{
	border: 2px solid #0d0d0d;
	float: left;
	margin-left:2px;
	margin-top:2px;
	width: 264px;
	height: 150px;
	background-color:#0d0d0d;
}
.anun1_img{
	display:table-cell;
	border: 0px solid #fff;
	float: left;
	margin-left:0px;
	margin-top:0px;
	width: 100px;
	height: 130px;
	padding-left:10px;
	padding-top:5px;
	vertical-align:middle;
}
.anun1_det{
	border: 0px solid #fff;
	clear:both;
	margin-left:0px;
	margin-top:0px;
	width: 160px;
	height: 130px;
	text-align:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#cccccc;
}
.anun1_city{
	border: 0px solid #fff;
	float: left;
	margin-left:0px;
	margin-top:0px;
	width: 100px;
	clear:both;
	height: 16px;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	background-image:url(publi/city.gif);
	color:#0d0d0d;
}
.anun1_tip{
	border: 0px solid #fff;
	float: left;
	margin-left:0px;
	margin-top:0px;
	width: 160px;
	height: 16px;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	background-image:url(publi/tip.gif);
	color:#0d0d0d;
}

[snahor]

No mencionas que versión de IE estás usando. Tienes que aprender el modelo de caja, IE interpreta diferente el ancho de un div. El problema es el padding que tiene anun1_img.

A revisar bien tus conceptos del modelo de caja.

[carlospc]

JMDZ como mencione en IE se ve bien, y mi problema es en Firefox, es decir que en la imagen se deduce que es lo que quiero lograr, KAZE 71 gracias... me arreglo el problema con el Firefox, solo que ahora es el IE el que lo muestra mal... snahor, gracias pero el diseño web lo que pretende creo que es que se vea bien en todos los navegadores independientemente de la version de estos... aya y referente a la imagen le puse el pading puesto que la imagen no tiene el mismo ancho que el div que lo contiene y le puse ese padding para que se vea centrado en su contenedor... voy a seguir intentando y gracias... estoy abandonando las tablas y pasando a maquetacion con divs, comprendame la burrada... jeje :D

[jomaruro]

Hola:

Iniciado por carlospc

... pero el diseño web lo que pretende creo que es que se vea bien en todos los navegadores independientemente de la version de estos...

Cierto, pero según la versión de IE funcionan unas cosas y otras no, con lo cual unas se arreglan de una manera y otras de otra. Por eso es importante indicar a que versión de IE te refieres.

Saludos.

[jmdz]

Vamos por partes si venias maquetando con tablas y ahora queres hacerlo con div's te felicito

Pero usemos la neurona (los dos juntos, digo) lo bueno de maquetar con tablas es que tenes una cuadricula de filas y celdas donde encajas cada cosa, con div's pensalo igual, creamos un div para cada fila y un div para cada celda y hacemos que esas filas no se superpongan aun siendo todas las div's flotantes: clear:both;.

Una vez logradas tus filas luchamos con las celdas, pero acá hay un detalle que nos puede ahorrar algo de código: si tenemos una imagen a la izquierda y un texto a la derecha, con solo hacer la imagen flotante a la izquierda ya esta

Aparte, la versión de IE realmente importa IE6 hace una cosa, IE7 otra distinta e IE8 una tercera variante y aun no sabemos que locas formas tendrá IE9 de interpretar el mismo código. Pero en todo caso, como los IE's hasta ahora no interpretan bien el modelo de caja podemos hacer las cosas bien y luego forzarlas para IE usando el cochino guion antes del nombre de la propiedad, ejemplo: width:260px;-width:160px; IE va a mostrar 160, el resto de los navegadores: 260.

Saludos.

Código probado solo en IE6 y GC4 ( si, en esta PC tengo IE6 y GC4 pero ni FF ni OB ni AS, el mundo esta loco-loco )

Código CSS:

.anun1{
    float: left;
    width: 264px;
    height: 150px;
    background-color:#0d0d0d;
}
.anun1_img{
    border: 0 none;
    float: left;
    width: 100px;
    height: 130px;
}
.anun1_det{
    border: 0 none;
    text-align:left;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#cccccc;
}
.anun1_city{
    border: 0 none;
    width: 100px;
    height: 16px;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    background-image:url(publi/city.gif);
    color:#0d0d0d;
    float: left;
}
.anun1_tip{
    border: 0 none;
    width: 260px;
    -width: 160px;
    height: 16px;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    background-image:url(publi/tip.gif);
    color:#0d0d0d;
}
div.fila{
    clear:both;
}
 

Código HTML:

<div class="anun1">
<div class="fila">
<div class="anun1_img"><img src="publi/mini.gif" border="0" /></div>
<div class="anun1_det">esta es una frase comun y sencilla sin nada de extraordinario, solo esta escrita para rellenar el div que lo contiene y punto, bueno y tambien esta para ver la cantidad de caracteres que soporta.</div>
</div>
<div class="fila">
<div class="anun1_city">ciudad</div>
<div class="anun1_tip">01-9806.....</div>
</div>
</div>
 

[OmarV]

.anun1{
border: 2px solid #0d0d0d;
float: left;
margin-left:2px;
margin-top:2px;
width: 264px;
height: 150px;
background-color:#0d0d0d;
}
.anun1_img{
display:table-cell;
border: 0px solid #fff;
float: left;
margin-left:0px;
margin-top:0px;
width: 100px; // 100 + 10 = 110
height: 130px;
padding-left:10px;
padding-top:5px;
vertical-align:middle;
}
.anun1_det{
border: 0px solid #fff;
float: left;
margin-left:0px;
margin-top:0px;
width: 160px;
height: 130px;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#cccccc;
}

160 + 110 =270 Aumentale al width de anun1 (;

[carlospc]

Bueno lo de adaptar a diversas versiones si esta bien, lo estoy probando en IE8, pero el problema es en firefox que no se visualiza bien, y mi error se que radica en esto de los css y la utilizacion correcta de los divs... todo lo trabajaba en tablas... pero ya era hora de hacer las cosas bien... solo que duele aprender... jeje... alguna idea... gracias...

[snahor]

Iniciado por carlospc

pero el diseño web lo que pretende creo que es que se vea bien en todos los navegadores independientemente de la version de estos... aya y referente a la imagen le puse el pading puesto que la imagen no tiene el mismo ancho que el div que lo contiene y le puse ese padding para que se vea centrado en su contenedor

Te repito necesitas aprender lo que es el modelo de caja, ¿acaso crees que lo digo por ser troll? Para que se vean "igual" en todos los navegadores necesitas conocer lo ya mencionado. Y el objetivo del diseño web no es que se vea igual en todos los navegadores, (que me disculpen los que discrepen con lo siguiente) pero esa es una idea vieja y ortodoxa (tal vez sea factible con la venida de IE9 y seremos felices todos). Infórmate antes de responder la próxima vez.

Una opción sería que uses un reset y un js (sólo para IE y dependiendo de la versión) para lograr que se vea "igual" en todos los navegadores.

Puedes visitar quircksmode.org es una buena referencia.

[carlospc]

Ya descubri el embrollo de todo esto, al div principal que va alojar los otros 4 le asigne un ancho determinado que es de 264 y un borde de 2px puesto que en IE el borde crece hacia dentro (osea anulando el borde derecho e izquierdo) para disponer de 260 px integros, el detalle es que firefox hace crecer los bordes hacia fuera, osea en firefox dispongo de los 264 integros y al final con todo y bordes mi div termina midiendo 268 (ploppp...) bueno el unico problema hasta ahi es que en firefox me terminaria sobrando 4 px, hasta ahi tenia pensado insertar 4 divs (como una tabla de 2 x 2) solo que el primer div donde colocaba una imagen media 100px de ancho y el siguiente div 160px solo que el div de 100px debia contener una imagen de 80px de ancho, y para que se vea centrada al div le asigne un padding de 10 para que bote la imagen y se vea al centro del div que lo contiene, y el problema es que mientras que IE aleja con contenido del div 10px, firefox "empuja" no solo su propio contenido, si no tambien al siguiente div, es decir que si en firefox me sobraban 4px por ello que que sus bordes crecen hacia fuera, ahora me faltaban 6px por que el div el padding de un div empuja al siguiente div... todo un anriedo total...

En esta imagen esta el resumen del problema haber si la entienden, y haber si alguien me da una manita...



Por ultimo pense anular los bordes (para evitar de que uno crezca hacia fuera o dentro) y que la imagen ocupe todo el contenido del div para no hacerme lios en que al alinear se vea afectado el siguiente div..

O que me recomiendan... no se ya toi loco...

[carlospc]

Una pregunta, alguien me podria explicar detalladamente para que sirve el padding, tenia entendido que era para dejar un margen interno y se aplicaba a un contenedor, pero veo que firefox no solo le aplica al contenido del div al que le aplico, si no tambien afecta a a otro div que se encuentre fuera de este a su lado... y para que se usa el clear:both; no termino de entender su uso...

no crei que fuera tan dificil maquetar correctamente...

[jmdz]

Vamos por partes, por más que IE este renderizando el código como vos queres que se vea y FF no, el que esta renderizando mal es IE, FF esta haciendo lo que se supone que debe hacer.

Las propiedades del modelo visual de caja:
Width: ancho del contenido (ni rellenos, ni margenes, ni bordes, ni nada más).
Height: alto del contenido (ídem).
Padding: relleno (espacio entre el contenido y el borde).
Border: borde.
Margin: margen (espacio entre esta caja y las otras cajas).

Espacio horizontal de una caja:
El espacio horizontal que necesita una caja es igual a la suma de su:

• margin-left
• border-left
• padding-left
• width
• padding-right
• border-right
• margin-right

Espacio vertical de una caja:
El espacio vertical que necesita una caja es igual a la suma de su:

• margin-top
• border-top
• padding-top
• height
• padding-bottom
• border-bottom
• margin-bottom

Propiedad clear de una caja
Float hace que una caja flote, pero clear evita que flote al lado de otra.

Cuando se define la propiedad clear a una caja lo que se hace es aumentar el margin-top lo necesario para que la caja a la que le definimos el clear no tenga una caja flotante del lado a mantener limpio (clear), o sea, un <div/> (u otro elemento de caja) con clear:left; no puede tener cajas flotantes a la izquierda, por eso se aumenta el margen superior para que quede por debajo de las cajas que estén flotando a la izquierda. Si se establece clear:right; esa caja no podrá tener cajas flotantes a la derecha y de vuelta se amplia el margen superior. Además se puede establecer a clear:both; para que la caja no pueda tener ninguna caja flotante al lado o clear:none; para indicar que la caja puede tener a cualquier lado cajas flotantes (este es el valor por defecto de esta propiedad).

Saludos.

[jomaruro]

Hola:

Por si te es útil, leéte estas aportacionnes de Mikmoro:

Pequeña guía de migración a XHTML+CSS (Parte I)
Pequeña guía de migración a XHTML+CSS (Parte II)

En la segunda parte viene explicada, paso a paso, la transformación de una página hecha con tablas en una hecha con CSS.

Saludos.