Problema nos avatares

Detalhes da questão

Endereço do fórum: http://riseofheroes.forumeiro.com/
Versão do fórum: PhpBB3

Descrição

Olá! Bom, estou com um problema nos avatares. Embora eles estejam do tamanho certo, aparece uma barra preta do lado dele, que automaticamente da a impressão dele estar do tamanho errado. Veja aqui o problema. Tem como arrumar?

E aí, colega? Tudo joia?

Para facilitar o processo, poderia passar o código que está nos ids: #pr-avatar, #pr-info, #pr-conta e .pr-campo:first-child #pr-dato? Desse modo evitamos o congestionamento do seu CSS.

Onde se encontra o ids, Key?

Batyman escreveu:Onde se encontra o ids, Key?

Dentro da sua folha de estilo CSS. Basta colocar os códigos em separado na caixa de pesquisa.

Ah, achei.

Código:

#pr-avatar {
width: 250px;
height: 400px;
transition: all 1.7s ease-in-out;
-moz-transition: all 1.7s ease-in-out;
-webkit-transition: all 1.7s ease-in-out;
}

#pr-info {
width: 230px;
height: 380px;
padding: 10px;
background: #0d0d0d;
margin-top: -445px;
margin-left: 250px;
transition: all 1.7s ease-in-out;
-moz-transition: all 1.7s ease-in-out;
-webkit-transition: all 1.7s ease-in-out;
}

Código:

#pr-conta {
width: 116px;
height: 66px;
display: inline-block;
}

#pr-conta a {
  margin-bottom: 2px;
  display: block;
}

Código:

.pr-campo:first-child #pr-dato {
width: 92px;
padding: 15px 10px;
background: #000;
font-family: 'Oswald';
font-size: 20px;
font-variant: normal;
font-weight: lighter;
text-transform: lowercase;
line-height: 24px;
text-align: center;
display: inline-block;
margin-top: -66px;
margin-left: 118px;
}


Código:

#pr-dato {
background: #000;
color: #555;
display: inline-block;
font-size: 8px;
text-transform: uppercase;
letter-spacing: 2px;
margin-right: 0px;
text-align: center;
width: 230px;
line-height: 20px;
}

Solucionei o problema e ao mesmo tempo acabei adaptando o efeito de passar o mouse sobre o avatar (hover), pois ficava em cima do nick do usuário.

Infelizmente acabei esquecendo de pedir alguns ids, peço perdão. Por isso, vamos começar por eles. Localize: #pr-cuerpo e #pr-name a e os substitua pelos códigos abaixo.

#pr-cuerpo

Código:

#pr-cuerpo {
    height: 510px;
    margin-left: -30px;
    margin-top: -5px;
    overflow: hidden;
    width: 200px;
}

#pr-name a

Código:

#pr-name a {
    background: #0d0d0d;
    border-bottom: 10px solid #44473E;
    display: block;
    font-family: Oswald;
    font-size: 20px;
    font-variant: normal;
    font-weight: lighter;
    line-height: 35px;
    padding: 10px;
    text-align: right;
    text-shadow: 1px 1px 1px #000;
    text-transform: lowercase;
    width: 200px;
    margin-left: -20px;
}

Agora vamos substituir os que você me passou. Segue pela ordem:

#pr-avatar e #pr-info

Código:

#pr-avatar {
width: 200px;
height: 400px;
transition: all 1.7s ease-in-out;
-moz-transition: all 1.7s ease-in-out;
-webkit-transition: all 1.7s ease-in-out;
}
#pr-info {
width: 200px;
height: 325px;
padding: 10px;
background: #0d0d0d;
margin-top: -410px;
margin-left: 250px;
transition: all 1.7s ease-in-out;
-moz-transition: all 1.7s ease-in-out;
-webkit-transition: all 1.7s ease-in-out;
}

.pr-campo:first-child #pr-dato

Código:

.pr-campo:first-child #pr-dato {
    background: #000;
    display: inline-block;
    font-family: Oswald;
    font-size: 20px;
    font-variant: normal;
    font-weight: lighter;
    line-height: 24px;
    margin-left: 118px;
    margin-top: -66px;
    padding: 15px 10px;
    text-align: center;
    text-transform: lowercase;
    width: 50px;
}

#pr-dato

Código:

#pr-dato {
    background: #000;
    color: #555;
    display: inline-block;
    font-size: 8px;
    letter-spacing: 2px;
    line-height: 20px;
    margin-right: 0;
    text-align: center;
    text-transform: uppercase;
    width: 180px;
}

Veja se resulta.

De certa forma, melhorou. Mas somente a barrinha de cima diminuiu, veja aqui.

Opa, sinto muito. Bom, infelizmente só retirando o ícone online ou trocando por um que fique melhor posicionado. Se eu tentar mexer nele, vai acabar ficando por trás da barrinha de cima.

Sugiro esse tutorial: https://ajuda.forumeiros.com/t57027-.

Não me importo de tirar o icone, Kay. Da pra por ele no mesmo lugar que tem a imagem da MP

Batyman escreveu:Não me importo de tirar o icone, Kay. Da pra por ele no mesmo lugar que tem a imagem da MP

Entendo, mas você mesma acabou tirando.

Acho que sobram agora só os cantos arredondados e brancos, não? Se quiser retirá-los, aceda a: painel de controle > visualização > imagens e cores > imagens > modo avançado > geral/navegação. Nos campos dos seguintes 4 itens: "Cantos esquerdos arredondados", "Cantos direitos arredondados", "Cantos esquerdos arredondados sobre fundo colorido" e "Cantos direitos arredondados sobre fundo colorido", insira a url abaixo:

Código:

http://2img.net/i/fa/empty.gif

Exatamente isso que pediria a seguir, Key. Agora está tudo resolvido mesmo ao menos espero que sim. Obrigada pela centésima vez essa noite, até a próxima.