problema al maquetar un bloque de informacion

rufus · #1 (**permalink**) 27/06/2012, 08:58

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.black50{background: URL(images/black50.png);}
 
.smallBox,
.mediumBox,
.bigBox{margin-bottom:20px;}
 
.smallBox,
.smallBoxTop,
.smallBoxBottom {width: 300px;}
 
.smallBoxTop,
.smallBoxBottom{height: 5px;}
 
.smallBoxBody{padding: 15px;}
 
.smallBoxTop{background: URL(images/smallBoxTop.png)no-repeat;}
.smallBoxBottom{background: URL(images/smallBoxBottom.png)no-repeat;}
 
/*segundo smallbox para el segundo disco*/
.black502{background: URL(images/black50.png)}
.smallBox2,
.mediumBox,
.bigBox{margin-bottom:20px;}
 
.smallBox2,
.smallBoxTop2,
.smallBoxBottom2 {width: 300px;}
 
.smallBoxTop2,
.smallBoxBottom2{height: 5px; }
 
.smallBoxBody2{padding: 15px; }
 
.smallBoxTop2{background: URL(images/smallBoxTop.png)no-repeat;}
.smallBoxBottom2{ background: URL(images/smallBoxBottom.png)no-repeat;}
 
/*fin segundo smallbox para el segundo disco*/

letras.php

Código HTML:

Ver original<div class="tituloSeccion">Letras de canciones</div>
            
            <div class="smallBox floatLeft">
                <div class="smallBoxTop"></div>
                <div class="smallBoxBody black50">
                    <b>Selecciona cancion. Disco "Se busca banda"</b>
                    <ol>
                        <li><a href="#1">C&oacute;mo te lo montas</a></li>
                        <li><a href="#2">Tu y yo</a></li>
                        <li><a href="#3">La movida</a></li>
                        <li><a href="#4">Malos tiempos</a></li>
                        <li><a href="#5">Oye Juaqui</a></li>
                        <li><a href="#6">Inma y Estela</a></li>
                        <li><a href="#7">Es lo que hay</a></li>
                        <li><a href="#8">La sombra</a></li>
                        <li><a href="#9">Ostias hostiles</a></li>
                        <li><a href="#10">Un cl&aacute;sico</a></li>
                        <li><a href="#11">No puede ser</a></li>
                        <li><a href="#12">El T&uacute;nel</a></li>
                    </ol>
                    <div class="clear"></div>
                </div>
                <div class="smallBoxBottom"></div>
            </div>
            
            <div class="smallBox2 floatLeft">
                <div class="smallBoxTop2"></div>
                <div class="smallBoxBody2 black502">
                    <b>Selecciona cancion. Disco "La democracia ha muerto"</b>
                    <ol>
                        <li><a href="#1">Callejuelas</a></li>
                        <li><a href="#2">Contrabandista</a></li>
                        <li><a href="#3">Fundamentalismo</a></li>
                        <li><a href="#4">La cosa esta jodida</a></li>
                        <li><a href="#5">La moto</a></li>
                        <li><a href="#6">No me atrevo</a></li>
                        
                    </ol>
                    <div class="clear"></div>
                </div>
                <div class="smallBoxBottom2"></div>
            </div>

C2am · #2 (**permalink**) 28/06/2012, 00:12

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 originalfloatLeft{
float:left;
}

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

rufus · #3 (**permalink**) 28/06/2012, 06:17

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<div class="tituloSeccion">Letras de canciones</div>
            
            <div class="smallBox floatLeft">
                <div class="smallBoxTop"></div>
                <div class="smallBoxBody black50">
                    <b>Selecciona cancion. Disco "Se busca banda"</b>
                    <ol>
                        <li><a href="#1">C&oacute;mo te lo montas</a></li>
                        <li><a href="#2">Tu y yo</a></li>
                        <li><a href="#3">La movida</a></li>
                        <li><a href="#4">Malos tiempos</a></li>
                        <li><a href="#5">Oye Juaqui</a></li>
                        <li><a href="#6">Inma y Estela</a></li>
                        <li><a href="#7">Es lo que hay</a></li>
                        <li><a href="#8">La sombra</a></li>
                        <li><a href="#9">Ostias hostiles</a></li>
                        <li><a href="#10">Un cl&aacute;sico</a></li>
                        <li><a href="#11">No puede ser</a></li>
                        <li><a href="#12">El T&uacute;nel</a></li>
                    </ol>
                    <div class="clear"></div>
                </div>
                <div class="smallBoxBottom"></div>
            </div>
            
            <div class="smallBox2 floatLeft">
                <div class="smallBoxTop2"></div>
                <div class="smallBoxBody2 black502">
                    <b>Selecciona cancion. Disco "La democracia ha muerto"</b>
                    <ol>
                        <li><a href="#1">Callejuelas</a></li>
                        <li><a href="#2">Contrabandista</a></li>
                        <li><a href="#3">Fundamentalismo</a></li>
                        <li><a href="#4">La cosa esta jodida</a></li>
                        <li><a href="#5">La moto</a></li>
                        <li><a href="#6">No me atrevo</a></li>
                        
                    </ol>
                    <div class="clear"></div>
                </div>
                <div class="smallBoxBottom2"></div>
            </div>
            
            <div class="mediumBox floatRight">
                <a name="1"></a>
                <div class="mediumBoxTop"></div>
                <div class="mediumBoxBody black50">
                    <a href="#top" class="floatRight">volver arriba</a>
                    <pre>
<h4>C&Oacute;MO TE LO MONTAS T&Uacute;</h4>
¿C&oacute;mo te lo montas t&uacute;?...
Pa resistir todas las ma&ntilde;anas
la vida que no quieres vivir.
Pa resistir toda la semana
en un curro que no te hace feliz.
Pa no estallar como un ob&uacute;s,
pa no perderte en cualquier club,
Y no ser nadie.
Envenenado en el mercado,
hipop&oacute;tamo hipotecado…
No hay m&aacute;s cojones, o si.
Programado pa creer
Que su vida no es de &eacute;l,
programado para no poder.
Necesito que me cuentes
como ostias te haces fuerte
Tienes chinchetas hasta pa dormir.
Te maltratan y te violan
pero aqu&iacute; no hay leyes…
Si no tienes trabajo
ya no sabes qu&eacute; hacer…
Lo mismo que hace 20 a&ntilde;os,
lo mismo…
                    </pre>
                    <div class="clear"></div>
                </div>

style.css

Código CSS:

Ver original.black50{background: URL(images/black50.png);}
 
.smallBox,
.mediumBox,
.bigBox{margin-bottom:20px;}
 
.smallBox,
.smallBoxTop,
.smallBoxBottom {width: 300px;}
 
.smallBoxTop,
.smallBoxBottom{height: 5px;}
 
.smallBoxBody{padding: 15px;}
 
.smallBoxTop{background: URL(images/smallBoxTop.png)no-repeat;}
.smallBoxBottom{background: URL(images/smallBoxBottom.png)no-repeat;}
 
/*segundo smallbox para el segundo disco*/
.black502{background: URL(images/black50.png)}
.smallBox2,
.mediumBox,
.bigBox{margin-bottom:20px;}
 
.smallBox2,
.smallBoxTop2,
.smallBoxBottom2 {width: 300px;}
 
.smallBoxTop2,
.smallBoxBottom2{height: 5px; }
 
.smallBoxBody2{padding: 15px; }
 
.smallBoxTop2{background: URL(images/smallBoxTop.png)no-repeat;}
.smallBoxBottom2{ background: URL(images/smallBoxBottom.png)no-repeat;}
 
/*fin segundo smallbox para el segundo disco*/

rufus · #4 (**permalink**) 28/06/2012, 09:10

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 :(

rufus · #5 (**permalink**) 28/06/2012, 09:15

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

rufus · #6 (**permalink**) 29/06/2012, 06:54

por favor me urge solucionar esto. ninguno podeis ayudarme?? please helpp!!!!

C2am · #7 (**permalink**) 29/06/2012, 08:41

Entonces lo que quieres es que cada menu coincida en horizontal con la primer canción del disco.?

rufus · #8 (**permalink**) 29/06/2012, 08:57

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

C2am · #9 (**permalink**) 29/06/2012, 09:12

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.