Foros del Web » Creando para Internet » HTML »

Ayuda con 4 DIV en uno

Estas en el tema de Ayuda con 4 DIV en uno en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/03/2010, 13:08
Avatar de carlospc  
Fecha de Ingreso: noviembre-2008
Ubicación: Huancayo/Perú
Mensajes: 240
Antigüedad: 9 años, 1 mes
Puntos: 12
Ayuda con 4 DIV en uno

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

  #2 (permalink)  
Antiguo 16/03/2010, 13:59
Avatar de jmdz  
Fecha de Ingreso: marzo-2010
Ubicación: ¿Acá?
Mensajes: 54
Antigüedad: 7 años, 9 meses
Puntos: 2
Respuesta: Ayuda con 4 DIV en uno

Y vos como queres que se vea? De paso, tenes muchas propiedades CSS a revisar. Saludos
  #3 (permalink)  
Antiguo 16/03/2010, 14:04
Avatar de Kaze71  
Fecha de Ingreso: enero-2010
Mensajes: 44
Antigüedad: 7 años, 10 meses
Puntos: 4
Respuesta: Ayuda con 4 DIV en uno

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;
}
  #4 (permalink)  
Antiguo 16/03/2010, 14:43
 
Fecha de Ingreso: octubre-2009
Mensajes: 32
Antigüedad: 8 años, 1 mes
Puntos: 2
Respuesta: Ayuda con 4 DIV en uno

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.
  #5 (permalink)  
Antiguo 16/03/2010, 16:31
Avatar de carlospc  
Fecha de Ingreso: noviembre-2008
Ubicación: Huancayo/Perú
Mensajes: 240
Antigüedad: 9 años, 1 mes
Puntos: 12
Respuesta: Ayuda con 4 DIV en uno

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
  #6 (permalink)  
Antiguo 16/03/2010, 17:14
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Ayuda con 4 DIV en uno

Hola:

Cita:
Iniciado por carlospc Ver Mensaje
... 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.

  #7 (permalink)  
Antiguo 16/03/2010, 17:43
Avatar de jmdz  
Fecha de Ingreso: marzo-2010
Ubicación: ¿Acá?
Mensajes: 54
Antigüedad: 7 años, 9 meses
Puntos: 2
Respuesta: Ayuda con 4 DIV en uno

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:
Ver original
  1. .anun1{
  2.     float: left;
  3.     width: 264px;
  4.     height: 150px;
  5.     background-color:#0d0d0d;
  6. }
  7. .anun1_img{
  8.     border: 0 none;
  9.     float: left;
  10.     width: 100px;
  11.     height: 130px;
  12. }
  13. .anun1_det{
  14.     border: 0 none;
  15.     text-align:left;
  16.     font-family:Arial, Helvetica, sans-serif;
  17.     font-size:12px;
  18.     color:#cccccc;
  19. }
  20. .anun1_city{
  21.     border: 0 none;
  22.     width: 100px;
  23.     height: 16px;
  24.     text-align:center;
  25.     font-family:Arial, Helvetica, sans-serif;
  26.     font-size:12px;
  27.     font-weight:bold;
  28.     background-image:url(publi/city.gif);
  29.     color:#0d0d0d;
  30.     float: left;
  31. }
  32. .anun1_tip{
  33.     border: 0 none;
  34.     width: 260px;
  35.     -width: 160px;
  36.     height: 16px;
  37.     text-align:center;
  38.     font-family:Arial, Helvetica, sans-serif;
  39.     font-size:12px;
  40.     font-weight:bold;
  41.     background-image:url(publi/tip.gif);
  42.     color:#0d0d0d;
  43. }
  44. div.fila{
  45.     clear:both;
  46. }

Código HTML:
Ver original
  1. <div class="anun1">
  2. <div class="fila">
  3. <div class="anun1_img"><img src="publi/mini.gif" border="0" /></div>
  4. <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>
  5. </div>
  6. <div class="fila">
  7. <div class="anun1_city">ciudad</div>
  8. <div class="anun1_tip">01-9806.....</div>
  9. </div>
  10. </div>
  #8 (permalink)  
Antiguo 16/03/2010, 17:43
Avatar de OmarV  
Fecha de Ingreso: febrero-2010
Mensajes: 82
Antigüedad: 7 años, 10 meses
Puntos: 3
Respuesta: Ayuda con 4 DIV en uno

.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 (;
  #9 (permalink)  
Antiguo 16/03/2010, 17:44
Avatar de carlospc  
Fecha de Ingreso: noviembre-2008
Ubicación: Huancayo/Perú
Mensajes: 240
Antigüedad: 9 años, 1 mes
Puntos: 12
Respuesta: Ayuda con 4 DIV en uno

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...
  #10 (permalink)  
Antiguo 16/03/2010, 18:09
 
Fecha de Ingreso: octubre-2009
Mensajes: 32
Antigüedad: 8 años, 1 mes
Puntos: 2
Respuesta: Ayuda con 4 DIV en uno

Cita:
Iniciado por carlospc Ver Mensaje
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.
  #11 (permalink)  
Antiguo 16/03/2010, 18:43
Avatar de carlospc  
Fecha de Ingreso: noviembre-2008
Ubicación: Huancayo/Perú
Mensajes: 240
Antigüedad: 9 años, 1 mes
Puntos: 12
Respuesta: Ayuda con 4 DIV en uno

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...

Última edición por carlospc; 16/03/2010 a las 19:28
  #12 (permalink)  
Antiguo 16/03/2010, 20:15
Avatar de carlospc  
Fecha de Ingreso: noviembre-2008
Ubicación: Huancayo/Perú
Mensajes: 240
Antigüedad: 9 años, 1 mes
Puntos: 12
Respuesta: Ayuda con 4 DIV en uno

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...
  #13 (permalink)  
Antiguo 17/03/2010, 10:35
Avatar de jmdz  
Fecha de Ingreso: marzo-2010
Ubicación: ¿Acá?
Mensajes: 54
Antigüedad: 7 años, 9 meses
Puntos: 2
Información Respuesta: Ayuda con 4 DIV en uno

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.
  #14 (permalink)  
Antiguo 19/03/2010, 06:36
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Ayuda con 4 DIV en uno

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.


Etiquetas: Ninguno
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 10:28.