Alinear 2 divs

kotedas · #1 (**permalink**) 06/12/2010, 14:31

saludos de nuevo, llevo toda la tarde probando cosas y no acabo de encontrar lo que busco, os pongo en situacion

Necesito alinear un logo con una barra de menu(el menu es un .swf)de tal forma que quede uno al lado del otro y que adapten su tamaño al tamaño de ventana, (lo he hecho con porcentajes, pero se llega a descuadrar con ventanas pequeñas. )

De momento tengo un div que contiene toda la pagina, otro div dentro de este que se llama cabecera que contiene a su vez los dos div que quiero alinear horizontalmente, logo y botones, luego tengo otros divs para el contenido.

Os pongo el codigo

Código html

Código:

<link href="estilo.css" rel="stylesheet" type="text/css" media="screen" />


</head>


<body  >

        <div id="contenedor" style="height:100%; width:100%">
        
            <div id="cabecera" >
        
                    <div id="logo"   style="width: 18%; height: 20%"><img alt=""height="100%" src="images/logohome.png" width="100%"/></div>
                    
                    <div id="botonera" >
                                
                                     Aqui va el .swf del menu   
                    
                    </div>
        
        
            </div>
        
        
        
        
        <div id="fondo"><p> <img height="100%" src="images/cuadrohome.png" width="100%"/></p>></div>
        </div>
</body>

</html>

Código css

Código:

body  {

    background-color:#102545;
    text-align:center;
    font:18px  Arial;
    }
    

#contenedor{
    
    


}

#cabecera{

    
}

#logo {

padding-top:5%;
padding-left:15%;
  }
#botonera{


}

He leido que la solución podría ser float, pero si se lo pongo al menu float=right, desaparece. Os pongo una imagen de como me queda ahora mismo.

carlospc · #2 (**permalink**) 07/12/2010, 18:10

prueba asignandole al logo y a la botoner lo siguiente:

#logo {
float:left;
padding-top:5%;
padding-left:15%;
}
#botonera{
float:left;
}

Nos informas como te fue

Suerte...

kotedas · #3 (**permalink**) 08/12/2010, 07:15

Si hago eso, la barra del menú, desaparece. en firefox

En Explorer , la barra de menu se hace pequeñisima y no acaba de centrarse.

De hecho, me acabo de dar cuenta de que el cuadro donde se supone va el contenido, tampoco se ve en internet explorer, porque puede ser?

carlospc · #4 (**permalink**) 08/12/2010, 10:04

haber estas aplicando los atributos width y eight erroneamente... corrige eso... y te deberia mostrar normal... o quita dichos atributos para que se ajusten a su contenido... tanto de los divs como de la imagen

Saludos

Portgaz · #5 (**permalink**) 08/12/2010, 11:54

Seguimos con los problemas con los %

IE no reconoce los %, siempre te recorrera todo.
Asi que la unica solucion es definiendo con pixeles (px).

o al menos que lo hagas todo con % y que pongas con Javascript algo como (si la pagina se ve totalmente deforme, no utilizes IE, porfavor utiliza FF)

Bueno esa es la unica solucion posible que veo.
Saludos

Portgaz · #6 (**permalink**) 08/12/2010, 11:59

@CarlosPC:
Exactamente haces tu lo mismo.
estas declarando tus divs con align:center, margin:auto y con un ancho fijo width:960px

Código CSS:

Ver originalalign:center;
    margin:auto;
    width:960px;
    height:800px;;

Y se ve perfectamente en IE y en FF. Es por eso la recomendacion que le hago a nuestro amigo, declara tus propiedades de ancho y altura con PX.
Saludos.

kotedas · #7 (**permalink**) 09/12/2010, 09:04

Gracias por las respuestas, me habeis ayudado.