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:  
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.

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

Será que eu ainda tenho chances de ressuscitar esse tópico? Estou tendo outro problema. Eu não consigo deixar o elemento 2 no topo da págilna. So embaixo e ao lado. Eu vou passar os códigos.

 

HTML:

 

https://pastebin.com/dh6M4j3E

 

CSS:

 

https://pastebin.com/reKP9b0X

Editado por Lerub

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.

Editado por Lerub

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

Editado por Lerub

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
Postado (editado)

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


}

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






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

×