alinear dos imagenes en la misma linea

rstapia · #1 (**permalink**) 28/08/2012, 05:22

como puedo hacer esta página?....parace sencilla, pero las capas no se me posicionan donde yo quiero (como la imagen), [IMG]

[/IMG]

he creado un div llamado indice, otro llamado logo1 (superiorizquierda), otro llamado logo2(inferiorderecha) y otro llamado texto(inferior), el indice y el logo1 se me posicionan bien, pero el logo2 y texto cuando posiciono uno a la izquierda el otro se me queda debajo o al revés
El texto y el logo2 tienen que estar en la misma linea pero no puedo alinearlos uno a la izquierda y otro a la derecha.....

Gracias.

JairLizcano · #2 (**permalink**) 28/08/2012, 11:14

A ver si te entiendo, ¿lo que quieres hacer es lo que está a tu izquierda y lo que has hecho es lo que está a tu derecha?

Tan pronto me resuelvas ese dilema, te guiaré.

Buena suerte.

NSD · #3 (**permalink**) 28/08/2012, 20:34

algo asi te serviria?

Código HTML:

Ver original<html>
<head>
</head>
<body>
<div style="display: table; position: relative; overflow: hidden;width:500px">
        <div style="float:left; border:1px solid red;width:200px">
            Texto<br />
            Texto<br />
            Texto<br />
            Texto<br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
    </div>
        <div style="float:right; border:1px solid green">
            ---------<br />
            ---------<br />
            Logo1<br />
            ---------<br />
            ---------<br />
        </div>
</div>
<div style="display: table; position: relative; overflow: hidden;width:500px;margin-top:-100px;">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
        <div style="#position: relative; #top: -50%; border:1px solid red;width:250px">
            Texto<br />
            Texto<br />
        </div>
    </div>
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;width:100px">
        <div style="#position: relative; #top: -50%; border:1px solid green">
            ---------<br />
            ---------<br />
            ---------<br />
            Logo2<br />
            ---------<br />
            ---------<br />
            ---------<br />
        </div>
    </div>
</div>
</body>

NOTA: yo puse texto pero deberia funcionar tambien con imagenes.
saludos

JairLizcano · #4 (**permalink**) 28/08/2012, 21:32

Aquí te dejo algo con más estructura:

Código HTML:

<!DOCTYPE html>
<html lang = 'ES'>
    <head>
        <meta charset = 'UTF-8'/>
        <style type = 'text/css' media = 'screen'>

            body, html {

                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
            }   

            li, p {

                font-size: 11px;
            }

            #section-1 {

                width: 50%;
                font-size: 0px;
            }

            #section-1 > div {

                width: 50%;
                vertical-align: top;
                box-sizing: border-box;
                display: inline-block;
            }

            #menu-image {

                text-align: right;
            }

            #section-2 {

                width: 50%;
                font-size: 0px;
            }

            #section-2 > div {
                
                width: 50%;
                vertical-align: top;
                box-sizing: border-box;
                display: inline-block;
            }

            #slogan-image {

                text-align: right;
            }
        </style>
        <title>
        </title>
    </head>
    <body>
        <div id = 'section-1'>
            <div id = 'menu'>
                <ul>
                    <li>
                        A
                    </li>
                    <li>
                        B
                    </li>
                </ul>
            </div>
            <div id = 'menu-image'>
                <img src = '#'/>
            </div>
        </div>
         <div id = 'section-2'>
            <div id = 'slogan'>
                <p>
                    Disfruta con nosotros.
                </p>
            </div>
            <div id = 'slogan-image'>
                <img src = '#'/>
            </div>
        </div>
    </body>
</html>

Espero te sirva.

Buena suerte.

rstapia · #5 (**permalink**) 29/08/2012, 01:49

gracias por todo amigos...ya lo solucioné ayer....el problema era el pie que al tener 2 imagenes cuando alineaba una a la izquierda no me dejaba alinear la otra a la derecha.....el problema era que no habia dado un ancho a cada div del pie, por lo que me cogia el ancho por defecto de toda la pagina.....

gracias por todo.....una duda que tengo es como hacer el rectángulo que está debajo de los indices de forma que sea un degradado y se coloque en la posición justo debajo de los botones....como colocarlo para que no se mueva de su sitio cuando cambie la resolucion en otro monitor.

NSD · #6 (**permalink**) 29/08/2012, 11:22

Cita:

.una duda que tengo es como hacer el rectángulo que está debajo de los indices de forma que sea un degradado y se coloque en la posición justo debajo de los botones....como colocarlo para que no se mueva de su sitio cuando cambie la resolucion en otro monitor.

con div de dimensiones fijas puedes hacerlo, mi ejemplo tiene el codigo un poco desprolijo pero se vera igual en todas las resoluciones, el degrade puedes hacero con CSS3
http://css-tricks.com/examples/CSS3Gradient/
saludos.