Ver Mensaje Individual
  #1 (permalink)  
Antiguo 27/06/2012, 08:58
rufus
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 14 años, 10 meses
Puntos: 1
problema al maquetar un bloque de informacion

hola que tengo en una web un apartado de letras.

en el que a la izquierda aparece un cuadrado con sus 3 imagenes smalltop smallbody y smallbottom y dentro de este la lista con las canciones ("que al pulsar sobre ellas se te redirige a la cancion en cuestion para ver su letra")

pues necesito crear un segundo cuadro negro como el de arriba pero que se situe debajo de este no al lado , al mismo nivel pero a la derecha y no se como ponerlo debajo. os dejo el codigo para que lo entendais mejor...


style.css
Código CSS:
Ver original
  1. .black50{background: URL(images/black50.png);}
  2.  
  3. .smallBox,
  4. .mediumBox,
  5. .bigBox{margin-bottom:20px;}
  6.  
  7. .smallBox,
  8. .smallBoxTop,
  9. .smallBoxBottom {width: 300px;}
  10.  
  11. .smallBoxTop,
  12. .smallBoxBottom{height: 5px;}
  13.  
  14. .smallBoxBody{padding: 15px;}
  15.  
  16. .smallBoxTop{background: URL(images/smallBoxTop.png)no-repeat;}
  17. .smallBoxBottom{background: URL(images/smallBoxBottom.png)no-repeat;}
  18.  
  19. /*segundo smallbox para el segundo disco*/
  20. .black502{background: URL(images/black50.png)}
  21. .smallBox2,
  22. .mediumBox,
  23. .bigBox{margin-bottom:20px;}
  24.  
  25. .smallBox2,
  26. .smallBoxTop2,
  27. .smallBoxBottom2 {width: 300px;}
  28.  
  29. .smallBoxTop2,
  30. .smallBoxBottom2{height: 5px; }
  31.  
  32. .smallBoxBody2{padding: 15px; }
  33.  
  34. .smallBoxTop2{background: URL(images/smallBoxTop.png)no-repeat;}
  35. .smallBoxBottom2{ background: URL(images/smallBoxBottom.png)no-repeat;}
  36.  
  37. /*fin segundo smallbox para el segundo disco*/


letras.php

Código HTML:
Ver original
  1. <div class="tituloSeccion">Letras de canciones</div>
  2.            
  3.             <div class="smallBox floatLeft">
  4.                 <div class="smallBoxTop"></div>
  5.                 <div class="smallBoxBody black50">
  6.                     <b>Selecciona cancion. Disco "Se busca banda"</b>
  7.                     <ol>
  8.                         <li><a href="#1">C&oacute;mo te lo montas</a></li>
  9.                         <li><a href="#2">Tu y yo</a></li>
  10.                         <li><a href="#3">La movida</a></li>
  11.                         <li><a href="#4">Malos tiempos</a></li>
  12.                         <li><a href="#5">Oye Juaqui</a></li>
  13.                         <li><a href="#6">Inma y Estela</a></li>
  14.                         <li><a href="#7">Es lo que hay</a></li>
  15.                         <li><a href="#8">La sombra</a></li>
  16.                         <li><a href="#9">Ostias hostiles</a></li>
  17.                         <li><a href="#10">Un cl&aacute;sico</a></li>
  18.                         <li><a href="#11">No puede ser</a></li>
  19.                         <li><a href="#12">El T&uacute;nel</a></li>
  20.                     </ol>
  21.                     <div class="clear"></div>
  22.                 </div>
  23.                 <div class="smallBoxBottom"></div>
  24.             </div>
  25.            
  26.             <div class="smallBox2 floatLeft">
  27.                 <div class="smallBoxTop2"></div>
  28.                 <div class="smallBoxBody2 black502">
  29.                     <b>Selecciona cancion. Disco "La democracia ha muerto"</b>
  30.                     <ol>
  31.                         <li><a href="#1">Callejuelas</a></li>
  32.                         <li><a href="#2">Contrabandista</a></li>
  33.                         <li><a href="#3">Fundamentalismo</a></li>
  34.                         <li><a href="#4">La cosa esta jodida</a></li>
  35.                         <li><a href="#5">La moto</a></li>
  36.                         <li><a href="#6">No me atrevo</a></li>
  37.                        
  38.                     </ol>
  39.                     <div class="clear"></div>
  40.                 </div>
  41.                 <div class="smallBoxBottom2"></div>
  42.             </div>