Foros del Web » Creando para Internet » CSS »

position absolute ¿decisión acertada?

Estas en el tema de position absolute ¿decisión acertada? en el foro de CSS en Foros del Web. Hola, estoy trabajando con bootstrap para hacer una web. Tengo un problema relacionado con el posicionamiento de los diferentes div de la web. La web ...
  #1 (permalink)  
Antiguo 02/07/2014, 04:16
 
Fecha de Ingreso: mayo-2011
Mensajes: 18
Antigüedad: 12 años, 10 meses
Puntos: 0
position absolute ¿decisión acertada?

Hola, estoy trabajando con bootstrap para hacer una web. Tengo un problema relacionado con el posicionamiento de los diferentes div de la web.

La web que quiero hacer tendría un barra horizontal arriba de todo, para elegir el idioma en el que se visualiza la web, debajo de éste el clásico menú de navegación, con logo a la izquierda y las opciones a la derecha. Y debajo de este menú irían dos col-md-6, uno con una imagen y el otro con texto.
Esto no debería tener ningún problema, pero la peculariedad que le doy es que el logo tiene que tener top 0 y montarse sobre la barra de idiomas. Y el col-md-6 donde está la imagen tiene que quedar tb justo debajo de esta barra, con el logo sobre él.
Como se que no soy muy bueno explicandome pongo un dibujo rápido que he hecho con el paint. Espero que se entienda.

http://1drv.ms/1pVYhr1


Para conseguir esto el código que he hecho es el siguiente.

Código HTML:
<header>
    <section class="barra idioma">
        <div class="container">
                <div class="col-md-12">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="">idioma:</a></li>
                        <li><a href="">eng</a></li>
                        <li><a href="">eng</a></li>
                        <li><a href="">eng</a></li>
                    </ul>
                </div>
            </div>
    </section>
</header>
<section class="intro" style="padding:0px;">
    <section class="col-md-6" style="padding:0px;">
        <img src="img/intro.jpg" alt="" style="width:100%">
    </section>
    <section class="col-md-6" style="padding:0px;">
        <div class="top-banner-right">
		    <div class="vertical-center top-caps5" style="padding-top:95px">					
			    <h3><span id="subtitulo">lorem/ lorem / lorem / lorem</span></h3>
            </div>
        </div>
    </section>
</section>
<section class="navbar navbar-default" role="navigation" style="position:absolute; margin-left:auto;margin-right:auto;left:0;right:0; top:0px; padding-top:0px;">
    <div class="container">
        <a href=""><img src="img/logo.png" alt="" style="position:absolute; padding-top:0px;"></a>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right add-top">
                <li><a href="#lorem">lorem</a></li>
                <li><a href="#lorem">lorem</a></li>
                <li><a href="#lorem">lorem</a></li>
                <li><a href="#lorem">lorem</a></li>
                <li><a href="#lorem">lorem</a></li>
            </ul>
        </div>
        </div>
</section> 
Lo que he hecho ha sido poner un header, que sería la barra de idioma, a continuación un contenedor con dos las dos secciones col-md-6 y después una barra de navegación.
En la barra de navegación declaro position:absolute y top:0, y en el logo solamente position:absolute.
Con esto consigo que visualmente quedue como quiero, pero tengo la duda de si es correcta esta manera de hacerlo o si es una chapuza (como me temo). Además, me surgen dos problemas. Uno es el responsive, que se me descoloca todo al cambiar la resolución. Supongo que es cuestión de jugar con las media-queries, pero aún no me he puesto con eso. El otro es que la sección que vendría debajo de todo esto no empieza donde debería. No empieza justo debajo de los dos col-md-6, si no justo debajo del header, por lo que cuando le doy en el menú al botón que me debería llevar a esa sección no consigo nada.

Alguien me puede echar una mano?
Gracias!!
  #2 (permalink)  
Antiguo 04/07/2014, 00:47
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: position absolute ¿decisión acertada?

Mientras no aplicas posiciones absolutas a la estructura general de la página, no deberías de tener problemas en principio. Usarlas sólo es malo para la estructuración, la maquetación general. En tu caso creo, viendo sólo el código, que seguramente existan mejores soluciones a lo que quieres hacer, al menos con la sección.

Etiquetas: position, responsive, width
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 10:59.