Menu with side banners [closed]

Navigation
4

I've been working on a project that requires the implementation of an application that takes advantage of the white spaces so that banners can be posted. I read 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 project follows a template so it looks like this (the original has MANY classes and I do not have full access, so the template): 

<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 insert a banner in an extra li in each category, for example, I do not succeed, since the heights vary from one browser to the other. The intention is to achieve this model with a container of 1000px and with the image always adapting according to the number of rows of each department:

    
asked by anonymous 13.10.2014 / 18:40

1 answer

0

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

    
11.08.2015 / 19:05
Problem with focus setting of Ubuntu windows when using Java [closed] What is the cause of using SELECT null FROM RDB $ DATABASE