Duda sencilla.

mariomon17 · #1 (**permalink**) 22/12/2010, 17:24

Tengo tres divs y quieron que se pongan uno detras de otro y ademas se alinena a la derecha.

GAST0N · #2 (**permalink**) 22/12/2010, 22:45

Cita:

Iniciado por mariomon17

Tengo tres divs y quieron que se pongan uno detras de otro y ademas se alinena a la derecha.

bueno podrias fltarlos a la derecha, etc etc.. acomodarlos todos de un lado con las reglas correspondientes.. y jugar con el z-index.. tambien deberian estar en posicion absoluta

la posicion absoluta va a ser que se pisen, y con el z-index decidis cual aparesca primero segundo y tercero.. o sea la posicion en capas podriamos decir

te doy un ejemplo:

Código PHP:

  <html>

<body>

<style>

#uno{float:left;

    width:200px;

    height:200px;

    background-color:red;

    z-index:3;

position:absolute;

}

 
#dos{float:left;

    width:200px;

    height:200px;

    background-color:green;

    z-index:1;

position:absolute;

}

#tres{float:left;

    width:200px;

    height:200px;

    background-color:pink;

    z-index:2;

position:absolute;

}

</style>

 
 
<div id="uno"></div>

<div id="dos"></div>

<div id="tres"></div>

</body>

</html>

mariomon17 · #3 (**permalink**) 23/12/2010, 07:34

Muchas gracias, pero me exprese mal.
Lo que quiero es que aparezcan uno detras de otro en la misma linea, no uno encima de otro, alineados en horizontal y colocados a la derecha.

Codigo actual:

Código CSS:

Ver original.paginator {
    height: 40px;
    width: 500px;
}
 
.num {
    float: left;
    margin-top: 10px;
    float: left
}
 
.button {
    background: #CCC;
    border: 1px solid #000;
    text-align: center;
    width: 25px;
    height: 20px;
    padding: 3px;
    margin: 5px;
    display: block;
    float: left
}

Codigo HTML:

Código HTML:

Ver original<div class="paginator">
<div class="button"></div>
<div class="button"></div>
<div class="num"></div>
<div class="button"></div>
<div class="button"></div>
</div>

GAST0N · #4 (**permalink**) 23/12/2010, 07:37

en ese caso entonces usa el mismo codigo que te deje, quitale la posicion absoluta y el z index..

querdaria asi

Código PHP:

  <html>

<body>

<style>

#uno{float:right;

    width:200px;

    height:200px;

    background-color:red;

    

}

 
#dos{float:right;

    width:200px;

    height:200px;

    background-color:green;

    

}

#tres{float:right;

    width:200px;

    height:200px;

    background-color:pink;

    

}

</style>

 
 
<div id="uno"></div>

<div id="dos"></div>

<div id="tres"></div>

</body>

</html>

[/QUOTE]

mariomon17 · #5 (**permalink**) 23/12/2010, 08:48

Si, pero me surge el problema siguiente: se me salta al siguiente div y este se va acia la izquierda. Y el orden de los divs tambien varia.

Lo que quiero es que pase lo de la segunda imagen pero se ponga a la derecha!
Gracias

GAST0N · #6 (**permalink**) 23/12/2010, 09:20

Cita:

Iniciado por mariomon17

Si, pero me surge el problema siguiente: se me salta al siguiente div y este se va acia la izquierda. Y el orden de los divs tambien varia.

Lo que quiero es que pase lo de la segunda imagen pero se ponga a la derecha!
Gracias

podrias hacer un dibujo aunque sea en paint, para ver como queres que te queden posicionados los div.. porque no logro entender

mariomon17 · #7 (**permalink**) 23/12/2010, 09:42

Esta imagen es mas completa.
Te cuento, el paginador esta compuesto por cuatro botones y en el medio un indicador del numero de pagina. Para estar unos detras de otros tienen la propiedad Float: left (Imagen 1)

Yo quiero que todo eso se ponga en el lado derecho, si pongo a .button y a .num la propiedad float: right. Se me cambia de posicion los botones (Imagen 2)

Yo quiero que eude como (Imagen 3)

mariomon17 · #8 (**permalink**) 23/12/2010, 09:46

Ah, por cierto!
Todo eso esta dentro de un div class paginator, pues si a este le pongo la propiedad float: right.
Queda como quiero que quede pero se sube lo de abajo.
Mira,

GAST0N · #9 (**permalink**) 23/12/2010, 10:43

primero entonces, trata de ubicar el paginator.. que quede donde vos queres, dale un background-color.. para saber bien su ubicacion, luego se lo sacas.... despues los botones los vas ubicando tomanado como referencia su contenedor,.. o sea a #paginator

GAST0N · #10 (**permalink**) 23/12/2010, 10:44

podrias mostrar el html completo de esa pagina para saber bien la ubicacion del rsto de los div

mariomon17 · #11 (**permalink**) 23/12/2010, 11:24

Voy a probar cambiando el orden de los botones en el caso de la imagen 2.
Ya os contare!

jomaruro · #12 (**permalink**) 23/12/2010, 12:57

Hola:

Cita:

Iniciado por mariomon17

Queda como quiero que quede pero se sube lo de abajo.

Pues dale un poco más de width, al no caber en la misma "linea" se moverá hacia abajo quedando como quieres que quede.

Saludos.

mariomon17 · #13 (**permalink**) 23/12/2010, 15:27

Ya lo he probado pero no me funciona, se hace alto pero no amplia los div en los que esta dentro, esto es lo que intento ahora mismo pero no lo consigo...

GAST0N · #14 (**permalink**) 23/12/2010, 15:48

Cita:

Iniciado por mariomon17

Ya lo he probado pero no me funciona, se hace alto pero no amplia los div en los que esta dentro, esto es lo que intento ahora mismo pero no lo consigo...

enviame tu msn por privado o tu facebook, y vemos tu problema.. seguro asi lo solucionamos =)

alexk · #15 (**permalink**) 23/12/2010, 16:01

Cita:

Iniciado por GAST0N

enviame tu msn por privado o tu facebook, y vemos tu problema.. seguro asi lo solucionamos =)

Si quieres ayudar, hazlo desde este mismo foro que para eso esta

mariomon17 · #16 (**permalink**) 23/12/2010, 16:06

Cita:

Iniciado por GAST0N

enviame tu msn por privado o tu facebook, y vemos tu problema.. seguro asi lo solucionamos =)

Muchas gracias por tu buena intencion, pero ya lo solucione.

Lo que hice es .num y .button con
float: right

le quite el widht a .paginator

Y como el resultado de esto es la imagen 2, que quedaba invertido pues inverti en el codigo el orden de los botones y ya me salo todo perfecto.

Muchas gracias a todos!

GAST0N · #17 (**permalink**) 23/12/2010, 16:18

Cita:

Iniciado por mariomon17

muchas gracias por tu buena intencion, pero ya lo solucione.

Lo que hice es .num y .button con
float: Right

le quite el widht a .paginator

y como el resultado de esto es la imagen 2, que quedaba invertido pues inverti en el codigo el orden de los botones y ya me salo todo perfecto.

Muchas gracias a todos!

q bueno q lo solucionaste..... Por cualquier otro problema, no dudes en consultar =) saludos