Ir para conteúdo

POWERED BY:

Arquivado

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

Fleury

Posicionando divs à direita

Por , em Desenvolvimento frontend

Recommended Posts

Fleury    3

Fleury
Postado

Ae, tem como vcs me darem uma forcinha?

Tipo

tenho algo assim:

<div id="graf1" style="width: 100px; height:100px; text-align: right; background: #FFFFFF;">  <div style="width: 1px; height: 43px; background: #666666;"></div>  <div style="width: 1px; height: 100px; background: #666666;"></div>  <div style="width: 1px; height: 75px; background: #666666;"></div></div>
Dae tipo, como vcs podem ver, tem divs de 1 px de comprimento e alturas diversas, dentro de um div em forma de quadrado. Eu tava precisando que essas linhas de 1 px ficasse todas juntas e alinhadas a direita sempre e alinhamento vertical em bottom.

Isso vai ser aplicado em um JS para gerar gráficos e haverá mais linhas de 1 px como essas dentro desse quadrado.

Se tiver como, dá uma força aí... valeu!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Saiu:

 

<style>/* as bordas é só pra ficar fácil de enxergar o bixo   o width = 3 dos span também...*/#graf1 { width: 100px; height: 100px; background: #FFFFFF;	border:1px solid blue; }#graf1 span { width: 3px; bottom:0px; margin:0px;}</style><body><div id="graf1" >  <span style="height: 43px; background: #666666;"></span>  <span style="height: 100px; background: #FF0000;"></span>  <span style="height: 75px; background: #00FF00;"></span></div></body>

EDITADO: Ops. falha minha. Só tá funfando no IE.

 

Logo logo, versão nova...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fleury    3

Fleury
Postado

Rodei aqui no IE7 e não mostrou as spans'

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Uai. aqui pra mim funfou beleza.

Mas agora não importa. Já mudei dinovo. Só que tá invertido, mas ainda não consegui fazer do jeito certo não.

Vou lanchar e já volto pra tentar dinovo. Vão tentando aí enquanto isso...

 

<style>/* as bordas é só pra ficar fácil de enxergar o bixo   o width = 3 dos span também...*/#graf1 { width: 100px; height: 100px; background: #FFFFFF;	border:1px solid blue;}#graf1 div { width: 3px; bottom:0px; margin:0px; float:left; }</style><body><div id="graf1" >  <div style="height: 43px; background: #666666;"> </div><div style="height: 100px; background: #FF0000;"> </div><div style="height: 75px; background: #00FF00;"> </div></div></body>
Testado no IE e FF.

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Ae Fleury, a única forma que consegui foi:

<style>/* as bordas é só pra ficar fácil de enxergar o bixo o width = 3 dos span também...*/#graf1 { width: 100px; height: 100px; background: #FFFFFF; border:1px solid blue; position: relative;}#graf1 span { width: 3px; bottom:0px; position:absolute; }</style><body><div id="graf1" > <span style="height: 43px; left:0px; background:blue; "> </span><span style="height: 100px;left:3px; background: #FF0000;"> </span><span style="height: 75px; left:6px; background:#00FF00;"> </span></div></body>

Testado no IE e FF.Realmente, neste script o FF ficou devendo...

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

monte d divs, spans... revejam o codigo... do nada adianta somente retirar os tables, tds e trs e subtitui-los por divs e spans da vida... codigo vai continuar sujo e naum semantico ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

monte d divs, spans... revejam o codigo... do nada adianta somente retirar os tables, tds e trs e subtitui-los por divs e spans da vida... codigo vai continuar sujo e naum semantico

Uai, pa... e o que que você sugere pro fleury gerar o gráfico dele? SVG agente já sabe que (ainda) não funciona beleza em tudo que é browser...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fleury    3

Fleury
Postado

Opa, me desculpem mas..., hehehe, deu pra usar tabless pra fazer isso não =P

No final das contas ficou assim:

http://www.renavem.com.br/jsp/speedMonitor.jsp

 

Isso é um Monitor do tempo de resposta do servidor da empresa.

onde tá DB é o tempo de resposta do banco de dados e onde tá All é o tempo de DB + resposta do servidor tomcat.

 

Abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fleury    3

Fleury
Postado

Pq as divs acabam não ficando linhadas às direita =/

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Ops. é Mesmo...Quebrei um pouco a cabeça aqui e saiu uma nova versão. Dá uma olhada e vê se serve. Lê as instruções que tão aí dentro.

<style>#graf1 { width: 100px; height: 100px; line-height: 100px; background: #FFFFFF;border:1px solid blue; position: relative; text-align:right;}/* o 5px de width é só pra ficar mais fácil enxergar */#graf1 span { width: 5px; float:right; position:relative; }</style><body><div id="graf1" ><!-- Eles tão tudo colorido só pra ficar mais fácil de enxergar.Detalhes:1) Ao ser inserido um novo valor, ele deverá ser o primeiro e não o último. Ex. Perceba que o span red é que é o primeiro a ser exibido2) Não deverá haver espaços nem enter entre os span (senao o firefox poe um espacinho)3) O top de cada span deverá ser igual a altura do div pai menos a altura do span. Ex.: no span red o top é igual a 100px - 75px.--><span style="height: 43px; top:57px; background-color: green; "></span><span style="height:100px; top:0px; background-color:blue; "></span><span style="height: 75px; top:25px; background-color:red;"></span></div></body>

Dá uma força aí pa_bruno...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Fleury    3

Fleury
Postado

rs... funcionar funcionou... :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

ufs... Até que enfim, depois de tanto trabalho...Depois posta o link aí pragente ver comé que ficou...

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