Ajuda com div

[dgateles 0]

Pessoal não to conseguindo resolver um probleminha besta porque eu não tenho tanto conhecimento mas to aprendendo hehe.
O problema é o seguinte:



Estou tentando deixar esse fundo do jogadores online com opacidade, até ai tudo bem, mas eu não estou conseguindo fazer com que ele fique na mesma largura do input abaixo (botão verde). Já tentei add um width mas não dá certo, veja:



Fica totalmente desregulado. Como eu faço para que o background fique do mesmo tamanho do input sem que ele saia do lugar? Grato!

CSS do local:

 

.server-status {
background: #212121;
opacity: 0.8;
    filter: alpha(opacity=80);
    font-size: 18px;
    color: #fff;
}

[Don Benatti 28]

A qual tipo de elemento essa classe "server-status" está atribuída? div, span, etc.

 

Isso também pode ocorrer com css mal escrito afetando este elemento, adiciona um display block com text center para ver

.server-status {
    background: #212121;
    opacity: 0.8;
    filter: alpha(opacity=80);
    font-size: 18px;
    color: #fff;
    
    display:block;
    text-align:center;
}

[dgateles 0]

 

A qual tipo de elemento essa classe "server-status" está atribuída? div, span, etc.

 

Isso também pode ocorrer com css mal escrito afetando este elemento, adiciona um display block com text center para ver

.server-status {
    background: #212121;
    opacity: 0.8;
    filter: alpha(opacity=80);
    font-size: 18px;
    color: #fff;
    
    display:block;
    text-align:center;
}

Está atribuída a uma div, vou testar aqui e retorno. Obrigado pela ajuda!

 

Edit: não deu certo.

 

Está assim a css:

/*
 * Server IP
 */
.serv-ip::selection{background:#ffb7b7}
.serv-ip::-moz-selection{background:#ffb7b7}
.serverip {
    transition: .2s all ease-out;
}
.serverip:hover{background:#B80000}
input.serverip {
    font-size: 18px;
    cursor: text;
    text-align: center;
    color: #fff;
    border: 0;
    background: #1CA500;
    margin-left: 5px;
}
input.serverip:hover{background-color:#23CC00}
.server-status {
	width: 50px;
	background: #212121;
	opacity: 0.8;
    filter: alpha(opacity=80);
    font-size: 18px;
    color: #fff;
	display:block;
    text-align:center;
}
.mconline-bar {
/*  line-height: 52px; */
    margin-bottom: 0;
    text-align: center;
    transition: .25s all ease-out;
}

E no TLP tá assim:

<div class="jumbotron">
<center><img src="http://craftalizar.com/images/craftalizar.png"></center>
  <br /><br />
  {$SESSION_FLASH}
	<div class="container">
	<div class="mconline-bar">
   <div class="server-status"><i class="fa fa-user"></i> {$PLAYERS_ONLINE}</div>
  <input class="serverip" value="play.craftalizar.com" onclick="this.select();" readonly="">
</div>
  </div>
    </div>

[Don Benatti 28]

.server-status {
    width: 50px;
}

 

Por isso é importante postar sempre o código completo, anteriormente você não postou que .server-status estava com 50px o problema é esse width: 50px; apenas remova.

[dgateles 0]

 

Por isso é importante postar sempre o código completo, anteriormente você não postou que .server-status estava com 50px o problema é esse width: 50px; apenas remova.

Mas eu coloquei isso agora pra testar, com ou sem ele não faz diferença, continua o barra preta enorme. Se eu coloco o width, ele fica igual à segunda imagem

[Don Benatti 28]

Nossa! eu tava até agora achando que você queria que a barra transparente ficasse estendida e não pequena, acredito que você quer saber como deixá-la na mesma posição daquele verde escrito play..... se for esse o caso, a solução é outra, crie outro elemento span dentro dessa div

 

Muda o HTML para:

<div class="server-status">
    <span class="players-online">
        <i class="fa fa-user"></i> {$PLAYERS_ONLINE}
    </span>
</div>

E o CSS para:

.server-status{
    text-align:center;
}
.server-status .players-online{
    display:inline-block;
    background: #212121;
    
    /* css3 rgba(alfa) no lugar de opacity/filter */
    background:rgba(33,33,33, 0.8);
    
    opacity: 0.8;
    filter: alpha(opacity=80);
    
    font-size: 18px;
    color: #fff;
    
    /* opcional */
    padding:0.3em 0.75em;
}

[dgateles 0]

Muito obrigado cara! Funcionou perfeitamente! Desculpe o incômodo!