Nikolai Lunde Nikolai Lunde - 2 months ago 8
CSS Question

readjust Horizontal menu to resolution

I'm new to this, so I'm clueless.

Whenever I go to my site with a different resolution the menu changes a lot and does not align correctly. Just tell me if i need more of the html or css.
My webpage is Aulan.co

My code:



ul {
font-size: 25px;
color: black;
text-align: center;
list-style-type: none;
margin-bottom: 2em;
line-height: 150%;
margin-left: 3em;
margin-right: 5em;
}

#menu {
list-style-type: none;
margin: auto;
width: 90%;
height: auto;
padding: auto;
overflow: hidden;
background-color: #353B4E;
text-align: center;
font-size: 18px;
}

li {
text-align: center;
}

li a {
display: block;
color: white;
text-align: center;
padding: 5px 70px;
text-decoration: none;
height: auto;
}

li a:hover {
background-color: #111;
display: inline;
}

#menus {
float: left;

<h1> AuLan </h1>
<ul id="menu">
<li id="menus"><a class="active">Forside</a></li>
<li id="menus"><a href="info.html">Informasjon</a></li>
<li id="menus"><a href="regler.html">Regler</a></li>
<li id="menus"><a href="crew.html">Crew</a></li>
<li id="menus"><a href="kontakt.html">Kontakt oss</a></li>
<li id="menus"><a href="seat.html">Seatmap</a></li>
<li id="menus"><a href="time.html">Timeplan</a></li>
</ul>




Answer

it's not really clear what you want to achieve, but I tried to change your code in a way that I think you might want. I took out a lot of unneccessary code from the CSS and added some. In the HTML, i change the menusID to a class, since IDs should only be used once per page.

You can adjust especially the min-width and padding setting in the menu li a rule to your needs (but also the other width and padding settings)

 
#menu {
      font-size: 25px;
      list-style-type: none;
      width: 90%;
      background-color: #353B4E;
      font-size: 18px;
      padding: 10px 20px;
    }
#menu li {
    display: inline-block;
    line-height: 150%;
}
#menu li a {
    display: block;
    min-width: 100px;
    color: white;
    padding: 5px 15px;
    text-decoration: none;
}
#menu li a:hover {
    background-color: #111;
}
<h1> AuLan </h1>
<ul id="menu">
  <li class="menus"><a class="active">Forside</a></li>
  <li class="menus"><a href="info.html">Informasjon</a></li>
  <li class="menus"><a href="regler.html">Regler</a></li>
  <li class="menus"><a href="crew.html">Crew</a></li>
  <li class="menus"><a href="kontakt.html">Kontakt oss</a></li>
  <li class="menus"><a href="seat.html">Seatmap</a></li>
  <li class="menus"><a href="time.html">Timeplan</a></li>
</ul>