I-NOZex Posted June 8, 2013 at 05:34 PM Report #511653 Posted June 8, 2013 at 05:34 PM 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
Devexz Posted June 8, 2013 at 07:39 PM Report #511663 Posted June 8, 2013 at 07:39 PM 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 Report Contador de calorias: caloriaspordia.com
I-NOZex Posted June 8, 2013 at 08:19 PM Author Report #511668 Posted June 8, 2013 at 08:19 PM 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
Devexz Posted June 8, 2013 at 08:33 PM Report #511671 Posted June 8, 2013 at 08:33 PM o do meio fica centrado por causa disto: padding: 0.45em 0.158em; Contador de calorias: caloriaspordia.com
I-NOZex Posted June 8, 2013 at 09:07 PM Author Report #511675 Posted June 8, 2013 at 09:07 PM 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
yoda Posted June 8, 2013 at 09:27 PM Report #511678 Posted June 8, 2013 at 09:27 PM Usa listas em vez de div's e span's. before you post, what have you tried? - http://filipematias.info sense, purpose, direction
I-NOZex Posted June 9, 2013 at 10:37 AM Author Report #511714 Posted June 9, 2013 at 10:37 AM 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
Devexz Posted June 9, 2013 at 11:19 AM Report #511720 Posted June 9, 2013 at 11:19 AM não estou a perceber onde é que está a tua dúvida. text-align:center ? Contador de calorias: caloriaspordia.com
I-NOZex Posted June 9, 2013 at 12:03 PM Author Report #511726 Posted June 9, 2013 at 12:03 PM (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 at 12:04 PM by I-NOZex B2R » Beat2Revolution v3.0b | Regista e divulga-nos beat2revolution.net
HappyHippyHippo Posted June 9, 2013 at 02:21 PM Report #511735 Posted June 9, 2013 at 02:21 PM <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
I-NOZex Posted June 9, 2013 at 05:02 PM Author Report #511761 Posted June 9, 2013 at 05:02 PM <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
HappyHippyHippo Posted June 9, 2013 at 05:04 PM Report #511762 Posted June 9, 2013 at 05:04 PM 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
I-NOZex Posted June 9, 2013 at 05:06 PM Author Report #511763 Posted June 9, 2013 at 05:06 PM 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
brunoais Posted June 9, 2013 at 10:14 PM Report #511799 Posted June 9, 2013 at 10:14 PM @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%.
Devexz Posted June 9, 2013 at 10:20 PM Report #511801 Posted June 9, 2013 at 10:20 PM 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
I-NOZex Posted June 9, 2013 at 10:30 PM Author Report #511802 Posted June 9, 2013 at 10:30 PM (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 at 10:30 PM by I-NOZex B2R » Beat2Revolution v3.0b | Regista e divulga-nos beat2revolution.net
Devexz Posted June 9, 2013 at 10:31 PM Report #511803 Posted June 9, 2013 at 10:31 PM no meu código acima, em só pus <!DOCTYPE>, esqueçi de por html... deve ser isso. Contador de calorias: caloriaspordia.com
brunoais Posted June 11, 2013 at 02:14 PM Report #512042 Posted June 11, 2013 at 02:14 PM 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 Report "[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%.
I-NOZex Posted June 11, 2013 at 06:29 PM Author Report #512115 Posted June 11, 2013 at 06:29 PM é isso tudo @brunoais, obrigado 👍 B2R » Beat2Revolution v3.0b | Regista e divulga-nos beat2revolution.net
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now