CODEWITHSUNDEEP
htmlcss
DjKillerMemeStar
DjKillerMemeStar

Reputation: 425

I can't center my menu on HTML

So I'm building a website with a top menu but I ran into a problem. Basicly I want to have my menu centered but now its aligned to the left. Also the menu has a background color with would have to expand the whole width. I've tryed the answers describes here: How do I center the navigation menu?. But to no succes.

My CSS/HTML code is:

body {
  font-family: FuturaLight;
  background: white;
  color: #333;
  align-content: top;
  margin: 0;
  margin-bottom: 5em;
  padding: 0;
}
.margin {
  margin-left: 300px;
  margin-right: 300px;
}
ul {
  font-family: Futura;
  font-size: 25px;
  list-style-type: none;
  position: fixed;
  top: 61px;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
  border-right: 1px solid yellowgreen;
  border-top: 1px solid yellowgreen;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover:not(.active) {
  background-color: #333;
}
.active {
  background-color: white;
  color: green
}
.spacer {
  width: 100%;
  height: 95px;
}
<!DOCTYPE HTML>
<HTML>

<HEAD>
  <TITLE>Scouts Permeke</TITLE>
  <link rel="stylesheet" type="text/css" href="siteStyle.css">
</HEAD>

<BODY>
  <H1>Scouts Permeke</H1>

  <ul>
    <li><a class="active" href="scouts_permeke_site.html">Home</a>
    </li>
    <li><a href="scouts_news.html">Nieuws</a>
    </li>
    <li><a href="scouts_contact.html">Contact</a>
    </li>
    <li><a href="scouts_over.html">Over</a>
    </li>
    <li><a href="scouts_fotos.html">Foto's</a>
    </li>
    <li><a href="scouts_activiteiten.html">Activiteiten</a>
    </li>
    <li><a href="scouts_papierwerk.html">Papierwerk</a>
    </li>
    <li><a href="scouts_afspraken.html">Afspraken</a>
    </li>
    <li><a href="scouts_uniform.html">Uniform</a>
    </li>
    <li><a href="scouts_technieken.html">Technieken</a>
    </li>
    <li><a href="scouts_jaarthema.html">Jaarthema</a>
    </li>
    <li><a href="scouts_rituelen.html">Rituelen</a>
    </li>
    <li><a href="scouts_verhuur.html">Verhuur</a>
    </li>
    <li><a href="scouts_inschrijven.html">Inschrijvingen</a>
    </li>
  </ul>

  <div class="spacer">
    &nbsp;
  </div>

  <img src="groepsfoto.jpg" width="100%" " >

        <div style="font-family: Futura ">
		    <H2>Welkom op onze vernieuwde site!</H2>
            <H2>Kijk gerust even rond.</H2>
        </div>
    </BODY>
</HTML>

Many thanks in advance.

Upvotes: 1

Views: 108

Answers (2)

ShufflerShark
ShufflerShark

Reputation: 387

Have you considered flexbox as it will work depending on screen size and you can set it to be centre alligned.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Just note it wont work in older versions of ie

    BODY {
    font-family: FuturaLight;
    background: white; color: #333;
    align-content: top;
    margin: 0;
    margin-bottom: 5em; 
    padding: 0;

    }
    .margin {
    margin-left: 300px;
    margin-right: 300px;
    }

    ul {
    font-family: Futura;
    font-size: 25px;
    list-style-type: none;
    position: fixed;
    top: 61px;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    display: flex;
    justify-content:center;
    flex-wrap: wrap 
    }

    li {
    float: left;
    border-right:1px solid yellowgreen;
    border-top:1px solid yellowgreen;

    }

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

    li a:hover:not(.active) {
    background-color: #333;
    }

    .active {
    background-color: white;
    color: green
    }

    .spacer
    {
    width: 100%;
    height: 95px;
    }
<!DOCTYPE HTML>
    <HTML>
    <HEAD>
        <TITLE>Scouts Permeke</TITLE>
        <link rel="stylesheet" type="text/css" href="siteStyle.css">
    </HEAD>
	<BODY>
		<H1>Scouts Permeke</H1>

        <ul>
            <li><a class="active" href="scouts_permeke_site.html">Home</a></li>
            <li><a href="scouts_news.html">Nieuws</a></li>
            <li><a href="scouts_contact.html">Contact</a></li>
            <li><a href="scouts_over.html">Over</a></li>
            <li><a href="scouts_fotos.html">Foto's</a></li>
            <li><a href="scouts_activiteiten.html">Activiteiten</a></li>
            <li><a href="scouts_papierwerk.html">Papierwerk</a></li>
            <li><a href="scouts_afspraken.html">Afspraken</a></li>
            <li><a href="scouts_uniform.html">Uniform</a></li>
            <li><a href="scouts_technieken.html">Technieken</a></li>
            <li><a href="scouts_jaarthema.html">Jaarthema</a></li>
            <li><a href="scouts_rituelen.html">Rituelen</a></li>
            <li><a href="scouts_verhuur.html">Verhuur</a></li>
            <li><a href="scouts_inschrijven.html">Inschrijvingen</a></li>
        </ul>

        <div class="spacer">
            &nbsp;
        </div>

        <img src="groepsfoto.jpg" width="100%"" >

        <div style="font-family: Futura">
		    <H2>Welkom op onze vernieuwde site!</H2>
            <H2>Kijk gerust even rond.</H2>
        </div>
    </BODY>
</HTML>

Upvotes: 0

Patrick Mlr
Patrick Mlr

Reputation: 2965

Add to your ul in your Stylesheet this:

text-align: center;

and replace from li

float: left;

with this

display: inline-block;

That could do it.

Hope this helps.

Upvotes: 3

Related Questions