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

Knitter

Como dispor uma lista não ordenada na horizontal?

20 mensagens neste tópico

Boas,

Queria criar um menu de navegação horizontal usando listas não ordenadas. Tenho um exemplo de um CSS com o que pretendo mas não percebo bem como é que  o efeito está conseguido. No html a div de navegação tem o nome de mainlevel-nav, mas essa regra não aparece em lado nenhum do CSS, existe uma classe mainlevel mas não uma mainlevel-nav.

Já fiz pesquisas e encontrei várias formas de fazer os menus, embora sejam quase todas para menus drop-down e eu não tenho esse tipo de menus.

De uma forma simples como é que faço um menu na horizontal?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Sinceramente, não sei. Podes fornecer esse tal exemplo? Deixaste-me curioso...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Fica em anexo o css, e aqui deixo o código do menu:

<div id="tabbar">
            <ul id="mainlevel-nav">
              <li><a href="#" class="mainlevel-nav" >Início</a></li>
              <li><a href="automoveis.html" class="mainlevel-nav" >Automóveis</a></li>
              <li><a href="pecas.html" class="mainlevel-nav" >Peças</a></li>
              <li><a href="galeria.php" class="mainlevel-nav" >Galeria</a></li>
              <li><a href="empresa.html" class="mainlevel-nav" >A Empresa</a></li>
            </ul>
          </div>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

basta criares uma regra no css para o mainlevel-nav, já que não existe, e colocares lá display: inline

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

basta criares uma regra no css para o mainlevel-nav, já que não existe, e colocares lá display: inline

Exacto. ul#mainlevel-nav { display:inline; } ;)
0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
basta criares uma regra no css para o mainlevel-nav, já que não existe, e colocares lá display: inline

Talvez não me tenha feito entender... essa regra não existe mas o menu está a funcionar, como disse, é um exemplo que tenho, é de outro site e tem o menu a funcionar.

O que eu queria era uma forma simples de colocar o menu na horizontal. Coisas mais complicadas encontro algumas mas não explicam bem o forma de fazer, e preciso compreender o ideia para poder depois evoluir.

Inline? vou ver o que consigo fazer com isso ;)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

com o inline não tens nenhumas complicações... as unicas configurações que necessitas é no css do ul colocar o list-style: none e o no do li colocar display: inline...

EDIT: corrigido... o inline tem de estar no li...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

EDIT: corrigido... o inline tem de estar no li...

? Não tem lógica estar no li, mas sim no ul. :o
0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

li uma, li duas, li três! ganhou o senhor de chapeu vermelho!

Ok, vou experimentar e mexer um pouco nisso, de momento tenho de conseguir criar a estrutura que pretendo, mas assim que a tiver vou começar no menu.

Obrigado.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Também se não der no li, experimentas no ul. Não perdes muito tempo a fazer isso.

Mas tenho a certeza que é no li.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Resolvi o problema da lista na horizontal, funciona com li e a propriedade inline. Mas agora encontrei outro problema.

A imagem que coloquei como fundo dos links aparece cortada, ou melhor, os links não estão a respeitar a largura que indiquei

Screenshot do que digo: http://www.sergio-lopes.org/hyperlinks/x.PNG

excerto do meu CSS:

.mainmenu {
width: 100%;
padding-top: 4px;
height: 25px !important;
height: 29px;
background: url(../sys/imagens/sc_tabbar_bg.png) repeat-x;
/*REMOVE*/background-color: red;
}

/*BEGIN: menus*/
.mainmenu {
background: url(../sys/imagens/sc_tabbar_bg.png);	
}

.mainmenu ul, .mainmenu li {
margin: 0;	
}

.mainmenu li {
list-style: none;
display: inline;
  /*float:left;*/
  height: 25px;
  margin-left: 4px;
}

.mainmenu li a {
/*display:block;*/
display: inline;
  line-height: 25px;
  height: 25px;
  background: url(../sys/imagens/sc_tab_normal.png) no-repeat 0% 100%;
  width: 139px;
  text-align: center;
  text-decoration: none;
}

/*END: menus*/

Esta é a forma como o menu tem de aparecer: http://www.sergio-lopes.org/hyperlinks/bar.PNG

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Experimenta usar o !important. Ex: .blah { width:50px !important; }

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Essa regra é ignorada pelo IE, não é bem a solução que procuro... vou experimentar na mesma, já estou por tudo. O pior é que tenho isso implementado e não consigo perceber a diferença. O problema é que o site actual está uma confusão de tabelas e de lixo html pelo meio que queria remodelar.

Preciso é de manter o mesmo aspecto e funcionalidade...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Consegui!

Tinha um "float: left;" comentado que não devia estar.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

para ficarem todos do mesmo tamanho, tens de ter como display: block, só que assim não fica em linha...

solução que testei e funcionou, de modo a não teres de fazer grandes alterações no teu código:

no css do li a, coloca display: block em vez do inline, de modo a ser considerado o link na totalidade da imagem...

cria uma nova class em que o conteúdo é float:left; e envolve cada li numa div ou num span exactamente com essa classe...

assim, tem de funcionar...

EDIT: sorry, não reparei na 2ª página... realmente, não é necessário o span... basta o float:left no li... mas atenção que o float só é necessário por causa do display:block... se não tivesses o block, não era necessário para nada...

algum moderador que apague esta resposta, please, porque não tem razão de existir...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Pois uma vez que tens os <a> como inline, não podes especificar larguras/alturas. Quer dizer até podes, mas não são assumidos. Se tiveres os <a> como block e width: <xx>px não funciona?? é que assim deveria dar, penso eu...

0

Partilhar esta mensagem


Link 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