Forum desproporcional em outra resolução

[Term1]

Qual é minha questão:
Oi, senhores...
Venho lhes questionar um detalhe que só notei quando testei meu forum em um computador mais antigo, em Resolução 1024 X 768.

Bem, o caso é que, nos topicos... a area do perfil 'nao cabe' na tela...e ela acaba aparecendo 'abaixo' da area do post..ficando mt estranho. E isso ocorre pq a area do post parece nao diminuir na largura, o que comprime a area do perfil...e nao tendo espaço...vai pra baixo.

Enfim. Teria como corrigir isso..fazendo com que a area de post se comprima automaticamente ou algo do tipo..para uso em Resoluções menores?

Obrigado

Endereço do meu fórum:
http://sempreletronica.forumeiros.com

Versão do fórum:
PHPBB3

[Tofu]

Verifiquei seu fórum, e não há nada de errado. E quando diminuo a tela, continua a não ter nada de errado.

A qualquer caso, tente esse código:

(Inicio de teu CSS)

Código:

.postprofile {
position: absolute;}

A, e tire uma printscreen, seria melhor.

[Sennior]

Boa noite,

O essencial para tal erro, seria o senhor nos mostrar uma Print Screen do erro, pois não vi também qualquer erro que excede em teu fórum.

Abraços.

[Term1]

Ok, perdao. É que eu tinha retirado o codigo que deixo pra ajeitar melhor meu campo de perfil. E, sem ele, nao ocorre o problema. Mas pretendo usar eles sim.

Esse sao os codigos que uso...para o perfil:

Código:

/* ---------------------------------- */
.postprofile {
border: 1px solid rgba(82, 82, 82, 0.51) !important;
border-radius: 10px;
background: rgba(189, 196, 199, 0.14);
}
/* ------------------------------------ */
.postprofile {width: 235px;}
/* ----------------------- */
div.postprofile dl dd{text-align:left;}
dl dd img {margin-left:2px;}
div.postprofile dl dt{margin-right:20px;}
span.Líder b {margin-left:15px;}
/* ------------------------- */
.postprofile dt img {
background: none repeat scroll 0 0 #FFF;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 1px 30px rgba(0,0,0,0.27), 0 0 30px rgba(0,0,0,0.1) inset;
margin-bottom: -2;
max-height: 300px!important;
max-width: 150px!important;
padding: 9px 9px;
}
.postprofile dt img:hover {
background-color: #e8eaff;
box-shadow: 0 0 3px #AAA inset;
cursor: pointer;
text-decoration: none;
}

E essas é imagem do que ocorre nessa resolução:
https://i.servimg.com/u/f75/18/45/08/36/imagem11.jpg

[Sennior]

Boa noite,

Eu agradeço por ter mandado à Print Screen amigo.
Bem, vamos ao que interessa, vá em teu CSS e coloque este código no inicio dele amigo que irá resultar:

Código:

.postprofile {position: relative !important;width: 218px !important;}

Abraços!

[Term1]

Ola, Sheldon.
Bem... ate que resolveu, mas nao era bem isso que queria. Pois pelo que vi, o codigo encurta a largura do quadro do perfil... ficando o q está dentro desparelho e fora do lugar. Minha intenção é nao mexer quadro.

Agora, gostaria que o texto do post é que se reajustasse ainda mais..conforme a resolução. Como as normais webpages, onde o texto se ajusta dependendo do tamanho da tela. E falo 'ainda mais' porque percebo que o texto ja faz isso...ele encurta. A unica coisa é que gostaria que encurtasse mais, sem afetar o perfil.

Como fazemos isso, amigo?

[Sennior]

Boa noite,

Bem, não há maneira de morrer o tópico, pois mesmo fazendo esta função, o perfil não sobe pra cima. De duas uma, ou o senhor escolhe mesmo uma largura viável como eu mostrei no código acima que fica perfeitamente bem em teu fórum, ou o senhor pode arredar o perfil mais para esquerda com este CSS:

Código:

.postprofile {
position: relative !important;
left: -10px !important;
}

Até mais!

[Term1]

Entendo, Sheldon. Embora sobre a largura de meu perfil estava querendo nao mudar justamente porque tenho imagens e ranks q tem exatamente aquela largura.

Enfim. Agradeço o codigo ultimo, pra reajuste. Embora ainda gostaria da outra forma...mexendo no texto.

Alias, qto a isso lhe pergunto: Se bem entendi e notei (e me corrija se diferente) qdo vc muda a resolução e consequentemente a largura... o texto de modo automatico encurta...mas ate certo ponto. O que faz ele fazer isso? Digo...pq ate aquele ponto? Perdao, mas fico curioso pq nao podemos 'dizer' pra ele que pode encurtar mais..e se ajustar ao espaço, nao importa a largura?

[Sennior]

Bem, não sei até que ponto o mesmo encurta, mas veja só este código:

Aceda a: Painel de controleVisualização  Imagens e CoresCoresAba Folha CSS.

Código:

.postbody .content {
font-size: 1.3em;
width: 574px;
position: relative;
left: 53px;
}
.author {
position: relative;
left: 50px;
}
.topic-title {
position: relative;
left: 43px;
}.postprofile {
position: relative;
left: -5px;
top: -24pc !important;
}


<li> Coloque o código no inicio de teu CSS.

Valide e veja o resultado.
É um CSS, para à resolução de teu monitor, talvez possa arrumar.

Abraços,
Sheldon!

[Term1]

Ola, Sheldon.
Bem é a solução, mas acho que estás no caminho. O problema é o codigo mexe com a caixa do perfil...e assim, numa resolução 'normal', ela fica estranha...mas pra cima. Como nessa imagem:
https://i.servimg.com/u/f75/18/45/08/36/imagem12.jpg

Assim, te peço para tentar tirar essa parte do comando. Alias, resolvi retirar o comando para a caixa..mas continuou errada. Lembrando que vc deve levar em consideração de q há a assinatura 'atrapalhando' (e mais a esquerda), como tbm o comando de twitter...ambos q tinha tirado, mas vou deixa-los.

Resumindo. Acho q dá pra arrumar. Apenas devemos mexer no texto/titulo/assinatura e aumentar o espaço entre a caixa e eles. Assim, na baixa resolução eles vao encolher a distancia, quase tocando a caixa, como quero...sem prejudicar ou passar por cima da caixa.
Enfim. Acredito q é possivel...se me ajudarem.

[Sennior]

Saudações cordial membro!

Tente assim:

Aceda a: Painel de controleVisualização  Imagens e CoresCoresAba Folha CSS.

Código:


.postbody .content {
font-size: 1.3em;
width: 574px;
position: relative;
left: 53px;
}
.author {
position: relative;
left: 50px;
}
.topic-title {
position: relative;
left: 43px;
}


<li> Coloque o código no inicio de teu CSS.

Valide e veja o resultado.

Abraços,
Sheldon!

[Term1]

Bem, estas no caminho. Mas olha só: Vc empurrou o texto mais a direita. ok. Mas tanto o Botao Twiiter e principalmente a assinatura, continuaram no mesmo lugar..mt mais a esquerda.
Assim, a caixa de perfil NAO fica no lugar, mas 'começa' apos a assinatura.

E outra coisa. Mesmo eu retirando a assinatura...noto que a caixa nao vai pra cima...'começando' somente apos o termino do texto. Estranho: https://i.servimg.com/u/f71/18/40/06/56/image110.jpg
Falo isso pq lembro de seu 1ºcodigo...onde isso nao ocorria, pois o texto 'atravessava' a caixa sem problemas.

Enfim. Acho que o local do texto está ok. Apenas tbm manipular a posição do Tweetar e Assinatura. E depois fazer com que a caixa nao se posicione apos o texto de post e fique no seu lugar.

[Sennior]

Saudações cordial membro!

Agora adicione este:

Aceda a: Painel de controleVisualização  Imagens e CoresCoresAba Folha CSS.

Código:

.twitter-share-button.twitter-count-horizontal {
position: relative;
left: 53px;
}
#sig1 {
position: relative;
left: 55px;
}


<li> Coloque o código no inicio de teu CSS.

Valide e veja o resultado.

Abraços,
Sheldon!

[Term1]

Obrigado, Sheldon.
Funcionou com o botao Twitter, mas nao com a assinatura.

E outra: peço que vc avalie a minha img anterior...pois aquele problema persiste...onde a caixa de perfil só começa qdo termina o texto. Esse é o maior problema alias.

[Sennior]

Saudações cordial membro!

Altere todos os códigos que eu lhe passei neste tópico pelos códigos a baixos. Coloque todos no inicio de teu CSS.

Aceda a: Painel de controleVisualização  Imagens e CoresCoresAba Folha CSS.

Código:

.postprofile {
background: rgba(189,196,199,0.14);
border: 1px solid rgba(82,82,82,0.51)!important;
border-radius: 10px;
left: 35px !important;
position: absolute !important;
width: 248px;
}
.twitter-share-button.twitter-count-horizontal {
left: 53px !important;
position: relative !important;
}
.signature_div {
position: relative;
left: 55px;
}


<li> Coloque o código no inicio de teu CSS.

Valide e veja o resultado.

Abraços,
Sheldon!

[Term1]

Melhorou muito, Sheldon.
Pelo menos agora a caixa nao começa apos o post. Porem...só pra complicar..ha ainda um erro: o tamanho da caixa do post, nao acompanha o tamanho (altura) da caixa. Assim a caixa de perfil fica maior que o post..se post for pequeno.
https://i.servimg.com/u/f71/18/40/06/56/imag110.jpg

Mas só falta isso.

[Term1]

O que que voce acha: é possivel resolver isso, amigo?

[Sennior]

Olá!

Altere o código que eu lhe passei pelo abaixo:

Código:

.postprofile {
background: rgba(189,196,199,0.14);
border: 1px solid rgba(82,82,82,0.51)!important;
border-radius: 10px;
left: 35px !important;
position: absolute !important;
width: 248px;
top: 0pc!important;
}
.twitter-share-button.twitter-count-horizontal {
left: 53px !important;
position: relative !important;
}
.signature_div {
position: relative;
left: 55px;
}

Até mais.

[Term1]

Bem.. esse problema de ficar totalmente fora da caixa (como na imagem anterior) continua.
O comando adicionado 'top' só arruma a posição da cx de perfil na tela...mas nao ajusta pra q ela fique dentro do espaço do post.

[Term1]

Algumas solução ainda, amigos?

[Term1]

up

[goodbye]

Olá,

Desculpe a demora em responder, vamos testar com a seguinte solução:

Aceda à 'Folha de estilo CSS':
Painel de Controle ->> Visualização ->> Imagens e Cores ->> Cores / Folha de estilo CSS

 Agora remova os códigos cedidos anteriormente neste tópico.

Acrescente o código a seguir na folha:

Código:

.postbody {
width: 75%!important;
}
.postprofile {
width: 22%!important;

Valide!

Resulta?

[Term1]

Pois é. Estava perdendo as esperanças já.
No entanto...muito obrigado pela atenção. Sua solução praticamente resolve o problema...e ainda mais facilmente. Mexe na caixa e no texto do post...sem precisar ajustar cada item um por um.
Alias..acredito q nao possa melhorar muito mais do que isso, por isso dou como resolvido.

Obrigado mesmo, amigo.