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