I can’t make fluid layout on the menu

Asked

Viewed 65 times

0

Hello.

I have the menu below:

<ul class="menuUlTopo">
  <li class="menuTopo"><a href="principal.php" title="Principal">Principal</a></li>
  <li class="menuTopo"><a href="administradoresMenu.php" title="Administradores">Administradores</a></li>
  <li class="menuTopo"><a href="clientesMenu.php" title="Clientes">Clientes</a></li>
  <li class="menuTopo"><a href="imoveisMenu.php" title="Imóveis">Imóveis</a></li>
  <li class="menuTopo"><a href="tiposMenu.php" title="Tipos de Imóveis">Tipos de Imóveis</a></li>
  <li class="menuTopo"><a href="emails.php?acao=listar" title="E-mails">E-mails</a></li>
</ul>

I’d like to make it fluid. But as much as I can change the css I can’t make the menu items fall below each other when we decrease the screen size.

Where am I going wrong?

Here is the css

a, a:hover {
    text-decoration:none;
    color:#FFF;
}

ul {
    list-style-type:none;
    padding:0;
}

ul.menuUlTopo {
    width: 100%;
}

ul li.menuTopo {
    float:left;
    width:161px;
    height:50px;
    text-align:center;
    border-left: #005E9C 1px solid; 
    border-right: #005E9C 1px solid;    
}

ul li.menuTopo a {
    width:161px;
    height:50px;
    display:table-cell;
    vertical-align:middle;  
    color: #FFF;
}

ul li.menuTopo:hover {
    background-color: #CCC;
    color: #FFF;
}

Grateful to those who can help

css css3

1 answer

0

It is necessary that the width of the elements is static, if you use percentage, the items will decrease to adapt to the size of the window. Only the ul.menuTopo should have the width as a percentage.

  • Another problem is that the li’s are descending following the fluid layout but the links to and to:Hover remain in their positions not following the li’s. What to do?

  • You can put it the way you are doing on http://jsfiddle.net please?

  • Okay. This one: https://jsfiddle.net/hnzajwwq/

  • O :Hover needs to be set to element 'a', not in li. And 'background-color' should be set in 'a', since you have set fixed height in ul. I corrected and updated: https://jsfiddle.net/hnzajwwq/2/

  • ok ndeu right. Now tell me one thing: to center the li’s vertically it is even necessary to use display:table-cel?

  • Another thing: li’s and links' boxes are not adjusting to the size of the screen. They’re just descending. That’s the way it is?

  • Well, you can put them as percentage and set a constant min-width, depends on your layout

  • I don’t understand! You can explain it better by doing me a favor?

  • For example: https://jsfiddle.net/hnzajwwq/4/

  • Ok. But in this example the texts are not vertically aligned: mddle.

  • For this we can use line-height. Thus: https://jsfiddle.net/hnzajwwq/5/

Show 6 more comments

Browser other questions tagged css css3

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