Alguém consegue fazer esse 'desenho'

[rcdesign 1]

Com Tabelas

[andre.gadonski 0]

Facil de fazer..... ué mas porque você quer saber?

[pa_bruno 0]

jah tentou fazê-lo? http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif naum tem mistério nenhum... ;)

[boiler 0]

Pra mim o grande problema desse layout é que ele é líquido, em porcentagem. Tentei fazer um layout líquido com css uma vez e desiti.Se alguém tiver alguma dica pra dar sobre o assunto eu agradeço.

[rcdesign 1]

Pois é boiler, essa é uma das dificuldades desse layout. Já tentei fazer sim bruno, mas como ele tem os cantos arredondados e as linhas divisórias, não consegui fazer..André, porquê esse desenho faz parte do layout do site. Como estou fazendo em CSS não queria deixar uma parte com tabelas, além disso, essa parte do conteúdo com tabelas está 'detonando' meu layout.

[rcdesign 1]

bruno, valeu pelos links sobre os cantos arredondados..alguém pode me dar uma dica de como eu faço as linhas divisórias dos textos?

[pa_bruno 0]

<hr />??? http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[rcdesign 1]

não bruno.. com hr não dá.. já testei.. estou fazendo assim:*com os cantos arredondados, inclusive:

<div id="round">  <span class="rtop">   <span class="r1"></span>   <span class="r2"></span>   <span class="r3"></span>   <span class="r4"></span>  </span>  <div id="areas">  <div class="areaUm"><img src="img/icone.gif" width="12" height="14" /> <?= $r1[1] ?></div><br />  <div class="linha1"><div style="width: 350px; height: 2px; font-size: 1px;"></div></div>  <p><?= $r1[2] ?></p>  <div class="linha2"><div style="width: 80%; height: 2px; font-size: 1px;"></div></div>  <p><img src="img/icone.gif" width="12" height="14" /> <?= $r2[1] ?></p>  <p><?= $r2[2] ?></p>  <p><img src="img/icone.gif" width="12" height="14" /> <?= $r3[1] ?></p>  <p><?= $r3[2] ?></p>  </div>  <span class="rbottom">   <span class="r4"></span>   <span class="r3"></span>   <span class="r2"></span>   <span class="r1"></span>  </span></div>

e no CSS

div#round { width:95%; text-align:left; margin:10px auto 10px;/* centraliza a caixa de texto - segunda parte */ padding:0;}div#round h5 { font-size:120%; font-weight:400; background:#FFFFFF; margin:0; padding:10px;}div#round p { font-size:100%; font-weight:400; background:#FFFFFF; margin:0; padding:10px;}span.rtop, span.rbottom { display:block;}span.rtop span, span.rbottom span { display:block; height:1px; overflow:hidden; background:#FFFFFF;}span.r1 { margin:0 5px;}span.r2 { margin:0 3px;}span.r3 { margin:0 2px;}span.rtop span.r4, span.rbottom span.r4 { margin:0 1px; height:2px;}#areas { font-size:100%; background:#FFFFFF; margin:0; padding:10px; }.areaUm {}.linha1 div { background-color: #fadf27; margin-left: 20px; margin-top: -10px;}.linha2 div { background-color: #000000; }

Só que eu ainda estou com um problema nesse código porquê a div areas que eu coloquei entre os spams para incluir o conteúdo as bordas inferiores, no IE simplesmente somem.

[pa_bruno 0]

a linha divisoria eh a vertical neh? se for eu confundi com as horizontais... ;)

 

mas mesmo assim dah pra fazer com <hr /> sim... eh soh colocar a tag no xhtml e colocar no css:

hr {	height: 200px;	width: 2px;}

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

[rcdesign 1]

na verdade bruno eu tenho ambas as linhas no layout.. vertical e horizontal...rsss.

 

eu inseri na informação do hr no css uma cor, mas essa cor não aparece no FF...

 

hr {height: 2px;width: 200px;color: #fadf27;}

de qqr forma do jeito que eu fiz está funcionando melhor para o layout...

div#round {	width:95%;	text-align:left;	margin:10px auto 10px;/* centraliza a caixa de texto - segunda parte */	padding:0;}div#round p {	font-size:100%;	font-weight:400;	background:#FFFFFF;	margin:0;	padding:10px;}span.rtop, span.rbottom {	display:block;}span.rtop span, span.rbottom span {	display:block;	height:1px;	overflow:hidden;	background:#FFFFFF;}span.r1 {	margin:0 5px;}span.r2 {	margin:0 3px;}span.r3 {	margin:0 2px;}span.rtop span.r4, span.rbottom span.r4 {	margin:0 1px;	height:2px;}#areas {	font-size:100%;	background:#FFFFFF;	margin:0;	padding:10px;	}.linha1 div {	background-color: #fadf27;	margin-left: 20px;	margin-top: -10px;}.linha2 div {	background-color: #000000;	margin: 0 30px 0 30px;}

<div id="round">  <span class="rtop"> 	 <span class="r1"></span> 	 <span class="r2"></span> 	 <span class="r3"></span> 	 <span class="r4"></span>  </span>  <div id="areas">  <p><img src="img/icone.gif" width="12" height="14" /> <?= $r1[1] ?></p>  <div class="linha1"><div style="width: 80%; height: 2px; font-size: 1px; "></div></div>  <p><?= $r1[2] ?></p>  <div class="linha2"><div style="width: 90%; height: 2px; font-size: 1px;"></div></div>  <p><img src="img/icone.gif" width="12" height="14" /> <?= $r2[1] ?></p>  <div class="linha1"><div style="width: 80%; height: 2px; font-size: 1px; "></div></div>  <p><?= $r2[2] ?></p>  <div class="linha2"><div style="width: 90%; height: 2px; font-size: 1px;"></div></div>  <p><img src="img/icone.gif" width="12" height="14" /> <?= $r3[1] ?></p>  <div class="linha1"><div style="width: 80%; height: 2px; font-size: 1px; "></div></div>  <p><?= $r3[2] ?></p>  <div class="linha2"><div style="width: 90%; height: 2px; font-size: 1px;"></div></div>  </div>  <span class="rbottom"> 	 <span class="r4"></span> 	 <span class="r3"></span> 	 <span class="r2"></span> 	 <span class="r1"></span>  </span></div>

 

bruno, você não imagina o qto está me ajudando.... http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

[pa_bruno 0]

uma pequena mudança no codigo css da <hr>:

hr {height: 2px;width: 200px;background-color: #fadf27;}

utilize background-color... essa eh a maneira certa... ;)

 

relax rapaz... estamos ae pra isso... no q eu puder ajudar, tendo tempo, faço o possível... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[boiler 0]

rcdesign, da uma conferida nesse link. É um ótimo exeplo de como fazer cantos arredondados em layouts flexivel.

Alias, a dica vai pra todo mundo.

O artigo que explica tudo é esse aqui.

Abraço.

[rcdesign 1]

ok boiler, obrigado.. a primeira vista não entendi nada... :wacko: vou ler com carinho e depois comento se deu certo.... :P

[rcdesign 1]

boiler, apesar de interessantes o box com cantos arredondados transparentes do artigo não funciona no IE... pelo menos aqui não deu certo não.

 

O código que eu estava usando funciona se colocar um hack para o IE, mas...

 

estou fazendo layout com 4 div´s e agora um pouco diferente da imagem que coloquei no primeiro post, que por sinal já atualizei: três em linha (uma embaixo da outra) e a quarta ao lado dessas três outras.. pra simplificar... são duas colunas, sendo que a primeira coluna tem três linhas.

Os 4 div's têm conteúdo dinâmico, ou seja o texto pode (e vai) ser alterado, mudando o tamanho/altura das div´s, principalmente das 3 'linhas' é claro, aí esse código dá pau.... http://forum.imasters.com.br/public/style_emoticons/default/sick.gif

[pa_bruno 0]

na segunda parte do artigo q to escrevendo eu estou fazendo um layout liquido com cantos arredondados mais detalhado, talvez te ajude... ;)

[rcdesign 1]

legal bruno... tem previsão pra terminar o artigo??? http://forum.imasters.com.br/public/style_emoticons/default/blush.gif

[pa_bruno 0]

primeira parte tah pronta no papel... falta passar pro micro... a segunda to terminando... Espero colocar até quarta a primeira parte... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[rcdesign 1]

Espero colocar até quarta a primeira parte...

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif estaremos anciosamente aguardando... :D

[pa_bruno 0]

ihhhhhh... oh a pressão psicologica... http://forum.imasters.com.br/public/style_emoticons/default/ermm.gif auhuahuahuauuha... zuera... vamos lah... dps vcs digam o q acharam... http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[rcdesign 1]

sem nenhum tipo de pressão: onde você vai publicar o artigo? aqui no fórum ou direto no site? http://forum.imasters.com.br/public/style_emoticons/default/grin.gif