Ir para o conteúdo

  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

rcristianofaria

Menu

Por rcristianofaria, em HTML

Mensagens Recomendadas

rcristianofaria    0

rcristianofaria
Publicado

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.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.

Partilhar esta mensagem

Ligação para a mensagem
Partilhar noutros sites

rcristianofaria    0

rcristianofaria
Publicado

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:

67226321.png

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

Partilhar esta mensagem

Ligação para a mensagem
Partilhar noutros sites

rcristianofaria    0

rcristianofaria
Publicado

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:

28782550.png

Quando esta hover fica assim:

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>

Partilhar esta mensagem

Ligação para a mensagem
Partilhar noutros sites

rcristianofaria    0

rcristianofaria
Publicado

e porque tem a barrinha final ?? não vem mais nada depois ...

não!

eu estava a usar um backgorund-repeat: none

não aparecia a tal barra e também não aparecia o hover... Basicamente nao sei o que fazer!

Partilhar esta mensagem

Ligação para a mensagem
Partilhar noutros sites

HappyHippyHippo    1185

HappyHippyHippo
Publicado

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

Partilhar esta mensagem

Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora
Ir Para Lista de Tópicos HTML
×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.

  Aceito