Menu buga ao trocar de monitor

[girotto000 0]

Bom dia! Estou com um problema no menu do meu site.

Hoje ao abrir ele no meu computador de mesa ele fica normal, porém, ao abrir no notebook ele desconfigura

Imagem dele desconfigurado:

 

 

 

 

 

 

Alguém pode me auxiliar para tornar ele adaptavel a qualquer resolução?

 

Código HTML:

 

 

 

<div id="menu">
<ul>
<li><a href="index">Inicio</a></li>
<li>|</a></li>
<li><a href="info">Informações</a></li>
<li>|</a></li>
<li><a href="painel" target="_blank">Painel</a></li>
<li>|</a></li>
<li><a href="downloads">Downloads</a></li>
<li>|</a></li>
<li><a href="regras">Regras</a></li>
<li>|</a></li>
<li><a href="rankings">Rankings</a></li>
<li>|</a></li>
<li><a href="equipe">Equipe</a></li>
<li>|</a></li>
<li><a href="donation">Doações</a></li>
<li>|</a></li>
<li><a href="../forum/" target="_blank">Fórum</a></li>
<li>|</a></li>
<li><a href="formulario">Contato</a></li>
</ul>
</div>

 

 

 

Código CSS:

 

 

 

#menu {
height: 50px;
line-height: 50px;
background: url(../images/menu.png) no-repeat;
background-position: top center;
}
#menu ul {
padding-left: 420px;
list-style-type: none;
}
#menu ul li {
display: block;
float: left;
text-align: center;
}
#menu ul li a {
color: #eee;
padding: 0 10px;
text-decoration: none;
font-weight: 600;
}
#menu ul li a:hover {
color: #92ff04;
text-decoration: underline;
}

 

[Emet 6]

Media queries:

 

http://blog.popupdesign.com.br/design-responsivo-iii-media-queries-e-compatibilidade/

 

Leia que vai te ajudar bastante.

[William Bruno 1501]

#menu ul {
padding-left: 420px;

isso está errado.

 

Poste um link para debugarmos online.

[girotto000 0]

 

http://girotto000.esy.es/site/

[William Bruno 1501]

Deixa assim:

 

#menu ul {
    list-style-type: none;
    margin: 0 auto;
    width: 770px;
}

entendeu a diferença?

Em vez de colocar um valor para funcionar em uma só resolução, eu estou centralizando para qq resolução.

 

Existem alguns outros erros ainda, como vc não pode colocar pipe | entre os LIs, isso tá quebrando o html. Existem formas melhores de fazer esse efeito do tracinho.

[girotto000 0]

Deixa assim:

 

#menu ul {
    list-style-type: none;
    margin: 0 auto;
    width: 770px;
}

entendeu a diferença?

Em vez de colocar um valor para funcionar em uma só resolução, eu estou centralizando para qq resolução.

 

Existem alguns outros erros ainda, como você não pode colocar pipe | entre os LIs, isso tá quebrando o html. Existem formas melhores de fazer esse efeito do tracinho.

 

Entendi!

Ficou perfeito assim ;)

Muito obrigado william!