Comunidad de diseño web y desarrollo en internet online

position absolute ¿decisión acertada?

Citar            
MensajeEscrito el 02 Jul 2014 04:28 pm
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!!

Por dewars

11 de clabLevel



 

firefox
Citar            
MensajeEscrito el 02 Jul 2014 10:25 pm
La imagen no se ve...

Si pudieras subirlo a algún server para poder ver todo (imágenes, css)

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome
Citar            
MensajeEscrito el 02 Jul 2014 11:05 pm

Por dewars

11 de clabLevel



 

firefox
Citar            
MensajeEscrito el 02 Jul 2014 11:11 pm
Lo siento, no descargo archivos..

puedes usar jsfiddle.net o codepen

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome
Citar            
MensajeEscrito el 03 Jul 2014 01:11 am
ejemplo

Según lo que entendí...
- en header está logo e idioma (si quieres que el logo tenga top 0, quiere decir que esta dentro de header)
-debajo las 2 secciones

al logo le pones position, para que la barra del idioma no tenga la misma altura.
también header con position para que se ajusta la posición del logo con respecto a su padre.

le puse floats para el ejemplo.. lo adaptas para usarlo con bootstrap.

igual para los idiomas puedes usar la clase "pull-right"

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome
Citar            
MensajeEscrito el 03 Jul 2014 05:07 pm
Gracias nacho,

Sí, es eso. Pero debajo de la barra de idioma habría otra que sería el menú propiamente dicho.
Yo consigo hacer tu ejemplo, pero el problema que tengo es que al añadir el menú los divs izq y der se desplazan hacia abajo, como es lógico. Entonces la imagen que iría en izq no se vería justo debajo del logo. Habría un espacio del grosor de la barra del menú entre ellos.

Por dewars

11 de clabLevel



 

chrome
Citar            
MensajeEscrito el 03 Jul 2014 05:15 pm
Por eso te digo que hay que adaptarlo a bootstrarp... agregar .container .row .col y demás

La cosa es, si quieres el logo en top 0 entonces, éste debe ir dentro de header

El menú debajo del idioma lo puedes insertar dentro de el div .der

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome
Citar            
MensajeEscrito el 07 Jul 2014 08:48 am
Gracias por las ayuda nasho. Me ha servido y he conseguido lo que quería. Ahora me toca pelear con jquery para hacer parte del menu fijo al hacer scroll. Pero eso ya es otra historia.
Gracias

Por dewars

11 de clabLevel



 

firefox
Citar            
MensajeEscrito el 07 Jul 2014 03:04 pm

Por nasho

Claber

908 de clabLevel

1 tutorial

Genero:Masculino  

Web Developer

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.