Jump to content
rcristianofaria

Menu

By rcristianofaria, in HTML

Recommended Posts

rcristianofaria    0

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

Share this post

Link to post
Share on other sites

HappyHippyHippo    1,188

HappyHippyHippo
Posted

mas as letras estão alinhadas ao centro do espaço da entrada do menu ...

faz um desenho do que queres

IRC : sim, é algo que ainda existe >> #p@p

Share this post

Link to post
Share on other sites

HappyHippyHippo    1,188

HappyHippyHippo
Posted 
#menuprincipal li a {
/*
padding-top:23px;
padding-right: 27px;
padding-left: 27px;
*/
padding: 11px 27px;
}

IRC : sim, é algo que ainda existe >> #p@p

Share this post

Link to post
Share on other sites

rcristianofaria    0

rcristianofaria
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:

67226321.png

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

Share this post

Link to post
Share on other sites

rcristianofaria    0

rcristianofaria
Posted (edited)

Obrigado, mas não funciona!

Continua igual!

Edited by rcristianofaria

Share this post

Link to post
Share on other sites

rcristianofaria    0

rcristianofaria
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:

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>

Share this post

Link to post
Share on other sites

rcristianofaria    0

rcristianofaria
Posted

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!

Share this post

Link to post
Share on other sites

HappyHippyHippo    1,188

HappyHippyHippo
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

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
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