Foros del Web » Creando para Internet » CSS »

Colocar los DIV´s Horizontales (Uno despues de otro)

Estas en el tema de Colocar los DIV´s Horizontales (Uno despues de otro) en el foro de CSS en Foros del Web. Hola amigos, ya estoy más morado que al tratar de colocar 2 cuadros DIV con contenido dentro, que queden 1 despues del otro, pero horizontal ...
  #1 (permalink)  
Antiguo 11/07/2010, 14:29
 
Fecha de Ingreso: marzo-2006
Mensajes: 43
Antigüedad: 11 años, 9 meses
Puntos: 0
Colocar los DIV´s Horizontales (Uno despues de otro)

Hola amigos, ya estoy más morado que al tratar de colocar 2 cuadros DIV con contenido dentro, que queden 1 despues del otro, pero horizontal y no vertical.

Para colocar mis publicidades, me quedaron asi:







Pero yo quisiera que quedara asi:







Es decir, que quedaran los DIVS uno despues del otro, pero horizontal.

Mi estilo está así:


Código CSS:
Ver original
  1. .post_campo {
  2.     background: #fff url(images/styles/CrystalClean/style/postfieldBG.gif) repeat-x bottom left;
  3.     color: #546c7e;
  4.     border: 1px solid #cfdde9;
  5.     padding: 3px 3px 3px 10px;
  6.     margin-top: 2px;
  7.         height:250px;
  8.         width:300px;
  9.     text-align:left;
  10. }
  11. .post_campo strong {
  12.     color: #854f99;
  13. }
  14. .post_campo dt {
  15.     color: #854f99;
  16.     font-weight:700;
  17. }
  18.  
  19. .post_camp {
  20.     background: #fff url(images/styles/CrystalClean/style/postfieldBG.gif) repeat-x bottom left;
  21.     color: #546c7e;
  22.     border: 1px solid #cfdde9;
  23.     padding: 3px 3px 3px 10px;
  24.     margin-top: 2px;
  25.         height:250px;
  26.         width:300px;
  27.     text-align:left;
  28. }
  29. .post_camp strong {
  30.     color: #854f99;
  31. }
  32. .post_camp dt {
  33.     color: #854f99;
  34.     font-weight:700;
  35. }
  36.  
  37.  
  38.  
  39.  
  40. .post_campo2 {
  41.     background: #fff url(images/styles/CrystalClean/style/postfieldBG.gif) repeat-x bottom left;
  42.     color: #546c7e;
  43.     border: 1px solid #cfdde9;
  44.     padding: 3px 3px 3px 10px;
  45.     margin-top: 2px;
  46.         height:50%;
  47.         width:80%;
  48.     text-align:center;
  49.        
  50. }
  51. .post_campo2 strong {
  52.     color: #854f99;
  53. }
  54. .post_campo dt2 {
  55.     color: #854f99;
  56.     font-weight:700;
  57. }



Y mi sintaxis, está asi:


Código HTML:
Ver original
  1. <div class="post_campo2">
  2.  
  3.  
  4. <center><div class="post_campo"><script type="text/javascript"><!--
  5. google_ad_client = "pub-8597137703225965";
  6. /* 300x250, creado 11/07/10 */
  7. google_ad_slot = "8672443388";
  8. google_ad_width = 300;
  9. google_ad_height = 250;
  10. //-->
  11. <script type="text/javascript"
  12. src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  13. </script></div>
  14.  
  15. <div class="post_camp"><!-- BEGIN SMOWTION TAG - 300x250 - latinort: juegos - DO NOT MODIFY -->
  16. <script type="text/javascript"><!--
  17. smowtion_size = "300x250";
  18. smowtion_section = "763528";
  19. //-->
  20. <script type="text/javascript"
  21. src="http://ads.smowtion.com/ad.js">
  22. <!-- END SMOWTION TAG - 300x250 - latinort: juegos - DO NOT MODIFY --></div></center>
  23.  
  24.  
  25. </div>


Bueno, tengo 2 DIV diferentes, pero con el mismo estilo y aún, también probe los 2 contenidos con el mismo DIV CLASS campo y aún, me seguia estando verticalmente.

¿Se podría utilizar el CoolSpan y RowSpan?


A ver si podrían ayudarme a colocarlo vertical. Muchas gracias, espero sus respuestas :(



__________________
:si: ANTARES:si:
  #2 (permalink)  
Antiguo 11/07/2010, 14:50
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: Colocar los DIV´s Horizontales (Uno despues de otro)

Solo agrega float: left; a .post_camp y cuentas que tal.

Saludos
__________________
Grupo Telegram Docker en Español
  #3 (permalink)  
Antiguo 11/07/2010, 17:29
 
Fecha de Ingreso: marzo-2006
Mensajes: 43
Antigüedad: 11 años, 9 meses
Puntos: 0
Respuesta: Colocar los DIV´s Horizontales (Uno despues de otro)

Hola amigo, gracias por la ayuda.

Pues, consegui otro codigo y pude agregar algunos estilos, pero ahora los DIV de cuadritos, me quedan todos alineados a la izquierda.

Es como algo complicado (Digo para mi), por que si quiero centrar 1, los otros 2 se quedan abajo.

Quisiera centar los 3 DIV diferentes, pero que los 3 queden en el centro horizontalmente.

¿Se podria hacer?

Por ahora los tengo asi:




Me gustaria centrarlos, aqui esta el codigo de los estilos utilizados:

Código CSS:
Ver original
  1. .contenedor-banner-item {
  2.     float:left;
  3.         padding:0;
  4.         margin:0 auto;
  5.  
  6. }
  7.  
  8. .banner-item-300-250 {
  9.     width:300px;
  10.     height:250px;
  11.         margin:auto;
  12.     margin-left:11px;
  13.     margin-top:46px;
  14. }
  15.  
  16. .banner-item-300-250-izquierda {
  17.     background:url(images/fondo-banner.jpg);
  18.     background-repeat:no-repeat;
  19.     width:322px;
  20.     height:318px;
  21.     float:left;
  22.         text-align:center;
  23.     margin-left:10px;
  24. }
  25.  
  26. .banner-item-300-250-centro {
  27.     background:url(images/fondo-banner.jpg);
  28.     background-repeat:no-repeat;
  29.     width:322px;
  30.     height:318px;
  31.     float:left;
  32.         text-align:center;
  33.     margin-left:10px;
  34. }
  35.  
  36. .banner-item-300-250-derecha {
  37.     background:url(images/fondo-banner.jpg);
  38.     background-repeat:no-repeat;
  39.     width:322px;
  40.     height:318px;
  41.     float:left;
  42.         text-align:center;
  43.     margin-left:10px;
  44. }


Yo quite el contenedor y no me afecto. Creo que no me sirve. O tengo que dejarlo?

Gracias por sus respuestas y ayuda.
__________________
:si: ANTARES:si:
  #4 (permalink)  
Antiguo 11/07/2010, 17: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: Colocar los DIV´s Horizontales (Uno despues de otro)

Hola:

Mejor déjalo e intenta centrarlos utilizando margin y padding o dandole un width de 33%.

Saludos.

  #5 (permalink)  
Antiguo 11/07/2010, 20:43
 
Fecha de Ingreso: junio-2010
Mensajes: 56
Antigüedad: 7 años, 6 meses
Puntos: 3
Respuesta: Colocar los DIV´s Horizontales (Uno despues de otro)

Tambien ten encuenta que si la resolucion de pantalla es mas pequeña, los div saltaran y se colocaran a abajo.
  #6 (permalink)  
Antiguo 12/07/2010, 08:33
 
Fecha de Ingreso: marzo-2006
Mensajes: 43
Antigüedad: 11 años, 9 meses
Puntos: 0
Respuesta: Colocar los DIV´s Horizontales (Uno despues de otro)

Exacto, los modifique con magin-left a 3%, para que en monitores de 1024, se vea exacto...

Pero lo que quiero exactamente, esté centrado, aunque la ventana se vaya agrandando, los banners se van colocando en el centro y no se queden a la izquierda, no se si me explico.

Si los veo en mi monitor de 1440x900, los div´s estan a la izquierda. No se por que se maneja asi.

¿Hay algun codigo HTML o modificar el CSS, para que siempre estén centrados?

Muchas gracais desde ya y disculpen mi antojo. :(
__________________
:si: ANTARES:si:

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 18:57.