rcristianofaria Posted December 14, 2012 Report Share Posted December 14, 2012 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 More sharing options...
HappyHippyHippo Posted December 15, 2012 Report Share Posted December 15, 2012 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 Portugol Plus Link to comment Share on other sites More sharing options...
rcristianofaria Posted December 15, 2012 Author Report Share Posted December 15, 2012 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/ Link to comment Share on other sites More sharing options...
HappyHippyHippo Posted December 15, 2012 Report Share Posted December 15, 2012 #menuprincipal li a { /* padding-top:23px; padding-right: 27px; padding-left: 27px; */ padding: 11px 27px; } IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Link to comment Share on other sites More sharing options...
rcristianofaria Posted December 15, 2012 Author Report Share Posted December 15, 2012 funcionou... muito obrigado. já agora não faz mal usar as <li> sem ter o <ul> ? Link to comment Share on other sites More sharing options...
HappyHippyHippo Posted December 15, 2012 Report Share Posted December 15, 2012 em teoria faz, na prática não conclusão : usa IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Link to comment Share on other sites More sharing options...
rcristianofaria Posted December 15, 2012 Author Report Share Posted December 15, 2012 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 More sharing options...
HappyHippyHippo Posted December 15, 2012 Report Share Posted December 15, 2012 ul { pading: 0; margin: 0; } IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Link to comment Share on other sites More sharing options...
rcristianofaria Posted December 16, 2012 Author Report Share Posted December 16, 2012 (edited) Obrigado, mas não funciona! Continua igual! Edited December 16, 2012 by rcristianofaria Link to comment Share on other sites More sharing options...
HappyHippyHippo Posted December 16, 2012 Report Share Posted December 16, 2012 corrigiste o meu erro de pading para padding ? IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Link to comment Share on other sites More sharing options...
Rui Carlos Posted December 16, 2012 Report Share Posted December 16, 2012 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 🙂 Rui Carlos Gonçalves Link to comment Share on other sites More sharing options...
rcristianofaria Posted December 17, 2012 Author Report Share Posted December 17, 2012 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 More sharing options...
HappyHippyHippo Posted December 17, 2012 Report Share Posted December 17, 2012 e porque tem a barrinha final ?? não vem mais nada depois ... IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Link to comment Share on other sites More sharing options...
rcristianofaria Posted December 17, 2012 Author Report Share Posted December 17, 2012 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! Link to comment Share on other sites More sharing options...
HappyHippyHippo Posted December 17, 2012 Report Share Posted December 17, 2012 diz o url onde se pode ver isso, porque de outro módo é muito complicado IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Link to comment Share on other sites More sharing options...
rcristianofaria Posted December 17, 2012 Author Report Share Posted December 17, 2012 http://freeacxes.host56.com/ ve aqui! Link to comment Share on other sites More sharing options...
HappyHippyHippo Posted December 17, 2012 Report Share Posted December 17, 2012 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 Portugol Plus Link to comment Share on other sites More sharing options...
rcristianofaria Posted December 17, 2012 Author Report Share Posted December 17, 2012 Fiz o que me disseste! Só que nao ficou da forma pretendida! (vê o link: http://freeacxes.host56.com/) Link to comment Share on other sites More sharing options...
HappyHippyHippo Posted December 17, 2012 Report Share Posted December 17, 2012 não fizeste não ... olha bem para o que eu escrevi e para o que tu tens IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Link to comment Share on other sites More sharing options...
rcristianofaria Posted December 18, 2012 Author Report Share Posted December 18, 2012 Obrigado... o erro foi meu, Desculpa Ajudaste-me imenso! Obrigado 🙂 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now