Menu with side banners

Asked

Viewed 159 times

4

I have been working on a project that requires the implementation of a request that takes advantage of the white spaces to be placed advertising banners. I deal with a structure already determined and several times I have problems of implantation of something new, having to sometimes appeal to some non-semantic attitudes.

The design follows a model that looks like this (the original has MANY classes and I don’t have full access, so the model):

<div class="borda-background">
    <ul class="menu-container">
        <li class="departamento">
            <a href="#">Categoria</a>
            <ul class="categoria-container">
                <li class="categorias-opcoes"><a href="">Lorem Ipsum</a></li>
                <li class="categorias-opcoes"><a href="">Lorem Ipsum</a></li>
                <li class="categorias-opcoes"><a href="">Lorem Ipsum</a></li>
                <li class="categorias-opcoes"><a href="">Lorem Ipsum</a></li>
                <li class="categorias-opcoes"><a href="">Lorem Ipsum</a></li>
            </ul>
        </li>
        <li class="departamento">
            <a href="#">Categoria</a>
            <ul class="categoria-container">
                <li class="categorias-opcoes"><a href="">Lorem Ipsum</a></li>
                <li class="categorias-opcoes"><a href="">Lorem Ipsum</a></li>
                <li class="categorias-opcoes"><a href="">Lorem Ipsum</a></li>
                <li class="categorias-opcoes"><a href="">Lorem Ipsum</a></li>
                <li class="categorias-opcoes"><a href="">Lorem Ipsum</a></li>
            </ul>
        </li>
        <li class="departamento">
            <a href="#">Categoria</a>
            <ul class="categoria-container">
                <li class="categorias-opcoes"><a href="">Lorem Ipsum</a></li>
                <li class="categorias-opcoes"><a href="">Lorem Ipsum</a></li>
                <li class="categorias-opcoes"><a href="">Lorem Ipsum</a></li>
                <li class="categorias-opcoes"><a href="">Lorem Ipsum</a></li>
                <li class="categorias-opcoes"><a href="">Lorem Ipsum</a></li>
            </ul>
        </li>
        <li class="departamento">
            <a href="#">Categoria</a>
            <ul class="categoria-container">
                <li class="categorias-opcoes"><a href="">Lorem Ipsum</a></li>
                <li class="categorias-opcoes"><a href="">Lorem Ipsum</a></li>
                <li class="categorias-opcoes"><a href="">Lorem Ipsum</a></li>
                <li class="categorias-opcoes"><a href="">Lorem Ipsum</a></li>
                <li class="categorias-opcoes"><a href="">Lorem Ipsum</a></li>
            </ul>
        </li>
    </ul>
</div>

However, when trying to introduce a banner in an extra li in each category, for example, I do not succeed, because Heights vary from one browser to the other. The intention would be to achieve this model with a 1000px container and with the image always adapting according to the number of "Rows" of each department:

inserir a descrição da imagem aqui

html css

  • Man, personally, it’s hard to help out like that.. There are numerous ways to create CSS to meet your goal... Not at least something ready to give as an example? Any site with the same procedure you have seen and etc..

  • We have a real example posted on the site, but with these cross browser bugs. In fact, I end up not posting the information due to the original structure of the code that is very decaying, and being generated by others, not on my part.

  • 3

    You can use javascript to grab the height of ul menu-container and apply it to the height of your image.

  • 1

    Where is the relevant CSS for these classes?

1 answer

0

Jhonny, don’t use javascript to match the Heights. You can use flex so that the boxes have the same height, using the "align-items" property. However this technique is compatible with Internet Explorer version 10 or higher. So, if you want to match the heights in older browsers, you can set the structure styles as a table, such as in this example (Watch out for "display: table" and table-layout: Fixed;). After that, set the image to 100 height%.

Browser other questions tagged html css

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