0

I have following code:

li.hMenu {
    background: red;
    width: 33.33%; /*for the older browsers fallback */
    width: calc(100% / 3);
    height: 100%;
    float: left;
}

li.hMenu:hover{
    background-color: darkred;
}

li.hMenu:active{
    position: relative;
    left: 1px;
    top: 1px;
    background-color: darkred;
}

#menu {
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style-type: none;
    border: 1px solid black;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="CommonLayout.css" />
    <script src="ProjectPage.js"></script>
</head>
<body>
    <ul id="menu">
        <li style="z-index: 10" class="hMenu">
            <a href="ProjectPage.html">Main Page</a>
        </li>
        <li style="z-index: 9" class="hMenu">
            <a href="About.html">About</a>
        </li>
        <li style="z-index: 8" class="hMenu">
            <a href="Calculator.html">Calculator</a>
        </li>
    </ul>

    <p>This is <em>Main Page</em> page.</p>

</body>
</html>

And when I make browser window small enough, then text of first element of the menu is shown in two lines, thus making this menu element bigger than the others. Also containing <div> expands. I thought, if I specify height: 100% it would make other menu items adjust, but it didn't change anything.

How can it be achieved?

Michał Turczyn
  • 32,028
  • 14
  • 47
  • 69
  • height:100% has no effect here ... there is no height defined on the parent element – Temani Afif Apr 22 '18 at 08:42
  • @TemaniAfif If I define `max-height` on parent element, it doesn't work neither. – Michał Turczyn Apr 22 '18 at 08:49
  • yes it won't work because you need height defined not max-height ;) read the duplicate question and you will understand how it works – Temani Afif Apr 22 '18 at 08:50
  • 1
    @TemaniAfif It's just beginning of my web development path and I already owe you so much... Thank you! – Michał Turczyn Apr 22 '18 at 08:52
  • @TemaniAfif But, unfortunately, this post does not help. If I specify fixed height for containing `
      `, then if menu item becomes bigger, it will result in an overflow. Now, the `
        ` element somehow adjust itself to the "highest" child. I just want the rest of children to adjust to their "sibling".
     – Michał Turczyn Apr 22 '18 at 08:57
  • 1
    in this case I would simply advise you to get rid of float and use more advanced techniques like flexbox (here is a enxample https://jsfiddle.net/atuvqn8o/2/) ... you are still at the beginning but I tell you from now that you will face many issue with float very hard to solve, so better move on to other techniques from now even if they can be a bit hard at the start – Temani Afif Apr 22 '18 at 09:01
  • 1
    here is a good tuto to start with : https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Temani Afif Apr 22 '18 at 09:02
  • @TemaniAfif What about support for older browsers? – Michał Turczyn Apr 22 '18 at 09:10
  • don't worry it's pretty well supported ;) https://caniuse.com/#search=flexbox – Temani Afif Apr 22 '18 at 09:11

1 Answers1

0

on CSS this property

ul#menu li {
    white-space : pre;
 }

for pretty finally

ul#menu li {
    white-space : nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
    min-width: 100px;


   .one {
        white-space : nowrap;
        text-overflow: ellipsis;
        overflow-x: hidden;
        min-width: 20px;
         width: 40px;
        border:1px solid #000;
     }
    .two {
        white-space : pre;
        width: 40px;
         overflow-x: hidden;
        border:1px solid #000;
     }
   .cero{
        border:1px solid #000;
    }
    <div class="two"> holaaaaaaaaaaaaaaaa </div>
    <div class="one"> holaaaaaaaaaaaaaaaa </div>
    <div class="cero"> holaaaaaaaaaaaaaaaa </div>
Hugo Stiven Laguna Rueda
  • 159
  • 6