Jump to content
I-NOZex

Centrar 3spans numa div 100% width

Recommended Posts

I-NOZex

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:

V9oG2wu.png

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

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>

  • Vote 1

Contador de calorias: caloriaspordia.com

Share this post


Link to post
Share on other sites
I-NOZex

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
I-NOZex

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
I-NOZex

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
I-NOZex

tipo isto agora ta assim:

wDBy2E0.jpg

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 by I-NOZex

B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net

Share this post


Link to post
Share on other sites
HappyHippyHippo

<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

Share this post


Link to post
Share on other sites
I-NOZex

<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

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

Share this post


Link to post
Share on other sites
I-NOZex

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

@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

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

@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 by I-NOZex

B2R » Beat2Revolution v3.0b | Regista e divulga-nos

beat2revolution.net

Share this post


Link to post
Share on other sites
brunoais

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/

  • Vote 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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.