Ir ao conteúdo
  • Cadastre-se
Lerub

WordPress RESOLVIDO 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.

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.

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%;
    
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Lerub Olá,  Poderia postar alguns prints do problema?  Além disso, postar os códigos pelo pastebin não é uma boa ideia. Pois muita gente não pode acessar se estiver em lugares com bloqueio.

Por isso sugiro que poste aqui os códigos  usando o botão CODE <>.

 

2 horas atrás, Lerub disse:

Será que eu ainda tenho chances de ressuscitar esse tópico? Estou tendo outro problema.

se este outro problema for relacionado ao mesmo site, sim.   Se for outro aí deve ser feito um novo tópico.

Compartilhar este post


Link para o post
Compartilhar em outros sites

HTML:


<?php

/**

* The main template file.

*

* This is the most generic template file in a WordPress theme

* and one of the two required files for a theme (the other being style.css).

* It is used to display a page when nothing more specific matches a query.

* E.g., it puts together the home page when no home.php file exists.

* Learn more: http://codex.wordpress.org/Template_Hierarchy

*

* @bpackage Reddle

* @since Reddle 1.0

*/

 

get_header(); ?>

 

        <div id="primary">

            <div id="content" role="main">

 

            <?php if ( have_posts() ) : ?>

 

               

               

   

                <?php reddle_content_nav( 'nav-above' ); ?>

 

                <?php /* Start the Loop */ ?>

                           

                <?php while ( have_posts() ) : the_post(); ?>

 

               

                    <?php

                        /* Include the Post-Format-specific template for the content.

                         * If you want to overload this in a child theme then include a file

                         * called content-___.php (where ___ is the Post Format name) and that will be used instead.

                         */

                        get_template_part( 'content', get_post_format() );

                    ?>

 

                <?php endwhile; ?>

 

                <?php reddle_content_nav( 'nav-below' ); ?>

 

            <?php else : ?>

 

                <article id="post-0" class="post no-results not-found">

                    <header class="entry-header">

                        <h1 class="entry-title"><?php _e( 'Nothing Found', 'reddle' ); ?></h1>

                    </header><!-- .entry-header -->

 

                    <div class="entry-content">

                        <p><?php _e( 'It seems we can&rsquo;t find what you&rsquo;re looking for. Perhaps searching can help.', 'reddle' ); ?></p>

                        <?php get_search_form(); ?>

                    </div><!-- .entry-content -->

                </article><!-- #post-0 -->

 

            <?php endif; ?>

               

<div class="element1"><?php

/**

* A ... Category Template

*/

 

?>

 

<section id="primary" class="site-content">

<div id="content" role="main">

<?php

// Check if there are any posts to display

if ( have_posts() ) : ?>

 

 

<?php

 

// The Loop

 

global $query_string;

query_posts("{$query_string}cat=629&posts_per_page=3");

 

 

while ( have_posts() ) : the_post(); ?>

 

<div class="hentry music">

 

 

 

<h1 class="entry-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>

<small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>

<?php the_post_thumbnail(); ?>

<?php the_excerpt(); ?>

 

 <p class="postmetadata"><?php

 comments_popup_link( 'No comments yet', '1 comment', '% comments', 'comments-link', 'Comments closed');

?></p>

</div>

 

<?php endwhile;

 

else: ?>

<p>Sorry, no posts matched your criteria.</p>

 

 

<?php endif; ?>

</div>

</section>

 

   

   

 

 

                    </div>

 

<div class="element2"><?php

/**

* A ... Category Template

*/

 

?>

 

<section id="primary" class="site-content">

<div id="content" role="main">

<?php

// Check if there are any posts to display

if ( have_posts() ) : ?>

 

 

 

<?php

 

// The Loop

 

global $query_string;

query_posts("{$query_string}cat=623&posts_per_page=3");

 

 

while ( have_posts() ) : the_post(); ?>

 

<div class="hentry music">

 

 

 

<h1 class="entry-title"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>

<small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>

<?php the_post_thumbnail(); ?>

<?php the_excerpt(); ?>

 

 <p class="postmetadata"><?php

 comments_popup_link( 'No comments yet', '1 comment', '% comments', 'comments-link', 'Comments closed');

?></p>

</div>

 

<?php endwhile;

 

else: ?>

<p>Sorry, no posts matched your criteria.</p>

 

 

<?php endif; ?>

</div>

</section>

                    </div>

                   

            </div>

 

           

            </div>

 

 

 

 

 

 

 

            <!-- #content -->

        <!-- #primary -->

 

 

 

<?php get_sidebar(); ?>

<?php get_footer(); ?>

 

CSS:


.element1 .hentry {

background:white;

width:43%;

font-size:124%;

clear:left;

 

   

   

}

 

.element1.hentry h1 {

font-size:143%;

   

   

}

 

.element1 .hentry h1 a {

color:green;

    background:rgba(0,0,0,0);

    transition:ease 0.6s;

}

 

.element1 .hentry h1 a:hover {

text-decoration:none;

    transition:ease 0.6s;

    opacity:.96;

}

 

 

 

 

 

.element2 .hentry  {

background:white;

width:43%;

font-size:124%;

clear:right;

    display:flex;

    position:relative;

    left:47%;

}

 

.element2 .hentry h1 {

font-size:143%;

   

  bottom:8%;

   

}

 

.element2 .hentry h1 a {

color:#836fff;

    transition:ease 0.6s;

}

 

.element2 .hentry h1 a:hover {

text-decoration:none;

    transition:ease 0.6s;

    opacity:.96;

}

 

Screenshot:

 

https://screenshots.firefox.com/ClcoiQyPZG74MGCU/beta.suitedosnerds.com

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Lerub Então, estava vendo o código e o print... mas ainda fico sem entender, qual seu objetivo.

O "elemento 2" pelo que eu vi no código, usa ids iguais ao do elemento1.  Lembre-se de que ID não pode ser repetido. Somente class.

 

Por gentileza, poderia explicar com mais detalhes o que você quer fazer ali? 

No aguardo.

 

Att,

Moderador DiF

Compartilhar este post


Link para o post
Compartilhar em outros sites

ID's?! Onde viu isso? No PHP com HTML?

 

O que eu pretendo fazer é posicionar o elemento com 3 - ou mais - post's de uma categoria mais para cima e ao lado do elemento 1. Eu já tentei com float:right e clear:right e até colocar o elemento 2 acima do 1. E eu pretendo fazer de maneira que o torne responsivo.

 

Edit

 

Eu vou dar uma arriscada e ver o que o w3c validator faz com o código.

 

Result:

 

No errors.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Lerub Desculpe, mas meio que ainda ficou uma incógnita o que você queria fazer.

Falando em elementos.... e etc... o ideal é que você expresse tudo de forma mais clara possível. Estes elementos que você fala é onde contem os posts? 

 

Se for isso, você pode usar o inline-block para fazer eles ficarem lado a lado. Pode usar o Flex...  

Enfim... se conseguiu resolver, por gentileza poderia postar a sua solução? Assim você ajudaria os demais!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ao topo, tem os ultimos posts. Abaixo, uma categoria com três posts e eu pretendo posicionar outra categoria ao lado.

 

Edit

 

Well... eu posicionei em relativo e me dei conta que o mesmo não aceita "%". Como eu inseri aquéla tag do Viewport, eu vou ver como irá ficar no smartphone e no vélho tablet de 2013.

 

Andamento:

 

Para se ajustar bem em portrait eu fiz isso:

 



@media only screen and (orientation: portrait) {
    /* For mobile phones: */
        .hentry p {
        font-size:183%;
        
    }
     .hentry {margin-top:-3.6%; }

.suitehentry .hentry {
background:white;
width:93%;
position:relative;
top:2.3em;
left:2em;
        display:inline-block;
}


.suitenewshentry .hentry {
background:white;
width:93%;
        display:inline-block;
}

    
    #colophon {margin-top:93%;}
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

No tablet - em landscape - a posição de uma das categorias é um pouco mais baixa. Enfim... isso não atrapalha em nada.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu  estou tendo problemas com submenus. Se eu aumento demais o tamanho da fonte, os carácteres são cortados.

 

 

Screenshot_2018-07-02-13-31-57.thumb.png.ad68b6e9792f5e4f8b226990ef2c48ed.png

 

Relevem o texto. É um campo de testes.

 

 

O CSS padrão é esse:


.theblogmenu {
position:relative;
left:16%;
width:63%;
}

.theblogmenu ul {
    list-style:none;
    margin:0;
    padding:0;
}

.theblogmenu ul:before,.theblogmenu ul:after {
    content:"";
    display:table;
}
.theblogmenu ul:after {
    clear:both;
}
.theblogmenu ul > li {
    float:left;
    position:relative;
}
.theblogmenu a {
    display:block;
    padding:10px 20px;
    line-height:1.2em;
    text-decoration:none;
font-weight:bold;
color:     #ffbc69;

font-size:233%;
}
.theblogmenu a:hover {
    text-decoration:none;
    background:#595959;
}
.theblogmenu li ul {
    background:rgba(130,130,130,0.86);
  position:absolute;
    left:0;
    top:64px;
    z-index:1;
}
.theblogmenu li ul li {
    width:200px;
 overflow:hidden;
    height:0;
    transition:all 200ms ease-in;
}
.theblogmenu li ul a {
    border:none;
}
.theblogmenu li ul a:hover {
    background:rgba(255,181,197,0.2);
}

.theblogmenu ul > li:hover ul li {
    height:56px;
font-size:63%;
}

 

O Portrait é esse:


@media only screen and (orientation: portrait) {
    /* For mobile phones: */  

 	

	.theblogmenu {
	position:relative;
	left:16%;	

}

.theblogmenu ul li a {

    
font-size:633%;
}
.theblogmenu li ul  {
    background:rgba(130,130,130,0.86);
  position:absolute;
    left:0;
    top:64px;
    z-index:1;
display:block;
    width:160%;

}


.theblogmenu ul > li:hover ul li  {


font-size:163%;
    
}


    
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Já fazem hóras que eu resolvi o problema do menu. Em bréve eu mando a CSS.

 

[b[Result:[/b[

 

No CSS padrão, eu defini um valor auto em width.

 


.theblogmenu {
position:relative;
left:16%;
width:63%;
}

.theblogmenu ul {
    list-style:none;
    margin:0;
    padding:0;
}

.theblogmenu ul:before,.theblogmenu ul:after {
    content:"";
    display:table;
}
.theblogmenu ul:after {
    clear:both;
}
.theblogmenu ul > li {
    float:left;
    position:relative;
}
.theblogmenu a {
    display:block;
    padding:10px 20px;
    line-height:1.2em;
    text-decoration:none;
font-weight:bold;
color:     #ffbc69;

font-size:233%;
}
.theblogmenu a:hover {
    text-decoration:none;
    background:#595959;
}
.theblogmenu li ul {
    background:rgba(130,130,130,0.86);
  position:absolute;
    left:0;
    top:64px;
    z-index:1;
}
.theblogmenu li ul li {
    width:auto;
 overflow:hidden;
    height:0;

}
.theblogmenu li ul a {
    border:none;
}
.theblogmenu li ul a:hover {
    background:rgba(255,181,197,0.2);
}

.theblogmenu ul > li:hover ul li {
    height:auto;
font-size:63%;
}


 

Para mobile, fiz isso:

 

@media only screen and (orientation: portrait) {
    /* For mobile phones: */
            .hentry p {
        font-size:293%;
        
    }
 
.theblogmenu {
position:relative;
left:16%;

}


    


.theblogmenu ul li   {

    
font-size:233%;
}

.theblogmenu li ul li  a {

    position:relative;
font-size:263%;
    margin-top:1em;
}


}

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

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





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

×