Ir para o conteúdo
Knitter

Como dispor uma lista não ordenada na horizontal?

Mensagens Recomendadas

Knitter    101
Knitter

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?

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Knitter    101
Knitter

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>

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
djthyrax    11
djthyrax

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; } ;)

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Knitter    101
Knitter
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 ;)

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
marinheiro    0
marinheiro

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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Knitter    101
Knitter

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.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Knitter    101
Knitter

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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
Knitter    101
Knitter

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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
marinheiro    0
marinheiro

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

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
jreis    0
jreis

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

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


×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade