Foros del Web » Creando para Internet » CSS »

alinear varios divs

Estas en el tema de alinear varios divs en el foro de CSS en Foros del Web. Hola, este es mi primera aplicacion que hago con photoshop e intentando codificar con html y css Tengo un problema, que primero pongo los codigos ...
  #1 (permalink)  
Antiguo 20/04/2010, 16:57
 
Fecha de Ingreso: abril-2008
Mensajes: 425
Antigüedad: 9 años, 7 meses
Puntos: 2
alinear varios divs

Hola, este es mi primera aplicacion que hago con photoshop e intentando codificar con html y css
Tengo un problema, que primero pongo los codigos y luego explico

Este es el html

Código HTML:
Ver original
  1. <div class="descripcion">
  2.     <div class="campana">
  3.         <div class="fecha">
  4.          <p class="mes">Junio</p>
  5.          <p class="dia">30</p>
  6.         </div>
  7. </div>  <!-- fin campaña -->
  8.  
  9. <ul id="menu">
  10.         <li> <a href="#">Capacitación</a> </li>
  11.         <li> <a href="#">Galería de imágenes</a> </li>
  12.         <li> <a href="#">Ser Consulora</a> </li>
  13.         <li> <a href="#">Promociones</a> </li>
  14.         <li> <a href="#">Productos Natura</a> </li>
  15.         <li> <a href="#">Consejos</a> </li>
  16.         <li> <a href="#">Revista digital</a> </li>
  17.         <li> <a href="#">Contacto</a> </li>
  18.     </ul>
  19.      
  20. </div> <!-- fin descripcion -->

y este el css

Código CSS:
Ver original
  1. .descripcion {
  2.    margin:0 auto;
  3.    padding:0;
  4.    height:188px;
  5.    width:737px;
  6.      }
  7.  
  8.  
  9. ul#menu {
  10.     margin:0;
  11.     padding:0;
  12.     background:url(imagenes/menu.jpg) no-repeat ;
  13.  
  14.   }
  15.   ul#menu li {
  16. float:none;
  17. height:20px;
  18. padding-left:0px;
  19. }  
  20.  
  21. .campana {
  22.    margin:0;
  23.    padding:0;
  24.    margin-left:15px;
  25.    margin-top:16px;
  26.    background:url(imagenes/calendario.png) no-repeat;
  27.    width:112px;
  28.    height:123px;
  29.  
  30.  }
  31.  
  32.  .descripcion .campana .fecha .mes {
  33.    margin:0;
  34.    padding:0;
  35.    font-family:Tahoma, Verdana, arial, serfi;
  36.    font-size:15px;
  37.    color:white;
  38.    margin-left:15px;
  39.    margin-top:30px;
  40. }
  41.  
  42.  .descripcion .campana .fecha .dia {
  43.    margin:0;
  44.    padding:0;
  45.    font-family:Tahoma, Verdana, arial, serfi;
  46.    font-size:50px;
  47.    color:black;
  48.    font-weight:bold;
  49.    text-align:center;
  50. }

tengo un conetenedor que se llama descripcion, y dentro de el quiero poner el div menu a la derecha del div campana, pero me es imposible. Logro ponerlo a la derecha pero no sacarle el margen superior, es decir me queda por debajo del div campana

Espero que me hayan entendio el problema y se agradeoce cualqueir ayuda de anetemano
  #2 (permalink)  
Antiguo 20/04/2010, 22:58
Avatar de emiliodeg  
Fecha de Ingreso: septiembre-2005
Ubicación: Córdoba
Mensajes: 1.830
Antigüedad: 12 años, 3 meses
Puntos: 54
Respuesta: alinear varios divs

bueno ambos elementos el div y el ul son elementos en bloque nunca van a quedar por si solos uno al lado del otro

lo q deberias hacer es algo asi

.descripcion{overflow:hidden}
.campana,#menu{float:left;display:inline}
.campana{width:250px}
#menu{margin-left:10px;width:350px}

espero te sirva la ayuda, sirve para ie7+ y para el resto
__________________
Degiovanni Emilio
developtus.com
  #3 (permalink)  
Antiguo 21/04/2010, 13:50
 
Fecha de Ingreso: abril-2008
Mensajes: 425
Antigüedad: 9 años, 7 meses
Puntos: 2
Respuesta: alinear varios divs

Hola, gracias por responder!
lo probe pero no anduvo, me lo sigue dejando debajo del calendario, otra idea?
Gracias
  #4 (permalink)  
Antiguo 21/04/2010, 14:09
Avatar de MarioAraque
Colaborador
 
Fecha de Ingreso: octubre-2009
Ubicación: Valencia
Mensajes: 1.398
Antigüedad: 8 años, 1 mes
Puntos: 265
Respuesta: alinear varios divs

Al ul menu te conviene meterlo dentro de un div, osea que te quede un div descripcion, que tenga dentro un div campana, y otro div "menu", con el ul dentro.

A campana y a menu hacelos flotar a la izquierda (float:left), y creo que te deberia funcionar, la suma de los widths de campana y menu, mas los de sus margins left y right, mas los de sus paddings left y right, deberia ser menor a 737px...

Saludos.
  #5 (permalink)  
Antiguo 21/04/2010, 18:03
 
Fecha de Ingreso: abril-2008
Mensajes: 425
Antigüedad: 9 años, 7 meses
Puntos: 2
Respuesta: alinear varios divs

Gracias! funciono asi, ya pude poner el menu a la derecha, ahora estoy luchando para que se me vaya al otro margen... pero es cuestion de matematica!

Etiquetas: alinear
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 11:05.