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

HappyHippyHippo · December 15, 2012 at 01:29 AM

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

faz um desenho do que queres

rcristianofaria · December 15, 2012 at 12:42 PM

desculpa, expressei-me mal!

as letras já estão centradas horizontalmente... eu quero centrar-las verticalmente e com a barra na mesma posição.

vê este site: http://www.fulltiltpoker.com/pt/

HappyHippyHippo · December 15, 2012 at 01:51 PM

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

rcristianofaria · December 15, 2012 at 02:35 PM

funcionou... muito obrigado.

já agora não faz mal usar as <li> sem ter o <ul> ?

HappyHippyHippo · December 15, 2012 at 04:54 PM

em teoria faz, na prática não

conclusão : usa

rcristianofaria · December 15, 2012 at 09:07 PM

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

HappyHippyHippo · December 15, 2012 at 10:21 PM

ul
{
 pading: 0;
 margin: 0;
}

rcristianofaria · December 16, 2012 at 01:45 PM

Obrigado, mas não funciona!

Continua igual!

Edited December 16, 2012 at 01:46 PM by rcristianofaria

HappyHippyHippo · December 16, 2012 at 02:28 PM

corrigiste o meu erro de pading para padding ?

Rui Carlos · December 16, 2012 at 11:13 PM

em teoria faz, na prática não

conclusão : usa

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

rcristianofaria · December 17, 2012 at 12:44 PM

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>

HappyHippyHippo · December 17, 2012 at 01:18 PM

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

rcristianofaria · December 17, 2012 at 01:26 PM

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!

HappyHippyHippo · December 17, 2012 at 02:40 PM

diz o url onde se pode ver isso, porque de outro módo é muito complicado

rcristianofaria · December 17, 2012 at 06:55 PM

http://freeacxes.host56.com/

ve aqui!

HappyHippyHippo · December 17, 2012 at 07:11 PM

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 */

rcristianofaria · December 17, 2012 at 10:55 PM

Fiz o que me disseste!

Só que nao ficou da forma pretendida! (vê o link: http://freeacxes.host56.com/)

HappyHippyHippo · December 17, 2012 at 10:59 PM

não fizeste não ...

olha bem para o que eu escrevi e para o que tu tens

rcristianofaria · December 18, 2012 at 11:39 AM

Obrigado... o erro foi meu, Desculpa

Ajudaste-me imenso! Obrigado 🙂

Sign In

Menu

Recommended Posts

rcristianofaria

HappyHippyHippo

rcristianofaria

HappyHippyHippo

rcristianofaria

HappyHippyHippo

rcristianofaria

HappyHippyHippo

rcristianofaria

HappyHippyHippo

Rui Carlos

rcristianofaria

HappyHippyHippo

rcristianofaria

HappyHippyHippo

rcristianofaria

HappyHippyHippo

rcristianofaria

HappyHippyHippo

rcristianofaria

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information