Make Next/Previous link div's clickable

  • Resolved eric_the_grey

    (@eric_the_grey)


    11 years, 2 months ago

    Hello;

    I’m creating a child-theme based off of twenty-ten, and so far, I’ve got almost everything I want/need for it worked out. The only thing I can’t figure out how to do is to turn the Next/Previous links at the bottom of the page into a clickable 40% wide x 25px high box. I’ve got the CSS in place so the hover works the way I want, except that only the text is clickable.

    This is what I’m using as in my loop-single.php file for single posts:

    <div id="nav-below" class="navigation">
<div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . '</span> %title' ); ?></div>
<div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . '</span>' ); ?></div>
</div><!-- #nav-below -->

    The nav-previous and nav-next div’s are what I want to have clickable. I’ve come across several examples of how to do this using standard HTML but nothing for PHP code.

    Sorry, but no link, as the site is still on my localhost pending uploading to the live site.

    Any suggestions on how to make this happen?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Michael

    (@alchymyth)

    11 years, 2 months ago

    possibly (untested) with:

    .nav-previous a, .nav-next a { display: block; }

    Thread Starter eric_the_grey

    (@eric_the_grey)

    11 years, 2 months ago

    Well, I never actually thought of doing it that way, but it worked. I did have to give it a height definition to make the clickable area fill up (nearly) the div, but it works, and much simpler than I though.

    .nav-previous a, .nav-next a {
	height: 35px;
	display: block;
}

    Thank you for the assistance.

    Eric the Grey

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Make Next/Previous link div's clickable’ is closed to new replies.