Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
EU queria fazer igual a imagem abaixo, ja vi alguns sites fazendo, só que esqueci o endereco...
Ele tem aparecencia de ser tabela, mais na verdade é uma lista...
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.osnysantos.com.br/imagens/exemplo.gif&key=50f0fee1f3980852859495dff45cdc2936b5889dc1e4723d484617646d63f031" alt="Imagem Postada" />
Dados tabulares, qual o problema de usar a própria tabela no caso?Ela formatada corretamente, é totalmente acessível, NESTE CASO.Abraços!
Neste meu caso é mais necessário <li>.
A imagem esta em: http://www.osnysantos.com.br/imagens/exemplo.gif
Valeu galera
É bem nessa mesmo. Se é uma tabela, qual o problema de usar <table></table>? Tem que usar, e vai ficar show! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Dados tabulares, qual o problema de usar a própria tabela no caso?
Não entendi o por que do <li></li>, vai ter muito mais trabalho para fazer.
É que com tabela eu nao vou conseguir o mesmo efeito.E ela nao chega a ser um dado tabular, sao apenas 4 linhas
Efeito? Claro que consegue... é só pensar direitinho na formatação...
Para encerrar a questão.
O "efeito", se for em <li> ou <table>, tanto faz, podem ficar iguais, depende de você.
Olha esse link: CSS Table Gallery, existem muitos modelos de tabelas.
Agora é colocar a mão na massa.
[]´s http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Galera eu estudo os WebStardards a séculos, eu entendo que vocês querem que todos seguem.. inclusive eu.Mais e se eu falasse, EU SO QUERO SABER COMO FAZER? Eu conhegui fazer quase igual ao que tinha visto mais ficou uns bugs...Eu apenas estilizei os <span> dentro dos links exemplo:<ul><li><a href=" "><span>Nome</span></a></li></ul>E dava um float para o <span> e mais alguns ajustes.Se alguem souber de algum site que use isso ou saiba como fazer, por favor, compartilhem.;)
Se você quer apenas saber como faz olha o código de onde você viu isso...Mas ainda considero perda de tempo, usa tabela e deu[]'s
Se você quer apenas saber como faz olha o código de onde você viu isso...Mas ainda considero perda de tempo, usa tabela e deu[]'s
No começo do meu topico eu coloquei que nao lembrava o endereço do site que vi, mais deixa.. voces nao entenderam o motivo da pergunta
Faça-nos entender http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
[]'s
É so criar uma lista com dados flotuando a esquerda fazendo que toda a <li> tenha o link... como na imagem acima.
É isso aqui:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style>#sortable_list { list-style:none; margin:0; padding:0; clear:both; font:11px Arial, Helvetica, sans-serif; }#sortable_list li.header div { background-color:#ccc; font-weight:bold; cursor:default; }#sortable_list li div { display:block; float:left; border-bottom:1px solid #999; border-right:1px solid #999; padding:3px 5px; }#sortable_list li div.listitem_date{ width:150px; border-left:1px solid #999; color:green; }#sortable_list li div.listitem_task{ width:300px; color:blue; }#sortable_list li div.listitem_assigned{ width:250px; color:red; }</style></head><body><ul id="sortable_list"><li id="listitem" class="clearfix header"><div class="listitem_date">Data</div><div class="listitem_task">Ano</div><div class="listitem_assigned">Preço</div></li></ul><ul id="sortable_list"><li id="listitem_1" class="clearfix"><div class="listitem_date">Data</div><div class="listitem_task">Ano</div><div class="listitem_assigned">PReço</div></li></ul><ul id="sortable_list"><li id="listitem_2" class="clearfix"><div class="listitem_date">Data</div><div class="listitem_task">Ano</div><div class="listitem_assigned">PReço</div></li></ul></body></html>
Só que com link em cada <li>http://innovativethought.wordpress.com/200...unordered-list/
Ta ai o link so que o exemplo o testo nao possui links, eu queria um que cada linha tivesse um links
> Só que com link em cada <li>
Oras... Se você quer um link em cada **<li>**, por que não coloca o link em cada **<li>**? [http://forum.imasters.com.br/public/style_emoticons/](http://forum.imasters.com.br/public/style_emoticons/)default/assobiando.gif
A única coisa que você tem que você tem que fazer é adicionar mais uns blocos de formatação no seu CSS e também adicionar as tags **<a>** (que, na minha opinião, é totalmente desnecessário... Você já percebeu o trabalho que é tentar fazer isso que você tá querendo, não é mesmo? Bom, como você mesmo citou que era só para saber, então pronto, já sabe como se faria, né? Agora, meow, use uma tabela aqui e chega...):>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml%22)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
#sortable_list {
list-style:none;
margin:0;
padding:0;
clear:both;
font:11px Arial, Helvetica, sans-serif;
}#sortable_list li.header div {
background-color:#ccc;
font-weight:bold;
cursor:default;
}#sortable_list li div {
display:block;
float:left;
border-bottom:1px solid #999;
border-right:1px solid #999;
padding:3px 5px;
}#sortable_list li div.listitem_date{
width:150px;
border-left:1px solid #999;
color:green;
}#sortable_list li div.listitem_task{
width:300px;
color:blue;
}#sortable_list li div.listitem_assigned{
width:250px;
color:red;
}**/ Veja aqui o que foi adicionado: /**
#sortable_list li div.listitem_date a{
color:green;
}#sortable_list li div.listitem_task a{
color:blue;
}#sortable_list li div.listitem_assigned a{
color:red;
}
</style>
</head>
<body>
<ul id="sortable_list">
<li id="listitem" class="clearfix header">
<div class="listitem_date">Data</div>
<div class="listitem_task">Ano</div>
<div class="listitem_assigned">Preço</div>
</li>
</ul>
<ul id="sortable_list">
<li id="listitem_1" class="clearfix">
<div class="listitem_date">**<a href="#">**Data**</a>**</div>
<div class="listitem_task">**<a href="#">**Ano**</a>**</div>
<div class="listitem_assigned">**<a href="#">**PReço**</a>**</div>
</li>
</ul>
<ul id="sortable_list">
<li id="listitem_2" class="clearfix">
<div class="listitem_date">**<a href="#">**Data**</a>**</div>
<div class="listitem_task">**<a href="#">**Ano**</a>**</div>
<div class="listitem_assigned">**<a href="#">**PReço**</a>**</div>
</li>
</ul>
</body>
</html>Testei e está funcionando direitinho...
Abraço! (E vê se usa uma tabela, hein? Afinal de contas, se é um dado tabular, nada mais correto do que utilizar uma tabela para isso, né?)
nettovocê está descrevendo errado.a tag <li> é uma lista e nao uma linha ou célula.
Deixa quieto galera, valeu a tentativa... só que vocês não deixam nos fazermos uma pergunta se ela nao estiver de acordo com os web standards..Mais da nds , pode fechar o topico;)
Aqui é a área de Webstandards, logo estaremos sempre resolvendo a coisa de acordo com os Webstandards[]'s
so lembrando, a parada que tinha postado era so pra estudo.;)Valeu Eric Meyer
Qual imagem nettotma14?