Lista

[Fernando Henrique de Souza 0]

Olá pessoal gostaria que me ajudassem a fazer a marcação para a lista ficar deste jeito, se alguem puder me ajudar

agradeço!!!

[Diéssica 140]

Eu utilizaria ul li, já que se tratam de listas não ordenadas.

 

O CSS seria BASICAMENTE isso:

ul {
list-style:none;
}
ul li {
display:inline; /* ou float left */
color:#fff;
font:13px NOME DA FONTE; /* tamanho depende da tipografia, mas sugiro 13px */
}

:seta: http://www.w3.org/TR/html401/struct/lists.html

 

Quanto ao uso do display:inline no ul ou no ul li, depende da organização da lista.

 

:bye:

[Mateus Avila Isidoro 8]

É um pouco mais complexo do que acima. Eu sei que a Diéssica vai postar uma solução com menos linhas logo em seguida, mas como eu sou um provocador, eu vou fazer umas marcações um pouco diferentes.

 

se tu verificar, são 6 áreas com 12 listas (1 área + 2 linhas). Para isso, basta fazer uso de divs para áreas e as listas normalmente. Pelo jeito, deve ser algum rodapé.

 

<div class="panelList">
  <ul>
   <li><a href="#meuLink">Cidade</a></li>
   <li><a href="#meuLink">Cidade</a></li>
   <li><a href="#meuLink">Cidade</a></li>
   <li><a href="#meuLink">Cidade</a></li>
   <li><a href="#meuLink">Cidade</a></li>
 </ul>
  <ul>
   <li><a href="#meuLink">Cidade</a></li>
   <li><a href="#meuLink">Cidade</a></li>
   <li><a href="#meuLink">Cidade</a></li>
   <li><a href="#meuLink">Cidade</a></li>
   <li><a href="#meuLink">Cidade</a></li>
 </ul>
</div>

 

e o css dele eu faria da seguinte forma:

 

.panelList{float:left;margin:5px;width:120px}
.panelList ul{margin:0 0 20px 0;width:100%}
.panelList ul li a{color:#fff;font:13px;font-family:"Arial"}

 

PS: eu poderia substituir o código acima por HTML5, e ficaria da seguinte forma:

<footer>
<nav class="panelList">
  <ul>
   <li><a href="#meuLink">Cidade</a></li>
   <li><a href="#meuLink">Cidade</a></li>
   <li><a href="#meuLink">Cidade</a></li>
   <li><a href="#meuLink">Cidade</a></li>
   <li><a href="#meuLink">Cidade</a></li>
 </ul>
  <ul>
   <li><a href="#meuLink">Cidade</a></li>
   <li><a href="#meuLink">Cidade</a></li>
   <li><a href="#meuLink">Cidade</a></li>
   <li><a href="#meuLink">Cidade</a></li>
   <li><a href="#meuLink">Cidade</a></li>
 </ul>
</nav>
</footer>

 

e o código ficaria da seguinte forma

 

footer nav.panelList{float:left;margin:5px;width:120px;}
footer nav.panelList ul{margin:0 0 20px 0;width:100%;}
footer nav.panelList ul li a{color:#fff;font:13px;font-family:"Arial"}

[Giovani 104]

Acho mais prático dessa forma:

<div id="sua-div">
	<ul>
		<li><strong>Estado 01</strong></li>
		<li><a href="http://">Cidade 01</a></li>
		<li><a href="http://">Cidade 02</a></li>
		<li><a href="http://">Cidade 0n</a></li>
	</ul>
	<ul>
		<li><strong>Estado 02</strong></li>
		<li><a href="http://">Cidade 01</a></li>
		<li><a href="http://">Cidade 02</a></li>
		<li><a href="http://">Cidade 0n</a></li>
	</ul>
	<ul>
		<li><strong>Estado 03</strong></li>
		<li><a href="http://">Cidade 01</a></li>
		<li><a href="http://">Cidade 02</a></li>
		<li><a href="http://">Cidade 0n</a></li>
	</ul>
</div>

 

E isso:

#sua-div ul{
float: left;
margin-right: 15px;
width: 150px;
}

 

Depois é só aplicar os estilos nos links e pronto :thumbsup:

[Mateus Avila Isidoro 8]

oi Giovani

 

O teu código funcionou, mas seria melhor se ele fosse setado para classes, e não por ID. Eu sinto a diferença no momento que eu colo esse código em outra página.

[Giovani 104]

Não entendi bem o que você quis dizer Mateus?

O id é só da div pai, o que vai repetir são os ul's :thumbsup:

[FK. 0]

Quero aproveitar o assunto deste tópico e postar algo meu.

Bom, no layout, tem uma lista que está basicamente assim:

 

Título da lista

• Item 1 ------ • Item 5

• Item 2 ------ • Item 6

• Item 3 ------ • Item 7

• Item 4 ------ • Item 8

 

Então, eu vejo isso, como apenas uma lista, então marquei assim:

 

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
   <li>Item 5</li>
   <li>Item 6</li>
   <li>Item 7</li>
   <li>Item 8</li>
</ul>

 

Mas não consigo fazer ela ficar da forma que citei, ela só fica toda listada para a esquerda, e eu não queria criar outra lista(Alterar marcação) para poder dar um float left e right entre as duas. Tentei usar float, position, mas afetou bastante a formatação.

 

---

 

Outra coisa, se eu tenho duas divs, e eu quero que a div que está logo a baixo fique do lado direito da tela, então eu do float right nessa div abaixo. Mas se eu não dar float left no elemento que está acima, elas não ficam alinhadas. Eu dar float left na div acima e float right na div abaixo é errado ?

 

Vlw !!

[Mateus Avila Isidoro 8]

Olá

 

O uso de ID não é recomendado para estilo. Tu pode fazer, vai funcionar. Mas tu tem o problema da reusabilidade: não pode repetir uma id duas vezes numa página. E se quiser colar esse código em outra página usando Id, pode surgir problemas. Com class tu pode repetir quantas vezes necessário.

 

 

Fernando Kracheski:

 

tenta isso:

ul li a{display:block}

[Giovani 104]

Id's são únicos e isso não quer dizer que você não possa usar, caso contrário somente classes seriam usadas pra construir sites.

O uso de ID não é recomendado para estilo.

 

Qual o problema de termos uma estrutura como esta:

<div id="geral">

<div id="topo"> ... </div>

<div id="conteudo">

	<div id="menu"> ... </div>

	<div id="interna"> ... </div>

</div>

<div id="rodape"> ... </div>

</div>

 

As div's não irão se repetir, até por que não faria sentido.

Aquele seu menu se encaixa perfeitamente nesse exemplo ... e em vários outros :thumbsup:

[Mateus Avila Isidoro 8]

estrutura é uma coisa, mas eu usaria uma estrutura como essa:

 

<div id="geral" class="geral">
       <header> ... </header>
       <section>
               <nav> ... </nav>
               <article> ... </article>
       </section>
       <footer> ... </footer>
</div>

 

Pode parecer tolice, mas a escolha dos meus códigos tem algumas vantagens pelo HTML5. Vamos lá

 

1) O código fica semântico - é mais fácil se achar no código html.

2) É melhor otimizado para as buscas do google - SEO hoje não é apenas meta-tags.

3) Uso de classes faz com que o teu código possa ser repetido em vários projetos. No meu exemplo, eu me expressei mal: eu recomendo o uso de classes para estilizar códigos como plugins, e id para acessar no javascript.

4) O código html5 é mais internacional, podendo dar suporte em qualquer lugar do globo.

5) É possivel incluir o html5 no ie, bastando usar a função createElement() do javascript e no css aplicar um display:block; (tem até plugin jquery pronto pra usar nas páginas).

 

Acho que é isso.

[FK. 0]

 

Fernando Kracheski:

 

tenta isso:

ul li a{display:block}

 

Então, já tinha tentado isso antes, e nem funciona não. A única alteração é que o list-style-image desaparece. Mas por padrão, uma lista já não é display block ?

 

Obs: Minha lista não tem elementos a dentro, é apenas listagem com texto, mas acredito que isso não influencia nesse caso.

 

Mas você entendeu o que eu quero fazer ? Eu quero fazer da forma que eu citei que está no layout, ou seja, vai até o item 4 e depois quebra pra outra "coluna" a direita. No entanto, por padrão a listagem vem uma abaixo da outra, igual a marcação. Eu quero usar a marcação padrão que citei e fazer a formatação que está no layout.

[Mateus Avila Isidoro 8]

Então, já tinha tentado isso antes, e nem funciona não. A única alteração é que o list-style-image desaparece. Mas por padrão, uma lista já não é display block ?

 

Obs: Minha lista não tem elementos a dentro, é apenas listagem com texto, mas acredito que isso não influencia nesse caso.

 

Mas você entendeu o que eu quero fazer ? Eu quero fazer da forma que eu citei que está no layout, ou seja, vai até o item 4 e depois quebra pra outra "coluna" a direita. No entanto, por padrão a listagem vem uma abaixo da outra, igual a marcação.

 

Tenta display:block;width:100%

[Giovani 104]

Mateus, a "nossa" questão aqui é sobre id's e classes, que também vale pra estrutura html que você passou, não é por que usa-se id que deixará de ser semântico ou deixará de aparecer no google ou que deixará de ser reaproveitado. E sobre html5, uso o boilerplate, acho muito mais prático.

 

Mas importante é resolver o "problema" com a lista do post #1. Tem um link do que você já fez?

[Mateus Avila Isidoro 8]

se tu usa boilertemplate, por que retornou ali em cima um código em html4?

[FK. 0]

Tenta display:block;width:100%

 

Não da, acho que a única forma, que inclusive já tentei, seria marcar a lista com classes, como por exemplo, marcar do item 5 em diante, e dar um float right nessa classe para movimentar esses últimos 4 itens, no entanto, deu um monte de problema com a formatação.

[Mateus Avila Isidoro 8]

cola o html ai. Não faz sentido.

[Giovani 104]

Não é boilertemplate, é Boilerplate :thumbsup:

se tu usa boilertemplate, por que retornou ali em cima um código em html4?

Sem contar o fato de que fiz na mão, aqui no editor do post, estamos numa área onde muitas pessoas nem conhecem html ... imagina o html5.

Fica muito mais prático explicar pra quem não conhece.

 

Fernando, se tiver um link fica mais prático pro pessoal tentar ajudar. Pra ajudar, leia esse tópico:Como criar um tópico para o seu problema

[FK. 0]

<div id="summaryOfServices">
   <h2>Summary of Services:</h2>
   <ul>
       <li>Web Design (XHTML / CSS)</li>
       <li>Search Engine Optimisation</li>
       <li>Content Mangement Systems</li>
       <li>Media and Advertising</li>
       <li>Dynamic Javascript Solutions</li>
       <li>MySQL Hosting</li>
       <li>Site support and Hosting</li>
       <li>Illustration</li>
   </ul>
</div>

 

Tá vendo os 4 primeiros itens ?

Eles devem ficar a esquerda, e os últimos 4 itens, devem ficar a direita. Seria ótimo criar duas listas, ficaria muito fácil, muito mesmo, mas nesse caso estou alterando a marcação, e deixando ela sem sentido, irá parecer que tem duas listas, o que na verdade deveria ter apenas uma.

 

Olha:

 

 

---

 

Foi mal estar postando um monte, o que na verdade seria bom um novo tópico, mas é que queria aproveitar o assunto deste tópico, já que fala sobre listas.

[Mateus Avila Isidoro 8]

ul li{display:block;width:120px;float:left;margin:5px}

 

Na tua lista não tem hiperlink. Se ela tiver, o a irá ser necessário no código acima.

[FK. 0]

Esse código vai afetar todos os elementos da lista, deixando todos flutuando a esquerda, já que, coloquei float left, testei aqui, e logicamente, não deu.

 

É apenas uma listagem, sem links, não precisa do a mesmo.