Alternar cor do fundo da LI

[Fabio_Lazaro 0]

Olá pessoal. Agradeço àqueles que me ajudam aqui. Por isso, venho de novo encher a paciência de vocês. XDÉ o seguinte:Não estou mais usando tabelas, e sim, DIVs.#geral#topo#banner#conteudo #colunaesquerda #menu #colunadireita #conteudo#rodapeOk, acho que quem conhece, entenderá o que eu faço.Beleza... minha DIV #colunaesquerda tem 580px, e eu fiz uma div chamada #conteudo dentro dela, com 570px, tendo 5px de margem pra cada lado. Dentro da #conteudo, quis criar uma div chamada #planos, também com 570px. Dentro de planos, em uma página eu criei 4 DIVs de 142px. Aí começou meu problema... Elas não centralizam na #planos. Ficam à esquerda, por causa do float:right;Mas também eu não quero que centralize... Quero que tenha 570px.Então, fui eu no meu estilos.css e escrevi:#inicialtable {width:570px;}#inicialtable ul {list-style:none; display:inline;}#inicialtable li {display:block; border:#C5D1DE solid 1px; margin:1px; background-color:#F1F5FA}Criei na minha página inicial uma tabela de 4 colunas e 1 linha, que ficou assim:<table id="inicialtable"><tr><td><ul><li>Texto</li><li>Texto</li><li>Texto</li><li>Texto</li><li>Texto</li><li>Texto</li><li>Texto</li><li>Texto</li><li>Texto</li></ul></td><td><ul><li>Texto</li><li>Texto</li><li>Texto</li><li>Texto</li><li>Texto</li><li>Texto</li><li>Texto</li><li>Texto</li><li>Texto</li></ul></td><td><ul><li>Texto</li><li>Texto</li><li>Texto</li><li>Texto</li><li>Texto</li><li>Texto</li><li>Texto</li><li>Texto</li><li>Texto</li></ul></td><td><ul><li>Texto</li><li>Texto</li><li>Texto</li><li>Texto</li><li>Texto</li><li>Texto</li><li>Texto</li><li>Texto</li><li>Texto</li></ul></td></tr></table>O que eu quero saber? 2 coisas:Primeira:Minha tabela está correta e eu posso usar tabela pra esse tipo de dado?Segunda:Eu queria que a primeira linha da minha lista, fosse cinza claro, ou que alternassem as cores de funda da lista, como senda: Uma linha branca, outra de outra cor.Desculpem o post e grande e obrigado.

[Poe 0]

Você está com a idéia errada do tableless encasquetada na cabeça, coisa super normal.

 

Aqui neste fórum você tem um monte de referências sobre esse tipo de erro comum (mal entendido seria um termo melhor).

 

Utilizar os padrões significa que você vai usar as tags HTML para o que elas foram feitas realmente (o tal do bicho da semântica que vivem falando por aí).

 

Em resumo, respondendo o seu post, se você está usando de dados tabulares as tabelas são sempre aplicáveis, mas você tem que ver também diferenças entre tabelas e lista de definição, às vezes uma coisa que você acham que é tabela é uma definition list (e vice-versa).

 

Veja os tópicos fixos:

[*]Artigos iMaster, vejam antes de postarem

[*] CSS Link Collection, Links de Aprendizado

[*]Dúvidas Frequentes

E respondendo a sua pergunta, quando você quiser mexer na cor de qualquer elemento HTML, é só usar a propriedade background:, dá uma estudadinha, tem ótimos tutoriais no site do Maujor.

[Fabio_Lazaro 0]

hahahaha... Já li muitos posts seus, Poe. Você tem me ajudado bastante.Já estou sabendo sobre as tabelas... É que antes eu fatiava meus layouts no Photoshop e deixava tudo em tabela... Depois que eu li os seus posts, e muitos outros, entendi que as tabelas são corretas, mas são pra dados tabulares, como uma comparação de planos de hospedagem, como quero fazer. Agora... Layout em tabela, nunca mais. Tudo em div.Mas de qualquer maneira, o saber não ocupa espaço e eu vou ler mais sobre. Quanto ao meu problema, eu não entendi direito a sua resposta...Olha só.#inicialtable {width:570px;}#inicialtable ul {list-style:none; display:inline;}#inicialtable li {display:block; border:#C5D1DE solid 1px; margin:1px; background-color:#F1F5FA}No #inicialtable li já há uma cor de fundo, que é F1F5FA, né? Eu queria que a primeira linha da minha lista fosse dessa cor e a segunda, diferente... Mas não com hover... No normal, mesmo.Poderia me dar um exemplo?Muito obrigado pela sua atenção!

[Poe 0]

Opa!

 

Bom que você está aprendendo, cara.

 

Quando eu me embrenhei por esses meios lá em 2004, não tinha quase referência nenhuma em português (eu disse quase, porque o site do Maujor e o Tableless estavam lá já) e sei que a escalada é bem diferente, já que os conceitos de webstandard batem de frente com o que a gente pensa sobre design de web antes do CSS ser aceito pela maioria dos navegadores (eu sou velhaco em web, na minha época CSS rodava mais ou menos no IE e o navegador "alternativo" era o Netscape - ele não aceitava a maior parte do CSS e o W3C discutia a sua padronização).

 

O negócio é o seguinte:

 

Você vai colocar um background na sua UL, já que toda a sua lista não ordenada terá uma cor base.

 

A seguir, faça uma classe e aplique intercalando entre os itens.

 

<ul id="lista">
<li>linha 1</li>
<li class="outracor">linha 2</li>
<li>linha 3</li>
<li class="outracor">linha 4</li>
</ul>

 

#lista {	 width: 570px;	 list-style: none; 	 margin: 0;	 padding: 0;	 display: inline;}#lista li {	 display:block; 	 border: #C5D1DE solid 1px; 	 margin: 1px; 	 background: #F1F5FA	 color: #000000; /* sempre coloque a cor da fonte quando definir um background, senão o CSS não será válido */}#lista .outracor {	 background: #CCCCCC;	 color: #000000; /* sempre coloque a cor da fonte quando definir um background, senão o CSS não será válido */}

E lembre-se de não usar aquela tabela lá. ;)

 

Aliás, dica de quem sofreu com isso uma vez: você não precisa fazer um monte de divs, às vezes, tratando a sua UL com um display:block somado a um float:left você consegue o mesmo efeito que teria com uma div, economizando assim código e fazendo a coisa do "jeito certo".

 

Abraço.

[Fabio_Lazaro 0]

Deu certo, Poe!Fiz como disse, mas com 4 DIVs... Aquele esquema de dar um block e float no UL deu certo não. Porque um ficou abaixo do outro.Então, eu fiz 4 de 142px, dando 568px total. Como não consegui deixar sobrando 1 px em cada lado, eu peguei o div pai de 570px e dei um padding:1px. Aí ajustou direitinho.Obrigado mais uma vez, Poe.Abraços.

[Poe 0]

Pergunta que tá coçando aqui: Pra quê você vai usar essa estrutura? Sabendo isso eu posso continuar te dando uns toques, mas é preciso saber o que você está querendo fazer pra te mostrar o certo! :) Abraço.

[.:: Pegasus ::. 0]

Pergunta que tá coçando aqui: Pra quê você vai usar essa estrutura? Sabendo isso eu posso continuar te dando uns toques, mas é preciso saber o que você está querendo fazer pra te mostrar o certo! :) Abraço.

Também não tentei responder a pergunta dele porque não sabia o que ele queria fazer.. rs..Poe.. tem algum tutorial ensinando sobre esse "display block" que você citou, pois eu fazia do mesmo modo que o Fabio. e quando fiz em divs, diz uma pra cada parte.

[Fabio_Lazaro 0]

Sem problema algum. Estou desenvolvendo site do Hosting onde eu trabalho, e no topo da página tem uma div de 570px onde eu quero dividir em 4 partes pra resumir características de 4 planos. Acontece que não está alinhando... Se são 570, tenho que fazer 4 de 142. Mas as 4 não ficam no centro... Sempre sobra pixels no lado esquerdo do meu DIV de 570px.Achei que tinha dado certo, mas se eu jogo um padding de 1 px no meu DIV de 570px, ele aumenta a estrutura ao invés de ajustar.É meu primeiro site em tableles... Se quiser confeir, fique à vontade./* Edit */

[Poe 0]

Fabio_Lazaro, o seu problema é com aquela tabela onde você explica os planos? Se é, amigo, lá é dado tabular, portando, é tabela.

 

A sua estrutura será de tabelas mesmo:

 

<table>
<tr>
<th>Plano</th>
<td>Net Empresas</th>
<td>Web Empresas</th>
<td>Mega Empresas</th>
<td>ASP Básico</th>
<tr>
<th>E-mails disponíveis</th>
<td>10 E-mails POP</td>
<td>30 E-mails POP</td>
<td>30 E-mails POP</td>
<td>30 E-mails POP</td>
</tr>
...
</table>

 

E no seu código você vai colocar um table th {display: none;}, para não exibir o TH porque o seu layout não pede isso, porém, em matéria de acessibilidade e formatação da tabela, o correto é sempre entitular as coisas. Dá uma olhada com calma nos links que te passei, leia, aprenda, sei que é f***, mas você vai pensar complementa diferente depois.

 

Vou montar a resolução desse problema com os floats e displays e afins em forma de tutorial, vejo que é um problema recorrente, que não é tratado com calma.

 

Assim que estiver pronto (acho que até semana que vem, porque o trampo está hard) posto aqui. O lugar já até existe. rs

 

Até.

[Fabio_Lazaro 0]

Se eu diminuo meu DIV de 570 pra 568, ele quebra... Por isso quis usar as tabelas.Aguardo seu tutorial. (Vou editar e retirar o URL, ok?)Obrigado e Abraços.

[Poe 0]

Mas o que você está fazendo é tabela. :) Dá uma procurada no Google sobre dados tabulares. No site do Maujor tem informação que vai te esclarecer isso! :D Abraço!