Top of the menu!

Asked

Viewed 111 times

1

inserir a descrição da imagem aqui

Well, as you can see, the top is a black banner, the web size is normal, but when I decrease, I see to test the responsive, I see that the banner is getting below the menu. The division of the menu is on this white line, as you can see, it’s going through a lot! How do I solve?

            <!-- Começo do logo
            ============================================= -->
            <div id="logo" class="divcenter">
                <a href="index.html" class="standard-logo"><img class="divcenter divtopo" src="images/topo-2.png" alt="banner"></a>
                <a href="index.html" class="retina-logo"><img class="divcenter divtopo" src="images/[email protected]" alt="banner"></a>
            </div><!-- Fim do Logo-->
html css twitter-bootstrap

  • You could add the relevant code to your question?

  • I added the banner insertion html code.

  • I do not understand your question. What is the problem?

1 answer

0

Friend I see 2 situations in your code, better saying I see 1 and in it I can define the following conclusions:

  1. Using css class with responsibility to deliver content in different resolutions;
  2. I don’t know how are the displays and position of your containers (banner / menu).

So come on:
When you want to deliver different images in x resolutions, leave this responsibility to the browser (browser), as it becomes difficult to predict such a situation, Progressive Enhancement in the right vein!. How do you do that?

Simple, there is a new html attribute to resolve this issue is the srcset="img1, img2..." including he receives a modifier as a parameter to identify the pixel device. Ex:

<img src="path-img" alt="desc-img" srcset="img-baixa.jpg 1x, img-alta.jpg 2x">

Note: There are other modifiers besides x(pixel device) worth just take a look at the W3C documentation.

Now variables as container, because I can’t know or predict because I don’t see your css code, so I can state the following:

It is natural that container stacking occurs when it is with .myContainer{display:inline;} or .myContainer{float:left;}

What defines who will come first or last?
Simple, the order you wrote your element in html, of course there are other considerations but here we predict the common nature of GIFT without Reflow’s

Based on this information review your css or post here for us! Abs.

Browser other questions tagged html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.