JScript

Programação & Desenvolvimento


Icones dos tópicos encostando no titulo

avatar
Convidado
Convidado

Icones dos tópicos encostando no titulo Empty Icones dos tópicos encostando no titulo

Mensagem por Convidado em Ter 04 Fev 2014, 8:27 pm

A questão é a mesma coisa do título:
Os ícones dos tópicos ficam encostando no título dele.

Olhem abaixo o que quero dizer:
http://narutolh.forumeiros.com/f74-analise-de-roleplay

E se não entenderam, fiz um print pra melhor entendimento:
https://i.imgur.com/6AZreex.png

A seta vermelha ta indicando o título do tópico, e dá pra ver claramente que os ícones dos tópicos encostam, isso é, ficam acima do título não dando pra vê-lo.

Quero concertar isso, deixar os ícones dos tópicos mais pra baixo pra poder ver o título inteiro. Agradeço desde já !!!

Link do meu fórum: http://narutolh.forumeiros.com/forum

OBS: Eu gostaria, se possível, que quem fosse me ajudar pudesse fazer isso por CSS/HTML/JS? v:
Porque este fórum que utilizo é pra testes e o original nao serei capaz de mexer nos templates..
waghcwb
waghcwb
Desenvolvedores
Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

Icones dos tópicos encostando no titulo Empty Re: Icones dos tópicos encostando no titulo

Mensagem por waghcwb em Ter 04 Fev 2014, 8:58 pm

Olá, procure por .status e retire a propriedade position: absolute dele. E depois adicione isso no CSS
Código:
.status{float:left}

Resultado em seu fórum:
Icones dos tópicos encostando no titulo UzARI8E



The quieter you become, the more you are able to hear

Icones dos tópicos encostando no titulo Btn_viewmy_160x25_pt_BR



study
JScript
JScript
Administradores
Administradores

Time Online : 2d 4h 51m 36s
Mensagens : 1381
Data de inscrição : 29/03/2013
Localização : Somewhere out there

Icones dos tópicos encostando no titulo Empty Re: Icones dos tópicos encostando no titulo

Mensagem por JScript em Ter 04 Fev 2014, 9:03 pm

[s]Olá amigo, isso é fácil de resolver, porém ficará mais fácil e rápido se liberar o acesso ao tópico para os visitantes pois o link redireciona para fazer login!
[/s]
Até mais,


Edit:
Eu não tinha visto sua postagem @Wagner, resolveu o problema!!!

JS


Última edição por JScript em Ter 04 Fev 2014, 9:04 pm, editado 1 vez(es) (Razão : Complementos...)



Spoiler:
"O impossível é só uma questão de opinião."


"E o recente formará uma legião. Sua atuação será maior que a atual vezes mil. O estrondor de um milhão de teclados semelhante a um grande terremoto cobrirá a plataforma, e os incrédulos tremerão."

"Alguns seguidores dirão que não é possível, diante de uma legião estarrecida o recente provará o contrário e todos o conhecerão. Os infiéis passarão a lhe adorar diante de uma plataforma que nunca mais será a mesma!"


Do livro de JScript...


avatar
Convidado
Convidado

Icones dos tópicos encostando no titulo Empty Re: Icones dos tópicos encostando no titulo

Mensagem por Convidado em Ter 04 Fev 2014, 11:36 pm

É exatamente o que desejo, Wagner! Todavia, não consegui efetuar este procedimento ao qual me ditou a fazer. Adicionei ao meu CSS o seguinte código:
Código:
.status{
  float:left;
  position: none !important;
}
E não obtive sucesso. Não sei como retirar esse position: absolute ao qual me falou. Eis abaixo meu CSS:
Código:
.main-head {
margin-top: 10px;
margin-bottom: 0px;
}
tbody.statused td.tcl:hover, tbody.statused td.tcr:hover{
 background-color:#ffffff;
}
.main-head h2, .main-head .h3 {
font-weight: bold!important;
font-size: 15px;
text-align: center;
text-shadow: black 0.0em 0.0em 0.2em;
}
.pun table.table td, .pun .post, .main-content.topic, .postfoot, #pun-about.clearfix, .pun .posthead, #pun-visit, .main-box, #onlinelist, #onlinechat, #pun-announcement {
border: none;
}
.main-content {
border: 4px solid #009FB0;
  border-bottom-width: 5px;
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
}
a {
text-decoration:none;
    font-weight: bold;
}

th.tcl {
color: #0F0F0F!important;
}
th.tcr {
color: #0F0F0F!important;
}
th.tc3 {
color: #FFF!important;
}
th.tc2  {
color: #FFF!important;
}
p.message {
background-color: #000!important;
}
.main-content img {
max-width: 99%;
}
.postmain img {
max-width: 99%;
}
.postfoot {
background-color: #222;
}
#fa_toolbar {
  opacity:0.95;
  background-color: #00272c!important;
}

/* chatbox */
/*chatbox v1.1 BS*/
#chatbox_header.main-head {
background: url(http://i58.servimg.com/u/f58/18/24/85/15/gm-loo10.jpg) repeat-x bottom #363636;
padding: 3px 4px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
min-height: 6px;
}
.chatbox-title, .chatbox-title a.chat-title {
background: url(http://i72.servimg.com/u/f72/18/07/42/17/popup10.png) no-repeat scroll 75px 3px transparent;
font: 700 15px/1.3 Helvetica,Arial,sans-serif;
color: #fff;
}
.chatbox-title a.chat-title:hover {
  text-decoration: underline;
}
.chatbox-options li, .chatbox-options li a, .chatbox-options li label {
color: #fff;
}
body[bgcolor]{background: #FCFCFF;}
.main-content.chatbox {
  background-color: #FCFCFF;
  padding: 10px;
  border: 1px solid rgb(204, 204, 204);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  padding-bottom: 0px;
}
#chatbox_members {
background: rgb(246, 246, 248);
border: 1px solid rgb(204, 204, 204);
margin: 4px;
top: 43px;
bottom: 28px;
right: 10;
}
#chatbox_members .member-title {
background: url(http://i58.servimg.com/u/f58/18/24/85/15/gm-loo10.jpg) repeat-x bottom #363636;
color: #fff;
padding: 5px;
text-align: left;
padding: 8px 10px;
}
#chatbox p {
background: transparent;
padding: 5px;
line-height: 1.3em;
}
#chatbox p span[style="color:green;"], #chatbox p span[style="color:red;"] {
  background: #FAFAD2;
}
#chatbox_footer {
  background: transparent;
  border: 0px;
}
#chatbox_footer .right {
  float: left;
}
#chatbox_messenger_form .right {margin-left: 8px;font-size:0}
input#message.post {
font-family: inherit;
min-width: 430px;
color: #000;
font-size: 13px;
background-color: #fff;
padding: 3px;
margin-bottom: 2px;
border-width: 1px;
border-style: solid;
border-top-color: rgb(192,192,192);
border-right-color: rgb(233,233,233);
border-bottom-color: rgb(233,233,233);
border-left-color: rgb(192,192,192);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
outline: 0;
}
input#message.post:focus {
background: rgb(255,255,240) url('http://i58.servimg.com/u/f58/18/24/85/15/form-e10.png') repeat-x;
border-top-color: rgb(150,150,150);
border-bottom-color: rgb(230,230,230);
}
#submit_button, .fontbutton {
font-style: normal;
font-size: 12px;
font-family: Calibri,'Trebuchet MS',Verdana,Geneva,Arial,Helvetica,sans-serif;
color: rgb(0, 0, 0);
background: rgb(220,220,235) url('http://i58.servimg.com/u/f58/18/24/85/15/form-b10.png') repeat-x top;
padding: 0px 6px;
border: 1px solid rgb(221, 221, 235);
border-top-color: rgb(255, 255, 255);
border-bottom-color: rgb(179, 179, 189);
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-khtml-border-radius: 7px;
border-radius: 7px;
text-align: center;
-webkit-box-shadow: 0px 1px 4px 0px rgb(200,200,210);
-moz-box-shadow: 0px 1px 4px 0px rgb(200,200,210);
-khtml-box-shadow: 0px 1px 4px 0px rgb(200,200,210);
box-shadow: 0px 1px 4px 0px rgb(200,200,210);
text-shadow: 0 0 0 transparent, 0px -1px 2px white;
outline: none;
line-height: 23px;
display: inline-block;
cursor: pointer;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
height: 23px;
}
#submit_button {
margin-left: 13px;
}
#submit_button:hover, .fontbutton:hover {
color: black;
background-color: rgb(255,255,200);
border-color: rgb(255,255,200);
border-top-color: white;
border-bottom-color: rgb(190,190,170);
}
#simple-wrap {
  background:white;
}
#chatbox_top {
  min-height: 280px;
}
#chatbox{
  top: 43px;
  bottom: 28px;
  margin: 5px;
  background: rgb(246, 246, 248);
  border: 1px solid rgb(204, 204, 204);
  padding: 5px;
  right: 198px;
  left:0;
}
/* bordas */
.pun {
-moz-box-shadow: 0 5px 9px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 5px 9px rgba(0,0,0,0.2);
background: #fff;
border-radius: 0 0 6px 6px;
box-shadow: 0 5px 9px rgba(0,0,0,0.2);
line-height: 120%;
margin-bottom: 13px;
padding: 10px;
}

.main .main-head {
background: #000000 url(http://i57.servimg.com/u/f57/18/12/37/46/main-b10.png) repeat-x;color: #fff;
padding: 13px;
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
-webkit-box-shadow: rgba(0,0,0,0.3) 0px -1px 4px;
-moz-box-shadow: rgba(0,0,0,0.3) 0px -1px 4px;
box-shadow: rgba(0,0,0,0.3) 0px -1px 4px;
text-shadow: 1px 1px 1px #333;
margin-top: 8px;
}

.main .main-content {
background: #ffffff url(http://i57.servimg.com/u/f57/18/12/37/46/main-b10.png) repeat-x;
-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 4px;
-webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 4px;
border: 0;
border-radius: 0 0 3px 3px;
box-shadow: rgba(0,0,0,0.3) 0 1px 4px;
padding: 6px;
}
/* separação categoria */
.pun table.table td {border-bottom: 1px solid #F3F3F3;}

/* perfil */
.pun .user .user-ident .user-basic-info, .pun .user .user-info {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #FBFBFB url(http://i78.servimg.com/u/f78/17/96/03/52/highli10.png) repeat-x 0 0;
border: 1px solid #D9DBDD;
border-radius: 3px;
padding: 3px;
}

/* menu */

.mainmenu img {
margin-left: -5px;
margin-right: -5px;
}

/* estatísticas */
.stats_number {
font-size: 16px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
display: block;
text-align: center;
color: #BBB;
position: relative;
overflow: hidden;
}

.stats_number img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 15px;
}

.stats_text {
font-size: 10px;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
display: block;
text-align: center;
color: #DDD;
}

.hierarchy, .desc {
  margin-left: 11px;
}

/* teste estatistica */
#stats {
  background-color: transparent !important;
  font: 12px "helvetica",arial,sans-serif !important;
  margin-left: -120px !important;
  padding-bottom: 30px !important;
  color: #5A5A5A;
}
#stats a {
  color: #4A4A4A !important;
}
#stats p.right:after {
    color: #4A4A4A;
    content: "Total de Posts";
}
#stats p {
    color: rgba(0, 0, 0, 0) !important;
    float: left !important;
    margin-bottom: 2px;
    margin-right: 10px;
    margin-top: 2px;
}
#stats p strong {
  background: none repeat scroll 0 0 #E2E2E2;
  border: 1px solid #C9CDD0 !important;
  border-radius: 2px 2px 2px 2px;
  color: #4A4A4A;
  display: inline-block;
  font-weight: 700;
  margin-right: -65px !important;
  padding: 2px 6px;
}
#stats p:nth-of-type(2):after {
  color: #4A4A4A;
  content: "Total de Membros";
  margin-left: -20px !important;
}
#stats p:nth-of-type(2) strong {
  margin-left: -30px !important;
  margin-right: -93px !important;
}
#stats p:nth-of-type(3):after {
    color: #4A4A4A;
    content: "Membro Mais Recente";
}
#stats p:nth-of-type(3) {
    margin-left: 560px !important;
    margin-top: -18px !important;
    max-width: 251px !important;
    position: absolute;
}
#stats p:nth-of-type(3) strong {
  margin-right: 10px !important;
}
#onlinelist {
    border-top: 1px solid #D8D8D8 !important;
    margin-top: 10px !important;
}
#onlinelist {
    background-color: #F4F4F4;
    border-top: 1px dashed #CCCCCC;
    padding: 0.6em 1em;
}
#onlinelist p:nth-of-type(2) strong:nth-of-type(2):after {
    color: #4A4A4A;
    content: "\00A0\00A0\00A0\00A0Recorde\00A0 de\00A0Membros\00A0Online";
    font-size: 12px !important;
    font-weight: normal !important;
}
#onlinelist p:nth-of-type(2) strong:nth-of-type(2) {
    background: none repeat scroll 0 0 #E2E2E2;
  border: 1px solid #C9CDD0 !important;
    border-radius: 2px 2px 2px 2px;
    color: #4A4A4A;
    margin-left: 300px !important;
    margin-top: -60px !important;
    padding: 2px 6px;
    position: absolute !important;
    width: 7px;
}

/* quote, code, spoiler */
.codebox {
padding: 5px;
background: #FCFCFC;
border: 1px solid #E3E3E3;
overflow: auto;
font-size: 11px;
line-height: 170%;
}
.codebox dd {
background-color: transparent;
margin: .3em;
padding: .3em;
}
.codebox dt {border-bottom: 0px;}
.codebox.spoiler dt {
height: 24px;
line-height: 24px;
font-size: 11px;
padding: 0 10px;
background: #ECECEC url('http://i.imgur.com/psvFIEG.png') repeat-x 0 0;
border: 1px solid #D0D0D0;
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.1), inset rgba(255,255,255,0.7) 0px 1px 0px;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), inset rgba(255, 255, 255, 0.7) 0px 1px 0px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1), inset rgba(255, 255, 255, 0.7) 0px 1px 0px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
color: #616161;
text-shadow: white 0px 1px 0px;
display: inline-block;
white-space: nowrap;
cursor: pointer;
margin: 0px;
margin-left: 5px;
}
.codebox.spoiler dt:hover {
color: #4C4C4C;
background-color: #F8F8F8;
}
.codebox.spoiler {
background: transparent;
border: 0px;
}
.codebox.spoiler dd {background: transparent;}
.spoiler_content.hidden {
background: #FCFCFC;
border: 1px dashed #E3E3E3;
padding: 5px;
}
.postmain blockquote {
font-size: 12px;
padding: 10px;
border: 0px solid #E3E3E3;
background: none;
color: #9F9F9F;
margin-bottom: 5px;
}
.postmain blockquote div cite {
font-size: 12px;
padding: 8px 10px;
border: 0px solid #E3E3E3;
border-top: 0px;
border-bottom: 1px solid #E8E8E8;
background: none;
text-shadow: rgba(255, 255, 255, 1) 0px 1px 0px;
font-weight: bold;
margin: -10px -11px 8px -11px;
}

dd.cont_code, blockquote {
background-color: none!important;
}
dd.cont_code {
border: none!important;
}
/* avatar resposta rápida */
/*quick avatar*/
#quick-avatar {
    float: left;
    margin: 21px;
}
#quick-avatar img {
width: 50px;
height: 50px;
padding: 1px;
border: 1px solid #D5D5D5;
background: white;
}
#quick-avatar img:hover {
  border-color: #A1A1A1;
}

/*profile pro lado direito*/
#profile-advanced-right {
float: left;
width: 260px;
border-radius: 6px;
}
#profile-advanced-layout {
float: right;
margin-left: -360px;
width: 100%;
margin-right: 0px;
margin-top: 18px;
}
#profile-advanced-left {
margin-left: 265px;
margin-right: 0px;
}

/* cor do post */
.pun .post {background: #ffffff !important;}

/* borda quem está online */
#onlinelist img {border: 1px solid #000; padding: 3px;}

/* fundo preto bug */
.postfoot {
background: #FBFBFB url(http://i78.servimg.com/u/f78/17/96/03/52/highli10.png) repeat-x 0 0!important;
background-color: #222;
border: 1px solid #D9DBDD;
}

/* tentativa de deixar mais bonito separação de post */

.pun .posthead {
background:#f7f7f7;
border-bottom:1px dashed #ccc;
padding:.5em 1.3em .5em 1em
}

.pun .posthead {
background:#c7240a url(http://i57.servimg.com/u/f57/18/12/37/46/main-b10.png) repeat-x
}

.pun .posthead {
-moz-box-shadow:inset rgba(0,0,0,0.5) 0 1px 3px;
-webkit-box-shadow:inset rgba(0,0,0,0.5) 0 1px 3px;
background-color:#333535;
border:0;
box-shadow:inset rgba(0,0,0,0.5) 0 1px 3px;
font-weight:400;
height:25px;
line-height:25px;
padding:0 10px
}

.pun .posthead a {
color:#fff;
font-size:13px
}

.pun .posthead h2 {
color:#fff;
font-weight:400;
margin-top: 5px;
}

.pun .posthead h2 strong {
font-size:11px;
font-style:normal;
font-variant:normal;
font-weight:normal
}

.pun .posthead h2 strong:before {
content:'#'
}

.pun .posthead h2 strong img {
margin-left:3px;
margin-top:-2px;
max-height:12px;
opacity:.5
}

/* concertando bug dos icones dos topicos */
.status{
  float:left;
  position: none !important;
}
Se puder concertar. Vlw. >.<'
waghcwb
waghcwb
Desenvolvedores
Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

Icones dos tópicos encostando no titulo Empty Re: Icones dos tópicos encostando no titulo

Mensagem por waghcwb em Qua 05 Fev 2014, 9:09 am

Amigo você mexeu em algo mais no fórum que fez as coisas mudarem.. Por favor, retire os códigos que adicionou para que possamos retomar a solução do seu problema. A não ser que de agora para frente vá usar aqueles mini ícones, podemos arrumar também, sem problemas.
@Edit: Notei que você também pediu suporte em outra comunidade, se você está sendo ajudado aqui havia a necessidade disso? Foi justamente o código de lá que fez o que eu falei. Decida-se onde é que você vai buscar ajuda...



The quieter you become, the more you are able to hear

Icones dos tópicos encostando no titulo Btn_viewmy_160x25_pt_BR



study
avatar
Convidado
Convidado

Icones dos tópicos encostando no titulo Empty Re: Icones dos tópicos encostando no titulo

Mensagem por Convidado em Qua 05 Fev 2014, 9:29 am

Sim, sobre isso: lamento. Já retirei o código que fez as coisas mudarem.

Sobre este outro quesito, lamento também, apenas depois que percebi que isso é anti-ético, ainda assim gostaria de pedir para que você prosseguisse tentando me ajudar por aqui.
waghcwb
waghcwb
Desenvolvedores
Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

Icones dos tópicos encostando no titulo Empty Re: Icones dos tópicos encostando no titulo

Mensagem por waghcwb em Qua 05 Fev 2014, 9:47 am

Sem problemas amigo...
Tente o seguinte
Código:
.pun tbody.statused span.status {
position: inherit!important;
float: left;
}

A propriedade position: inherit vai fazer com que ele herde a propriedade position do elemento pai dele. Veja se resulta, em tese é para funcionar:
Icones dos tópicos encostando no titulo OUxMtY9

Não sei ao certo se é necessário o uso do !important, faça os testes !



The quieter you become, the more you are able to hear

Icones dos tópicos encostando no titulo Btn_viewmy_160x25_pt_BR



study
avatar
Convidado
Convidado

Icones dos tópicos encostando no titulo Empty Re: Icones dos tópicos encostando no titulo

Mensagem por Convidado em Qua 05 Fev 2014, 9:55 am

O código funcionou perfeitamente! Agradeço-lhe bastante, Wagner. Antes de fechar o tópico, você poderia me explicar o que a propriedade "inherit" faz exatamente? Estou tentando aprender também. >.<'
waghcwb
waghcwb
Desenvolvedores
Desenvolvedores

Time Online : 441d 9h 2m 53s
Mensagens : 719
Data de inscrição : 15/07/2013
Localização : Curitiba

Icones dos tópicos encostando no titulo Empty Re: Icones dos tópicos encostando no titulo

Mensagem por waghcwb em Qua 05 Fev 2014, 10:18 am

Com certeza amigo! Bom aqui não fechamos os tópicos para que todos possam expressar suas opiniões!
A propriedade inherit faz com que seu elemento 'herde' determinado valor do elemento 'pai' dele, no nosso exemplo como o elemento 'pai' do .status não tinha a propriedade position: absolute nós podemos fazer com que ele também 'herde' isso do pai dele sacou? Deixa eu te mostrar um exemplo prático aqui:
http://jsfiddle.net/sd4AH/embedded/result/

Veja o inherit fez nosso parágrafo herdar do elemento pai dele que é a div a propriedade border! É bem simples na verdade, essa propriedade é aceita em diversos elementos...

O código usado ali foi

HTML
Código:
<div>
    <p>Exemplo de herança CSS</p>
</div>

CSS
Código:
div{
    background: #eee;
    border-radius: 3px;
    padding: 10px;
    font: 13px Trebuchet MS;
    border: 1px solid #ddd;
}
p{
    border: inherit ;
    padding: 7px;
}

Ficou alguma dúvida?



The quieter you become, the more you are able to hear

Icones dos tópicos encostando no titulo Btn_viewmy_160x25_pt_BR



study
joelson0007
joelson0007
Moderadores
Moderadores

Time Online : 28d 21h 58m 5s
Mensagens : 373
Data de inscrição : 15/06/2013
Localização : Guarapuava-PR

Icones dos tópicos encostando no titulo Empty Re: Icones dos tópicos encostando no titulo

Mensagem por joelson0007 em Qua 05 Fev 2014, 10:44 am

nao sabia dessa, curtido
avatar
Convidado
Convidado

Icones dos tópicos encostando no titulo Empty Re: Icones dos tópicos encostando no titulo

Mensagem por Convidado em Qua 05 Fev 2014, 11:02 am

Acho que entendi. No caso, ele herdou o "1px solid #ddd;", né? Hmm. Obrigado, amigo! Curtido. =)'

Conteúdo patrocinado

Icones dos tópicos encostando no titulo Empty Re: Icones dos tópicos encostando no titulo

Mensagem por Conteúdo patrocinado


    Data/hora atual: Qui 14 Nov 2019, 5:10 pm