I-NOZex 135 Report post Posted June 8, 2013 Bem, ando aqui com uns problemas e ja segui um monte de dicas, inclusive tentei usar as spans dentro de LI's, mas nada ta a resultar como quero, de momento está assim: as spans nao teem tamanho definido, a DIV parent tem 100% de largura, o que eu queria era alinhar as 3spans, a 1a a esquerda, a 2a ao centro e a 3a á esquerda. Quanto a codigo o que tenho: html <div class="buttons"> <span>Gosto</span> <span>Favorito</span> <span>Download</span> </div> css .buttons { display: inline-block; width: 100%; margin-top: 5px; } .buttons > span { margin: 0 2px; padding: 0.45em 0.158em; } .buttons > span:first-child { margin-left: 0; } .buttons > span:last-child { margin-right: 0; } alguma fix/tip/tutorial? cumpz B2R » Beat2Revolution v3.0b | Regista e divulga-nos beat2revolution.net Share this post Link to post Share on other sites
Devexz 44 Report post Posted June 8, 2013 Não sei se é isto que queres, basicamente independente do tamanho da div buttons o primento span fica à esquerda e o ultimo à direita, o do meio fica centrado... <!DOCTYPE> <html> <head> <style> .buttons { display: inline-block; width: 300px; margin-top: 5px; text-align:center; } .buttons > span { } .buttons > span:first-child { float:left; } .buttons > span:last-child { float:right; } span { margin : auto; } </style> </head> <body> <div class="buttons"> <span>Gosto</span> <span>Favorito</span> <span>Download</span> </div> </body> </html> 1 Contador de calorias: caloriaspordia.com Share this post Link to post Share on other sites
I-NOZex 135 Report post Posted June 8, 2013 afinal nao tava a dar pois havia outra classe a fazer overide ao span -.- btw, ja ta centrado soque o do meio fica mais acima que os outros... i will keep trying algo diferente mas se te ocorrer algo diz B2R » Beat2Revolution v3.0b | Regista e divulga-nos beat2revolution.net Share this post Link to post Share on other sites
Devexz 44 Report post Posted June 8, 2013 o do meio fica centrado por causa disto: padding: 0.45em 0.158em; Contador de calorias: caloriaspordia.com Share this post Link to post Share on other sites
I-NOZex 135 Report post Posted June 8, 2013 nup, essa classe afecta todos os span, e so o do meio fica mal... padding so altera a "margem" interior... nao sabes uma forma de fazer antes com uma lista? o mesmo resultado mas com ul, que acho que acabaria por ficar mais correcto pois as spans vao acbar por ser trocadas por buttons ou assim, tao ali mais so como placeholders... B2R » Beat2Revolution v3.0b | Regista e divulga-nos beat2revolution.net Share this post Link to post Share on other sites
yoda 126 Report post Posted June 8, 2013 Usa listas em vez de div's e span's. before you post, what have you tried? - http://filipematias.info sense, purpose, direction Share this post Link to post Share on other sites
I-NOZex 135 Report post Posted June 9, 2013 Usa listas em vez de div's e span's. ya bem me parecia que seria mais correcto, no entanto qual o truque para depois as deixar as 3 spans ou buttons ou o que tiver dentro das LI centrado? de notar que eu quero deixar uma margem entre os elementos... obrigado desde ja B2R » Beat2Revolution v3.0b | Regista e divulga-nos beat2revolution.net Share this post Link to post Share on other sites
Devexz 44 Report post Posted June 9, 2013 não estou a perceber onde é que está a tua dúvida. text-align:center ? Contador de calorias: caloriaspordia.com Share this post Link to post Share on other sites
I-NOZex 135 Report post Posted June 9, 2013 (edited) tipo isto agora ta assim: se reparares ele não esta a fazer "block" com a Ul de cima, ja tentei meter as 2 em display block, definir tamanhos para a de cima mas simplesmente esta debaixo fica sempre sobreposta :S .detail > ul.counters { margin-top: 5px; } .detail > ul.counters > li { float: left; font-size: 0.7em; } .detail > ul.counters > li:before { background: url("images/icons.png") no-repeat scroll left center transparent; content: " "; padding: 9px; } .detail > ul.counters > li.likes:before { background-position: 0px 8px; } .detail > ul.counters > li.downloads:before { background-position: 0px -17px; } .detail > ul.counters > li.plays:before { background-position: 0px -42px; } .detail > ul.counters > li.lenght:before { background-position: 0px -68px; } .detail > ul.counters > li:after { content: " "; padding-right: 8px; } .detail > ul.buttons { display: inline-block; width: 100%; margin-top: 5px; text-align:center; /*overflow:hidden:*/ } .detail > ul.buttons > li { /*float: left; width: 30%;*/ display: inline-block; } .detail > ul.buttons > li:first-child { margin-left: 0; float: left; } .detail > ul.buttons > li:last-child { margin-right: 0; float: right; } .detail > ul.buttons > li > span { margin: 0 auto; padding: 0.45em 0.158em; } counters é a lista de cima e buttons a lista de baixo <ul class="counters"> <li class="lenght"><time>99:99</time></li> <li class="downloads">9999</li> <li class="plays">9999</li> <li class="likes">9999</li> </ul> <ul class="buttons"> <li><span>Gosto</span></li> <li><span>Favorito</span></li> <li><span>Download</span></li> </ul> </div> e eu queria deixar tambem as spans expandidas totalmente, ja tentei meter as li com width 33% e as spans width 100%, mas sem efeito :S Edited June 9, 2013 by I-NOZex B2R » Beat2Revolution v3.0b | Regista e divulga-nos beat2revolution.net Share this post Link to post Share on other sites
HappyHippyHippo 1,162 Report post Posted June 9, 2013 <div class="buttons"> <span>Gosto</span> <span>Favorito</span> <span>Download</span> </div> .buttons span { display: inline-block; margin: 0; width: 33%; } IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Share this post Link to post Share on other sites
I-NOZex 135 Report post Posted June 9, 2013 <div class="buttons"> <span>Gosto</span> <span>Favorito</span> <span>Download</span> </div> .buttons span { display: inline-block; margin: 0; width: 33%; } soque eu preciso de uma margem entre elas, e com isso vai pelos ares :S B2R » Beat2Revolution v3.0b | Regista e divulga-nos beat2revolution.net Share this post Link to post Share on other sites
HappyHippyHippo 1,162 Report post Posted June 9, 2013 soque eu preciso de uma margem entre elas, e com isso vai pelos ares :S nesse caso só existe uma solução em CSS : saber o tamanho exacto do div .buttons IRC : sim, é algo que ainda existe >> #p@p Portugol Plus Share this post Link to post Share on other sites
I-NOZex 135 Report post Posted June 9, 2013 nesse caso só existe uma solução em CSS : saber o tamanho exacto do div .buttons e tal so com js coisa que nao me agrada muito... bha, vou tentar mais algumas coisas, no entanto um grande obrigado a todos os qe responderam B2R » Beat2Revolution v3.0b | Regista e divulga-nos beat2revolution.net Share this post Link to post Share on other sites
brunoais 65 Report post Posted June 9, 2013 @Devexz Usa um doctype válido para o browser mostrar a página corretamente. "[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31 Life is a genetically transmitted disease, induced by sex, with death rate of 100%. Share this post Link to post Share on other sites
Devexz 44 Report post Posted June 9, 2013 um doctype válide pode ser este? <!DOCTYPE html> penso que agora não é necessário por aquela lenga lenga toda, acho eu... Contador de calorias: caloriaspordia.com Share this post Link to post Share on other sites
I-NOZex 135 Report post Posted June 9, 2013 (edited) @Devexz Usa um doctype válido para o browser mostrar a página corretamente. HTML5 is not based on SGML, and therefore does not require a reference to a DTD. fonte: w3schools logo acho que ta correcto como ele usou, a minha definição tambem está igual, no entanto ainda, uma vez que nao acabei o template, naovalidei o html & css... Edited June 9, 2013 by I-NOZex B2R » Beat2Revolution v3.0b | Regista e divulga-nos beat2revolution.net Share this post Link to post Share on other sites
Devexz 44 Report post Posted June 9, 2013 no meu código acima, em só pus <!DOCTYPE>, esqueçi de por html... deve ser isso. Contador de calorias: caloriaspordia.com Share this post Link to post Share on other sites
brunoais 65 Report post Posted June 11, 2013 Podes tentar: Usas css para os spans serem inline-block, depois usas white-space: nowrap no div que contem os spans. Algo do tipo: .buttons{ white-space: nowrap; } .buttons span { display: inline-block; margin: 0 20%; width: 20%; -moz-box-sizing: border-box; box-sizing: border-box; } Se queres uma margin fixa, podes tentar: .buttons{ white-space: nowrap; } .buttons span:first-child { display: inline-block; margin: 0 20% 0 0; width: 20%; margin: 0 calc(10px) 0 0; width: calc(33.333% - 10px); -moz-box-sizing: border-box; box-sizing: border-box; } .buttons span { display: inline-block; margin: 0 20% 0 0; width: 20%; margin: 0 0 0 calc(10px); width: calc(33.333% - 10px); -moz-box-sizing: border-box; box-sizing: border-box; background-color:green } exemplo: http://jsfiddle.net/VKZmr/ 1 "[Os jovens da actual geração]não lêem porque não envolve um telecomando que dê para mirar e atirar, não falam porque a trapalhice é rainha e o calão é rei" autor: thoga31 Life is a genetically transmitted disease, induced by sex, with death rate of 100%. Share this post Link to post Share on other sites
I-NOZex 135 Report post Posted June 11, 2013 é isso tudo @brunoais, obrigado B2R » Beat2Revolution v3.0b | Regista e divulga-nos beat2revolution.net Share this post Link to post Share on other sites
