Foros del Web » Creando para Internet » CSS »

problema al maquetar un bloque de informacion

Estas en el tema de problema al maquetar un bloque de informacion en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/06/2012, 08:58
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 10 años, 2 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>
  #2 (permalink)  
Antiguo 28/06/2012, 00:12
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 10 años, 5 meses
Puntos: 306
Respuesta: problema al maquetar un bloque de informacion

Hola
Según tu ejemplo: http://jsfiddle.net/c2am/gdKta/8/embedded/result/

Cambie los fondos por colores, ya que no tengo las imágenes que se mencionan

Ahora, no entendí esto:
Cita:
se situe debajo de este no al lado , al mismo nivel pero a la derecha
¿debajo o al mismo nivel?
¿no al lado o a la derecha?


De todas forma estoy casi seguro que no muestras todo el código que afectan estos div, ya que tienes una clase llamada floatLeft que no veo en el css, y ya jugando de adivino tramposo te diría que esa clase tiene lo siguiente:
Código CSS:
Ver original
  1. floatLeft{
  2. float:left;
  3. }
Que adivino que soy

Lo cual hará que las cajas se ubiquen una al lado de la otra siempre y cuando su contenedor sea lo suficientemente ancho para que quepan ambas. En caso contrario la segunda caja (div) se desplazará debajo de la primera.

Bueno espero tus aclaraciones.
Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #3 (permalink)  
Antiguo 28/06/2012, 06:17
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 10 años, 2 meses
Puntos: 1
Respuesta: problema al maquetar un bloque de informacion

gracias c2am por responder mira

lo que quiero es que la segunda caja con el listado del segundo disco se situe debajo de la primera lista de canciones del disco anterior.

te pongo el enlace a la pagina (pero esta sin actualizar)

www.jamondemono.com

en la seccion letras

veras a la izquierda el listado de canciones a la derecha cada cancion con su letra y con botones de ancla para volver arriba.

pues bien debajo de la caja que esta a la izquierda ("la que contiene el listado de canciones") quiero poner otra caja justo debajo de la primera con el otro listado.

paso a ponerte mas codigo:
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>
  43.            
  44.             <div class="mediumBox floatRight">
  45.                 <a name="1"></a>
  46.                 <div class="mediumBoxTop"></div>
  47.                 <div class="mediumBoxBody black50">
  48.                     <a href="#top" class="floatRight">volver arriba</a>
  49.                     <pre>
  50. <h4>C&Oacute;MO TE LO MONTAS T&Uacute;</h4>
  51. ¿C&oacute;mo te lo montas t&uacute;?...
  52. Pa resistir todas las ma&ntilde;anas
  53. la vida que no quieres vivir.
  54. Pa resistir toda la semana
  55. en un curro que no te hace feliz.
  56. Pa no estallar como un ob&uacute;s,
  57. pa no perderte en cualquier club,
  58. Y no ser nadie.
  59. Envenenado en el mercado,
  60. hipop&oacute;tamo hipotecado…
  61. No hay m&aacute;s cojones, o si.
  62. Programado pa creer
  63. Que su vida no es de &eacute;l,
  64. programado para no poder.
  65. Necesito que me cuentes
  66. como ostias te haces fuerte
  67. Tienes chinchetas hasta pa dormir.
  68. Te maltratan y te violan
  69. pero aqu&iacute; no hay leyes…
  70. Si no tienes trabajo
  71. ya no sabes qu&eacute; hacer…
  72. Lo mismo que hace 20 a&ntilde;os,
  73. lo mismo…
  74.                     </pre>
  75.                     <div class="clear"></div>
  76.                 </div>

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*/
  #4 (permalink)  
Antiguo 28/06/2012, 09:10
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 10 años, 2 meses
Puntos: 1
Respuesta: problema al maquetar un bloque de informacion

exacto tengo en el css (es ke la pagina no la hize yo pero la estoy rehaciendo.

tiene el floatLeft{float: left;}

si lo quito bien . la segunda lista se me pone debajo de la primera pero el texto con las letras de las canciones de la derecha se me baja varios pixeles muchos pixeles hacia abajo y eso no mola. nada que no consigo maketar bien esto :(
  #5 (permalink)  
Antiguo 28/06/2012, 09:15
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 10 años, 2 meses
Puntos: 1
Respuesta: problema al maquetar un bloque de informacion

ahora el problema que tengo aparte de que las letras de las canciones estan mas abajo no empiezan a la altura de los menus de la izquierda es que los dos menus del disco 1 y del disco 2 estan pegados. y no consigo separarlos ni con paddin-top ni marging-top ...
  #6 (permalink)  
Antiguo 29/06/2012, 06:54
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 10 años, 2 meses
Puntos: 1
Respuesta: problema al maquetar un bloque de informacion

por favor me urge solucionar esto. ninguno podeis ayudarme?? please helpp!!!!
  #7 (permalink)  
Antiguo 29/06/2012, 08:41
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 10 años, 5 meses
Puntos: 306
Respuesta: problema al maquetar un bloque de informacion

Entonces lo que quieres es que cada menu coincida en horizontal con la primer canción del disco.?
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #8 (permalink)  
Antiguo 29/06/2012, 08:57
 
Fecha de Ingreso: mayo-2009
Ubicación: Andalucia
Mensajes: 650
Antigüedad: 10 años, 2 meses
Puntos: 1
Respuesta: problema al maquetar un bloque de informacion

No mira tengo lo siguiente imagina una cuadrado (lo que contiene toda la informacion)

y dentro del cuadrado quiero dos columnas, la de la izquierda para los menus con listas para ver las letras de cada cancion. y a la derecha las letras de cada cancion. pero las listas con toda la parrafada de las letras deben de quedar a la altura del primer menu en www.jamondemono.com en la seccion de letras

Veras el menu a la izquierda y a la primera cancion a la derecha a la misma altura

pues yo quiero los dos menus a la izquierda (disco 1 y disco 2) y las letras a la derecha pero a la altura del primer menu.

no se si me he explicado bien...
  #9 (permalink)  
Antiguo 29/06/2012, 09:12
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 10 años, 5 meses
Puntos: 306
Respuesta: problema al maquetar un bloque de informacion

Bien, ahora ví cual es tu problema.
Solucion:
Cambia la estructura. mete los dos menú dentro un div con float:left, lo que sería la columna izquierda, y mete las canciones en otro div con float:right, lo que sería la columna derecha.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Etiquetas: imagenes, informacion, maquetar, bloques, fondo
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 15:55.