Jump to content

Menu

rcristianofaria

By rcristianofaria,
in HTML

 Share

Recommended Posts

rcristianofaria void

rcristianofaria

Posted
Posted

Olá a todos.

Estou a trabalhar na minnha PAP, que é um site para uma instituição publica.. Só que estou a ter uns problemas com o menu, ja falei com o meu professor e ele não consegui resolver esse problema, também já procurei bastante nada de nada!

Quando eu uso este código:

HTML

<body>
<div id="container">
<div id="top">
<div id="logo">
        <img src="images/logo.png" id="imglogo"/>
    </div>
    <div id="conteudotop">
        <div id="informacoes">
            <span id="textoinformacoes">União Desportiva e Social de Roriz</span><br>IPSS - Instituição Pública de Solideriedade Social<br>
            IUP - Instituição de Utilidade Pública
        </div>
        <div id="menuprincipal">

            <li><a href="#">Noticias</a></li>
            <li><a href="#">UDS Roriz</a></li>
            <li><a href="#">Eventos</a></li>
            <li><a href="#">Equipas</a></li>
            <li><a href="#">Área Sócio</a></li>
            <li><a style="background-image:none" href="#">Loja</a></li>

        </div>
    </div>
</div>
<div id="corpo">
    teste1
</div>

</div>
</body>

CSS

body{
 background-image: url(../images/bg.png);
 background-repeat: repeat-x;
 background-color: #020202;
}
#container {
 margin:1em auto;
 width:900px;
}
/* top */
#top{
 width:900px;
 height:130px
}
#logo{
 float:left;
 width:150px;
 height:120px;
}
#imglogo{
 position:absolute;
 margin-left:40px;
 margin-top:10px;
}
#conteudotop{
 width:750px;
 height:120px;
 float:left;
}
#textoinformacoes{
 font-size:15px;
 text-decoration: underline;
 font-weight:bold;
}
#informacoes{
 padding-top:20px;
 float:left;
 text-align:center;
 color:#FFF;
 font-size:11px;
 font-family:Verdana, Geneva, sans-serif;
 text-shadow:#CCC;
 width:750px;
 height:59px;
}
/* menu */
#menuprincipal{
 width:750px;
 height:41px;
 background:url(../images/menuprincipal.png) repeat-x;
 float:left;
 border-radius:7px;
}

#menuprincipal li {
 float:left;
 list-style:none;
}
#menuprincipal li a {
 background-image:url(../images/menuprincipal_divisao.png);
 background-repeat: no-repeat;
 background-position: right;
 padding-top:23px;
 padding-right: 27px;
 padding-left: 27px;
 display: block;
 text-decoration: none;
 font-family:Verdana, Geneva, sans-serif;
 font-size: 16px;
 color: #FFF;
}

O site fica assim.http://img21.imageshack.us/img21/6504/57613376.png

Não consigo arranjar uma forma de alinhar as barras que dividem o menu. Eu quero que elas fiquem na mesma posição mas que as letras fiquem alinhadas ao centro do menu.

Se alguém me poder ajudar, ficaria bastante agradecido.

PS: Se eu usar os <li> dentro de um <ul> o texto do menu ganha uma espécie de padding, onde não consigo alterar os valores.

Link to comment
Share on other sites
rcristianofaria void

rcristianofaria

Posted
  • Author
Posted

Realmente vou ter que usar o <ul> para depois mais tarde poder usar um dropdown menu...

mas quando ponho o <ul> 

<ul>  
		  <li><a href="#">Noticias</a></li>
		  <li><a href="#">UDS Roriz</a></li>
		  <li><a href="#">Eventos</a></li>
		  <li><a href="#">Equipas</a></li>
		  <li><a href="#">Área Sócio</a></li>
		  <li><a style="background-image:none" href="#">Loja</a></li>
</ul>

o menu fica assim:

http://img132.imageshack.us/img132/1229/67226321.png

sinceramente não sei o que se passa... já fiz bastantes menus desta forma e nunca aconteceu nada disto, mas enfim...

Link to comment
Share on other sites
rcristianofaria void

rcristianofaria

Posted
  • Author
Posted

Usa... e depois queixa-te que no browser XPTO o site não está direito 🙂

Já estou a usar! O HappyHippyHippo ajudou-me quanto à margin e ao padding. Obrigado 🙂

Agora tenho só mais uma duvida!

quando o <a> com o link da loja nao esta hover fica assim:

http://img90.imageshack.us/img90/7803/28782550.png

Quando esta hover fica assim:

http://img803.imageshack.us/img803/4586/58893134.png

Eu queria que ele ocupasse o resto da barra, ou seja, aqueles pixels que faltam

O codigo nesse <li><a> esta assim: 

<li><a style="border-top-right-radius:7px; border-bottom-right-radius:7px;" href="#">Loja</a></li>
Link to comment
Share on other sites
HappyHippyHippo stack overflow

HappyHippyHippo

Posted
Posted

ok

antes do mais, tens de perceber que não estás a controlar a alrgura dos elementos

a única coisa que tens é que a largura total deveria ser 750px, mas nada diz que largura deverá ter os elementos internos do menu.

tens é uma sorte do camandro, porque tens 6 elementos do menu para serem distribuidos por 750px e isso dá conta certa !!!!

conclusão teraś de:

- dizer que cada elemento do menu (li) deverá ter 125px de largura

- remover qualquer tipo de padding horizontal dos elementos internos de cada opção do menu

- marcar o texto do menu para ser apresentado centrado (algo que não tens !!!!)

conclusão : adiciona/altera os seguintes comandos aos teu CSS

#menuprincipal { text-align: center; }      /* centrar o texto ao centro da caixa de apresentação */
#menuprincipal ul li { width: 125px; }      /* dizer que os elementos do menu teem 125 pixeis de largura */
#menuprincipal ul li a { padding: 11px 0; } /* retirar o padding horizontal do link */
IRC : sim, é algo que ainda existe >> #p@p
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
Go to topic listing
×
×
  • 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.

  I accept