Search code examples
htmlcsscss-positionnavbartext-size

CSS Naviagtion bar should Never leave the row and the relative text

After finding my stupid grammar mistake to do a sub-menu I edited my files. I have trouble to solve 2 problems:

Both of them happen when I resize my browser's window to check if my side can be watched on every framesize (to watch my HTML-side on PC, later on a mobile,...)

  1. I don't understand, why the navi-elements start to stack. I watched carefully to program the document scalable... What did I forget? Also how can I let the 5 elements use the entire 100% of the 90% body?

  2. If I try to set the font-size of my ul.navi absolute (px) the text will disappear, when I scale the window is too small.

If I set it relative (vw) it becomes unreadable. I tried a combination: font-size: calc(2px + 1vw). It's better but not entirely what I want.

Is there a possibility to scale the words with the button-borders li where they stand?

Screenshots of the problem, nearly fullscreen:

nearly fullscreen

Smaller:

small enough for the mistake

And here is my code:

/* CSS Style für Kletterwelt - Allgemeine Inhalte v1.02 vom 17.06.2017 */

/* Allgemeine Daten & Einstellungen */

* {
  margin: 0px;
  padding: 0px;
}

body {
  /* Für den Gesamten Inhalt gilt */
  width: 90vw;
  /* relativ auf Fenstergröße! */
  margin: auto;
  /* Für den Text des gesamten Inhaltes gilt */
  font-family: arial;
}

img {
  width: 100%;
  /* Gilt für ALLE Bilder auch später im Content*/
}


/* Navigationsleiste */

ul.navi {
  list-style-type: none;
  width: 100%;
  font-size: calc(2px + 1vw);
  /* relativ zur Fenstergröße!!! */
}

ul#hauptmenu li {
  width: 19%;
  /* Aufteilung der Hauptmenüpunkte. relative zur body-Größe! */
  position: relative;
  /* Untermenüs werden relativ zu ihrem Hauptmenüpunkt zugeordnet */
  float: left;
  /* Buttons werden nebeneinander angezeigt */
  margin-right: 1px;
  /* Abstand zwischen den Hauptmenü-Buttons*/
  border: 2px solid #333333;
  /* Listenelemente haben sichtbaren Rand */
  border-radius: 5px;
  /* Rand abrunden */
}

ul#hauptmenu a {
  display: block;
  /* gesamtes Listenelement wird zum anklickbaren Button, nicht nur das Wort */
  height: 40px;
  line-height: 40px;
  /* Wenn Wert mit "height" identisch ist, ist Text vertikal zentriert */
  background-color: #333333;
  text-decoration: none;
  /* Entfernt Unterstriche der Links */
  text-align: center;
  color: white;
  font-weight: bold;
}

ul#untermenu li {
  width: 100%;
  /* Untermenüpunkte sind relativ! Also sollen sie die voll zur verfügung stehende Länge nutzen */
}

ul#untermenu a {
  width: 100%;
  /* Untermenüpunkte sind relativ! Also sollen sie die voll zur verfügung stehende Länge nutzen */
}

ul#hauptmenu li:hover>a {
  background-color: #777777;
  /* markiert Buttons übergeordneter Menüs UND den Button, über den man hovert, grau */
}

ul#hauptmenu li:hover a:hover {
  background-color: #FF0000;
  /* markiert Button, über den man hovert, rot (überschreibt Definition)*/
}

ul#hauptmenu ul#untermenu {
  display: none;
  /* Untermenüpunkte standardmäßig ausblenden*/
  position: absolute;
  width: 100%;
}

ul#hauptmenu li:hover #untermenu {
  display: block;
  /* beim Hovern über übergeordneten Menü, soll das untergeordnete eingeblendet werden */
  z-index: 500;
  /* Untermenüpunkte werden über dem Content angezeigt (Ebenen-technisch) */
}
<!-- Kletterwelt - Home v1.06 vom 16.06.2017 -->
<!DOCTYPE HTML>
<html lang="de">

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="Florian Zimmermann, Rudolf Geist & Thomas Kretzer" content="HTML-Projekt: Kletterwelt">

  <link rel="stylesheet" type="text/css" href="./css/CWAllgemeinStyle.css">
  <link rel="stylesheet" type="text/css" href="./css/CWContentStyle.css">

  <link rel="icon" href="./bilder/icon.ico">
  <title>Kletterwelt - Home</title>
</head>

<body>
  <header>
    <img src="./bilder/headerbild.jpg">

    <!--Hinweis zu Navis! Untermenüs stehen innerhalb der Klammern eines Listenelements li !!! -->
    <ul class="navi" id="hauptmenu">
      <li><a href="#">HOME</a>
        <ul class="navi" id="untermenu">
          <li><a href="#">NEWS</a></li>
        </ul>
      </li>
      <li><a href="#">VIDEOS</a></li>
      <li><a href="#">SCHWIERIGKEITSGRADE</a></li>
      <li><a href="#">SICHERUNGSGERÄTE</a>
        <ul class="navi" id="untermenu">
          <li><a href="#geräteart1">DINGER</a></li>
          <li><a href="#geräteart2">TEILE	</a></li>
        </ul>
      </li>
      <li><a href="#">ALLGEMEINES</a></li>
    </ul>
  </header>

  <main>
    <img class="mySlides" src="egal" style="width:100%">
    <!-- doesent matter now -->
  </main>
</body>

</html>

Note: My index.html will be in a project-folder. In this folder will be a "CSS"-folder, where my CWAllgemeinStyle.css lies.

Solution

  • It wraps, because the elements can't shrink to break the link text, however it could break the list since there were multiple list elements. And the text shrinks slower than the width of the page does. Personally, I wouldn't scale the font live with the window, I would make break points with media queries (https://www.w3schools.com/css/css_rwd_mediaqueries.asp) for different screens and devices. And for positioning I usually use flexbox (https://www.w3schools.com/css/css3_flexbox.asp). Here's an example using both of these on Your HTML document:

    <!DOCTYPE HTML>
<html lang="de">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    <meta name="Florian Zimmermann, Rudolf Geist & Thomas Kretzer" content="HTML-Projekt: Kletterwelt">

    <link rel="stylesheet" type="text/css" href="styles.css">

    <link rel="icon" href="./bilder/icon.ico">  
    <title>Kletterwelt - Home</title>
</head>

<body>
    <header>        
        <img src="./bilder/headerbild.jpg">

        <!--Hinweis zu Navis! Untermenüs stehen innerhalb der Klammern eines Listenelements li !!! -->
        <ul class="navi navi-top">
            <li><a href="#">HOME</a>
                <ul class="navi navi-bottom">
                    <li><a href="#">NEWS</a></li>
                </ul>
            </li>
            <li><a href="#">VIDEOS</a></li>
            <li><a href="#">SCHWIERIGKEITSGRADE</a></li>
            <li><a href="#">SICHERUNGSGERÄTE</a>
                <ul class="navi navi-bottom">
                    <li><a href="#geräteart1">DINGER</a></li>
                    <li><a href="#geräteart2">TEILE </a></li>
                </ul>
            </li>   
            <li><a href="#">ALLGEMEINES</a></li>
        </ul>
    </header>

    <main>
            <img class="mySlides" src="egal" style="width:100%">
      <!-- doesent matter now -->       
    </main>
</body>
</html>

    And the CSS:

    html,
body {
  background: white;
  font-size: 12px;
  padding: 0;
  margin: 0 5%;
}
.navi {
  display: -webkit-flex;
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.navi-top {
  -webkit-flex-direction: column;
  flex-direction: column;
}
.navi > li {
  -webkit-flex: 1;
  flex: 1;
  background: black;
  border-radius: 0.3rem;
  margin: 0.1rem;
  position: relative;
}
.navi-top > li:hover > .navi-bottom {
  display: -webkit-flex;
  display: flex;
}
.navi-bottom {
  display: none;
  -webkit-flex-direction: column;
  flex-direction: column;
  width: 100%;
  padding: 0;
  position: relative;
}
.navi-bottom li {
  width: 100%;
  padding: 0;
  margin: 0 auto;
}
.navi a {
  display: block;
  background: #333333;
  color: white;
  text-align: center;
  padding: 1rem;
  border-radius: 0.3rem;
  margin: 0.2rem;
}
.navi a:hover {
  background: #FF0000;
}
@media only screen and (min-width: 750px) {
  html,
  body {
    font-size: 16px;
  }
  .navi-top {
    -webkit-flex-direction: row;
    flex-direction: row;
  }
  .navi-bottom {
    position: absolute;
  }
}