Jump to content

Centrar Menu Independente/ da resolução


fantasma
 Share

Recommended Posts

Boa noite a todos.

Tenho um layout que possui um menu logo em cima que necessita de ser centrado na pagina. Ele está embrulhado num div (id=top) e todo o site está incluido num container.

No entanto, tenho alguns problemas:

1.º O  div do menu (em branco) deve ocupar o ecrã todo, mas se eu aumento a resolução do ecrã, a cor de fundo do body mete-se à volta do div.

2.º Se fizer um arranjinho, e meter um contentor para o body e outro distinto para o top (menu) o menu apenas fica centrado a olho, logo se eu quiser programá-lo para introduzir outro menu, o mesmo vai ficar descentrado.

Aqui vai o meu código até agora

body
{
background-color:#5a6f5d;	
margin:0;
padding:0;
}
#container
{
width: 1200px; 
    margin: 0px auto;
    text-align: left;
padding:0;
background-color:#5a6f5d;	
height:2000px;
}
/*###################################################################################
#####################################################################################
####  MENU
#####################################################################################
###################################################################################*/


#top {
width:100%;
height:150px;
background-color:#FFFFFF;
padding:0px;
margin: 0px auto;
    text-align: left;
padding:0;
overflow:hidden;
}
.container_logo
{
width:100%;
position:relative;
top:25px;

text-align:center;
height:65px;
margin: 0 auto;
background:url(../gfx/logo.png) top center no-repeat;	
}
/* + */
.container_menu
{
width:850px;
height:25px;
position:relative;
visibility:visible;
top:40px;
text-align:center;
margin: 0 auto;
}
/* + */
a.link_menu
{
height:25px;
line-height:25px;
font-size:13px;
font-family:'aller_bi';
color:#3F4C42;
text-decoration:none;
}
a.link_menu:link {
color:#3F4C42;
text-decoration:none;
}
a.link_menu:visited {
color:#3F4C42;
text-decoration:none;
}
a.link_menu:hover {
color:#3a6e07;
text-decoration:none;
}
a.link_menu:active {
color:#3f4c42;
text-decoration:underline;
}
/* + */
.only_space
{
width:20px;
}
.object_menu
{
float:left;
text-align:left;
}

}

Agradeço desde já toda a ajuda possível

Abraço

Link to comment
Share on other sites

O selector #top tem uma largura definida para 100%, o que vai ocupar o teu ecrã todo na horizontal... Se colocares uma largura de, por exemplo, 900px ele vai centrá-lo.

Outra coisa que reparei foi que o teu selector #container tem uma largura e uma altura absurda que, por exemplo, na minha resolução ia ficar completamente desprezível.... Que pretendes fazer com esse selector?

Espero ter-te ajudado.

Link to comment
Share on other sites

Eish... nem reparei nisso

A largura está ok, segundo o designer, e centra todo o layout. A altura era só para testes lol.

De facto, a tua solução resolve o problema de centrar e nao desformatar em relação ao body.

No entanto, como eu tenho todo o body com background, o Div do menu fica quase que como "abraçado" nos limites do div pela cor do background, mesmo que meta esse div fora das tags do <body>

Se tiveres uma solução, agradecia.

Obrigado pela ajuda  👍

Link to comment
Share on other sites

Isto apenas se refere a a baixas resoluções. Para resoluções maiores, o ratio mantém-se

Com o meu método:

http://img190.imageshack.us/img190/6/helpcss1.png

O Corpo vai para a direita, e o menu fica descentrado relativamente ao corpo

Com o teu método:

width=750 height=108http://img269.imageshack.us/img269/8509/helpcss2.png[/img]

O menu mantém-se sempre alinhado com o corpo, mas é abraçado pela cor de fundo do body como podes verificar

Espero que tenha clarificado a minha dúvida 👍

Abraço

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.