Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

nettotma14

Simular tables com <li>

Por , em Desenvolvimento frontend

Recommended Posts

nettotma14    0

nettotma14
Postado

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

 

Imagem Postada

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

nettotma14    0

nettotma14
Postado

É que com tabela eu nao vou conseguir o mesmo efeito.E ela nao chega a ser um dado tabular, sao apenas 4 linhas

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

nettotma14    0

nettotma14
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

nettotma14    0

nettotma14
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

nettotma14    0

nettotma14
Postado

É 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"><html xmlns="http://www.w3.org/1999/xhtml"><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;	}</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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

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/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">

<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é?)

Compartilhar este post

Link para o post
Compartilhar em outros sites

nettotma14    0

nettotma14
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Aqui é a área de Webstandards, logo estaremos sempre resolvendo a coisa de acordo com os Webstandards[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito