Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Entre para seguir isso  
Lerub

WordPress Problemas ao deixar imagem sobre o titulo (Wordpress)

Recommended Posts

Eu estou tentando fazer isso há dois dias. E eu ando enfrentando problemas. Eu nem fiz as alterações para ficar "mobile friendly" - o post já é - por que ainda não terminei isso. Eu vou postar os trechos de códigos aqui, más, por via das duvidas, eu irei deixar um link do "Pastebin", com todo o CSS.

E de preferência, eu sei que da para fazer isso sem AJAX. Então. para um website mais léve, só CSS.

 

https://pastebin.com/x2ZuD0Q0

 

O código "padrão" do titulo dos post's é esse:

 


.entry-title {
    font-family: Georgia, "Bitstream Charter", serif;
    font-size: 433%;    
        position: absolute;
  bottom:6%;

}

 

O "content single" é esse:

 

.single
.entry-title {
    margin-bottom:36%;
    position:relative;
    font-family: Georgia, "Bitstream Charter", serif;
    font-size: 313%;    
    z-index:1;

 

Eu insiro a imgem junto ao titulo e uso o elemento HTML figure.

<figure><img src="https://media.domain.com/thumbs/Thumb....png"></figure>

 

Da cérto, más, eu estou tendo alguns problemas. Eu executo o test com dois posts em meu site para testes. Cada um com uma imagem na resolução de 1920x1080. Talvez pelo fato de eu ter tido que ajustar uma delas para télas retanguláres  - é de 2007, se eu não me engano - esse bug acontéce.  A distancia de cada imagem do post e do topo é diferente.

 

Eu tentei deixar o título acima do post, já que, onde fica o post, fica uma parte sobrando, no topo. E eu tentei usar "position:fixed;", para dar aquele efeito  na rolagem. Deu cérto, más, ao reposicionar os elementos, tudo que está acima desaparéce.

 

Esse screenshot foi o máximo que eu consegui fazer.

 

https://lh3.googleusercontent.com/sGoOJmaCSIac7ZVwDsbtQtcPf_3jBh1NSsWP6v44zWrTsxo0KB0mbkF7ltvVu97MRs-ARw[/img]

 

Eu usei a ferramenta do "Mozilla Firefox" para tirar esse screenshot. Eu borrei o conteúdo para não correr o risco da moderação pensar que eu estou infringindo uma régra e divulgando o meu conteúdo.

 

agora, eu irei mostrar os códigos do "header.php", "content-single.php" e "index.php".

 

 

content-single.php

 

https://pastebin.com/AEy3bKWQ

 

header.php

 

https://pastebin.com/K55i8n2X

 

index.php

https://pastebin.com/PPT8TzCm

 

Eu já tentei tudo o que eu sei.

Editado por DiF

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu fiz algomas correções na CSS. Eu esqueci de adicionar img em


      }

.single,
.entry-title figure [b]img[/b]{
width:100%;
}

para ajustar as dimensões da imagem. Em seguida, eu fiz isso:

 



.single,
.entry-title figure {
        position:absolute;

    bottom:181.4%;
    height:0;
    z-index:-1;

        }

.single,
.entry-title figure img{
width:100%;
}

 

No título, eu eu fiz isso:

 


.single
.entry-title {
    bottom:36%;
    position:fixed;
    font-family: Georgia, "Bitstream Charter", serif;
    font-size: 313%;    
    z-index:-1;
    width:96%;
    
  }

 

Eu deixei o cabeçalho e o conteúdo com o fundo da mesma  cor que o body.

 

.single
#masthead {
    
    width:100%;
background:gray;
margin-bottom:44%;
display:table;
}

 

#page #content {
    background:gray;
    margin-bottom:-4%;
}

 

E eu fiz isso em body:

 


body {
    background: gray;
    position:absolute;
top:5%;
    width:99%;
}

 

agora, só falta a pagina inicial.

 

Edit:

 

Eu estou tendo problemas com a página inicial. Seja em porcentágem, pixels e outras medias... no desktop, a imagem do titulo fica sobrando espaço "vazio" embaixo e no tablet sóbra acima.

Editado por Lerub

Compartilhar este post


Link para o post
Compartilhar em outros sites

agora, em dispositivos móveis, sóbra abaixo, na página inicial. Eu já tentei corrigir com "@meida, más, não deu cérto.

 

.dublagemhentry h1  figure {
        position:absolute;
        bottom:49%;
        z-index:-1;
    height:100%;        
    }
   
.dublagemhentry h1  figure img {width:100%; transition:ease 0.6s;}

.dublagemhentry .hentry h1 a {
color:#ff6363;
}

.dublagemhentry h1:hover figure img {
    transition:ease 0.6s;
width:111%;
    
}

Editado por Lerub

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Entre para seguir isso  





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×