Centralized Menu

Question

Centralized Menu

Navigation

#1 by (5 votes)
#2 by (0 votes)

7

I'm having a hard time aligning the text from my menu to the center, so I'm starting to learn how to develop websites.

Website Image:

Thecodelookslikethis:

<center><h1>MeuSite</h1><divid="menu">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">Informações</a></li>
        <li><a href="">Novidades</a></li>
        <li><a href="">Contato</a></li>
        <li><a href="">Staff</a></li>
    </ul>
   </div>
</center>

css :

    h1 {
        color:#00C
       }

    body {
        padding:0px;
        margin:auto;
        max-width: auto;
    }

    #menu ul {
        padding:0px;
        margin: 0 auto;
        float: left;
        width: 100%;
        background-color:#999;
        list-style:none;
        font:80% Tahoma;
        alignment-adjust:central;
        max-width: auto;
    }

    #menu ul li { 
        display: inline;
        width: 520px;
        }

    #menu ul li a {
        background-color:999;
        color: #333;
        text-decoration: none;
        border-bottom:3px solid #EDEDED;
        padding: 2px 10px;
        float:left;
    }

    #menu ul li a:hover {
        background-color:#D6D6D6;
        color: #6D6D6D;
        border-bottom:3px solid #EA0000;
    }

html css menu

asked by anonymous 11.05.2016 / 15:16

2 answers

Do I need to close the connection on each query? How to make a burger menu open from right to left?

score 5 · Answer 1

As I said in the comment, using the center of html tag is wasted, totally unnecessary, and stuff.

Let's organize all alignments by css . I prefer not to use ul li to make menu, I recommend that you also do not use, it is more to order items and others.

In this example (which has its html as template) I used the nav tag, which is especially for menu, making a lot easier. But enough talk and let's get the solution.

The code is this:

h1 {
  text-align: center;
}
header,
nav {
  text-align: center;
  background: #999;
  margin: 20px 0;
  padding: 10px;
}
nav a {
  text-decoration: none;
  border-radius: 5px;
  color: black;
  padding: 3px 8px;
}
nav a:hover {
  text-decoration: none;
  border-radius: 1px;
  color: black;
  padding: 3px 8px;
  background-color: #D6D6D6;
  border-bottom: 3px solid #EA0000;
}

<h1>Meu Site</h1>
<nav role='navigation'>
  <a href="#0">Home</a>
  <a href="#0">Informações</a>
  <a href="#0">Novidade</a>
  <a href="#0">Contato</a>
</nav>

Centralizing a block element is done by setting its margin-left and margin-right as auto (element must have a defined width, otherwise its width would be 100% and would not require centralization).

Basically that's all, I hope this is what I wanted;

score 0 · Answer 2

You can do as follows:

h1 {
  color:#00C;
  text-align: center;
}

body {
  padding:0px;
  margin:auto;
  max-width: auto;
}

#menu {
  width: 100%;
  height: 30px;
  background-color: #999;
}

#menu ul {
  padding: 0px;
  margin: 0 auto;
  width: 500px;
  height: 30px;
  list-style: none;
  font: 80% Tahoma;
  alignment-adjust: central;
  max-width: auto;
  display: block;
  background-color: #777;
}

#menu ul li { 
  display: inline;
  width: 520px;
}

#menu ul li a {
  background-color:999;
  color: #333;
  text-decoration: none;
  border-bottom:3px solid #EDEDED;
  padding: 2px 10px;
  float:left;
}

#menu ul li a:hover {
  background-color:#D6D6D6;
  color: #6D6D6D;
  border-bottom:3px solid #EA0000;
}

<h1>Meu Site</h1>

<div id="menu">
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">Informações</a></li>
    <li><a href="">Novidades</a></li>
    <li><a href="">Contato</a></li>
    <li><a href="">Staff</a></li>
  </ul>
</div>

Note: Avoid using the <center> tag because this tag is deprecated, and no longer belongs to the HTML5 specification. An option to override the use of this tag would be to use the text-align:center; property of css .