Jump to content

[RESOLVIDO]Centrar Um Div Chato


fantasma
 Share

Recommended Posts

Boa noite a todos

Tenho o seguinte HTML

<div id="top">
<!-- MENU -->
<div class="container_logo"></div>


<div class="container_menu">
<a href="#" class="link_menu">A Quinta</a>
	<span class="only_space">   </span>
<a href="#" class="link_menu">Carne</a>
	<span class="only_space">   </span>
<a href="#" class="link_menu">Mel</a>
	<span class="only_space">   </span>
<a href="#" class="link_menu">Vinho</a>
	<span class="only_space">   </span>
<a href="#" class="link_menu">Compotas</a>
	<span class="only_space">   </span>
<a href="#" class="link_menu">Encomendas</a>
	<span class="only_space">   </span>
<a href="#" class="link_menu">Contactos</a>
	<span class="only_space">   </span>
<a href="#" class="link_menu">Galeria</a>
	<span class="only_space">   </span>
<a href="#" class="link_menu">Notícias</a>
	<span class="only_space">   </span>
<a href="#" class="link_menu">Newsletter</a>


</div>

</div>

Que é estilizado pela seguinte folha

.container_menu
{
position: absolute; 
left: 25%; 
right:25%;
top: 15%; 
width: 100%; 
height: 25px; 
text-align:center;






}
a.link_menu
{

height:25px;
line-height:25px;
font-size:14px;
font-family:'aller_i';
color:#3F4C42;
text-decoration:none;
float:left;
margin: 0 auto;
}
a.link_menu:link {
color:#1e772d;
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:none;
}
.only_space
{
float:left;
width:20px;
}

No entanto o meu dilema é o seguinte:

Se eu centrar o contentor como está feito com os parametro left:25% e right 25%, muito bem, os menus até ficam centraditos na página e tal. No entanto, se eu quiser inserir um menu adicional, esse novo link (que seria gerado dinamicamente por PHP) faz com que o menu fique descentrado, porque esse novo elemento aparece mais à direita.

Alguma ideia de como fazer o div centrar absolutamente, quer se insira ou retire elementos?

obrigado pela ajuda  🙂

Link to comment
Share on other sites

Pode ser assim?

.container_menu
{
        position: absolute;
        top: 15%;
        width: 100%;
        height: 25px;
        text-align:center;
}
a.link_menu
{
        height:25px;
        line-height:25px;
        font-size:14px;
        font-family:'aller_i';
        color:#3F4C42;
        text-decoration:none;
        margin: 0 auto;
}
a.link_menu:link {
        color:#1e772d;
        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:none;
}
.only_space
{
        width:20px;
}

Basicamente retirei:

- float: left das classes link_menu e only_space;

- left: 25%; e right:25%; da classe container_menu

Pedro Martins

Sharing is Knowledge!

http://www.linkedin.com/in/rechousa

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.