transformar tabela em lista

[fzero 0]

estou reformulando um site q possui uma tabela para a sigla da empresa:

<table align="center">	<tr>	  <td class="L1">T</td> 	  <td class="L2">este testeteste testeteste </td>	</tr>	<tr>	  <td class="L1">T</td> 	  <td class="L2">este testeteste teste</td>	</tr>	<tr>	  <td class="L1">T</td> 	  <td class="L2">este.</td>	</tr>	<tr>	  <td class="L1">T</td> 	  <td class="L2">este testeteste testeteste </td>	</tr>	<tr>	  <td class="L1">T</td> 	  <td class="L2">este testeteste </td>	</tr>	<tr>	  <td class="L1">T</td> 	  <td class="L2">este testeteste testeteste testeteste .</td>	</tr></table>

transformei isso em lista usando o li, porem a formatacao ficou comprometida.... ja que a primeira celula sempre era um quadro com uma cor de fundo diferente e existia uma borda fixa com um tamanho fixo na linha...

.L1 {	width:14px;	background-color:#F99B00;	border: 1px solid #EF9400; 	padding: 1px 4px;	font-size:18px;	font-weight:bold;	}.L2 {	border: 1px solid #EF9400;	padding: 1px 4px;	margin:3px;	width:370px !important;	width/**/:380px;	font-size:13px;	}

como poderia formatar corretamente a borda e a primeira letra de cada linha ?

[Giovani 104]

você pode explicar melhor o que você quer???Quais serão os dados que vão ali??

[fzero 0]

oi, entao seguinte...essa tabela q existe no site hj e uma sigla de um sistema q a empresa q estou fazendo o site desenvolve...Solução Modular Integrada de Logística EDIem cada linha existem 2 celulas, 1. celula possui a primeira letra e a segunda o restante...nesta primeira celula, a primeira letra da sigla esta com tamanho e fundo diferentes alem de ter uma borda formando um quadrado... a 2. celula tb tem uma bordaqueria fazer a formatacao do fundo da primeira letra, o tamanho dela e tamanho do quadro assim como o do 2. quadro... os quadros devem possuir um tamanho fixo...pensei em usar a lista, mas nao sei se é o ideal... ja q pelo q tentei fazer ele sai desconfigurado... nao interpetra o width q ponho para o li, etc...alguem poderia me dar uma ideia de como fazer isso...

[Giovani 104]

Se forem dados tabulares não tem problema usar tabelas.

Pesquise aqui no fórum CSS table Gallery que você vai achar vários exemplos.

 

[]s http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[fzero 0]

entendi e obrigado gio! pela forca...so a titulo de info...o q estava querendo é saber como fazer em uma mesma linha duas formatacoes diferentes de texto, fundo e tamanho...tentei usar a tag span, e em cada uma delas as formatacoes mas as configuracoes como width e height nao funcionam....sera q estou fazendo algo errado ? tem como fazer isso sem usar divs e float, pois é o unico metodo q conheco q daria pra fazer isso ?

[Giovani 104]

Ai você tem que passar um link pra galera ver http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Guilherme Rambo 4]

Posso dar uma dica, a tag span é uma tag inline, para usar width, height, etc você precisa colocar display:block nela.Mas existem outras tags mais adequadas para enfaze, como a tag <em> e a tag <strong>.Pesquise sobre isso e você verá que é muito facil ;)

[fzero 0]

testei aqui usando o 'em' e 'strong' mas o resultado para configuracao de width e height nao funcionaram tb...em ambas e ate na span se definir o display:block as configuracoes sao aceitas porem ficam em linhas diferentes e o que eu precisava seria na mesma linha....estou montando isso em cima desse codigo:

<p> <span class="L1">S</span> <span class="L2">istema</span></p>...

CSS:

.L1 {	width:14px;	background-color:#F99B00;	border: 1px solid #EF9400; 	padding: 1px 4px;	font-size:18px;	font-weight:bold;	}.L2 {	border: 1px solid #EF9400;	padding: 1px 4px;	margin:3px;	width:370px !important;	width/**/:380px;	font-size:13px;	}

onde o L1 tem width e height de 20 e fundo laranja, e o L2 width de 300 e height de 20, e somente com borda laranja

[Guilherme Rambo 4]

Mas porque você precisa modificar o width e height desse spam, pode me explicar qual sua real necessidade?

[fzero 0]

desculpa gente e que nao tenho como linkar aqui...e q tenho q fazer no site uma definicao de uma sigla q da nome ao sistema da empresa....para isso, tenho q colocar a sigla verticalmente, em cada linha a primeira letra e a sigla e ao lado seu significadoS oluçãoM odularI ntegrada deL ogísticaE DIo assim a primeira letra deve ficar em um quadro laranja de 20 x 20 e o restante num quadro de fundo branco de 300 x 20 com borda laranjahj ele esta em uma tabela com um td para a sigla e outra para o seu significado...

[Guilherme Rambo 4]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><style type="text/css">* { margin:0; padding:0; list-style:none; font-style:normal;}ul li { background:#FFF; width:300px; height:20px; font:12px 'Trebuchet MS', Arial, Helvetica, sans-serif;}ul li em { padding:0 10px; border:1px solid orange;}/****************************a primeira letra deve ficar em um quadro laranja de 20 x 20 e o restante num quadro de fundo branco de 300 x 20 com borda laranja****************************/</style></head><body><ul><li><em>S</em>olução</li><li><em>M</em>odular</li><li><em>I</em>ntegrada de</li><li><em>L</em>ogística</li><li><em>E</em>DI</li></ul></body></html>

É mais ou menos isso, agora é só adaptar pra sua necessidade http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[fzero 0]

ta quase gente...so adaptei algumas coisas q precisava ( 'border' em 'ul li' / e 'background-color' orange no 'ul li em' ) mas ainda continua um problema....o tamanho do quadro q deve ficar com a 1. letra de cada linha (fundo laranja) deve ter o tamanho igual em todos elesse rodar o codigo ai, você vai ver q o M por ex. tem um tamanho maior do q o do I... todos deveriam ficar com o quadro (q esta neste codigo no 'em') com o tamanho identico....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><style type="text/css">* { margin:0; padding:0; list-style:none; font-style:normal;}ul li { background:#FFF; width:300px; height:20px; font:12px 'Trebuchet MS', Arial, Helvetica, sans-serif;<strong class='bbc'> border:1px solid orange;  /* incluido */</strong>}ul li em { padding:0 10px; border:1px solid orange; <strong class='bbc'>background-color:orange;   /* incluido */ width:20px; /* preciso q todos fiquem com o width igual mesmo colocando 20 px nao esta funcionando */</strong>}/****************************a primeira letra deve ficar em um quadro laranja de 20 x 20 e o restante num quadro de fundo branco de 300 x 20 com borda laranja****************************/</style></head><body><ul><li><em>S</em>olução</li><li><em>M</em>odular</li><li><em>I</em>ntegrada de</li><li><em>L</em>ogística</li><li><em>E</em>DI</li></ul></body></html>

É mais ou menos isso, agora é só adaptar pra sua necessidade http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Guilherme Rambo 4]

Substitua o css por este:

* { margin:0; padding:0; list-style:none; font-style:normal;}ul li { background:#FFF; width:300px; height:20px; font:12px 'Trebuchet MS', Arial, Helvetica, sans-serif; display:table;}ul li em { width:20px; display:block; float:left; border:1px solid orange; text-align:center; background-color:orange; /* incluido */}

[fzero 0]

fmz... deu certo.... perfeitovaleu inside ficou perfeito e nao ficou complicado....o 'li' fica com display table e o 'em' com block e float:left....valeu pela forca, devo ter dado muito trabalho pra vcs mas valeu pelo forca