Previous/Next php responsive themes. (Code included)

  • dend359

    (@dend359)


    12 years, 11 months ago

    Hi guys,

    I have this as my code for a previous/next “button”

    <?php previous_post_link('%link', '<img src="http://aaaa.com/wp-content/uploads/aaa/05/back-arrow.png"/>', TRUE); ?>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<?php next_post_link('%link', '<img src="http://aaaaaaa.com/wp-content/uploads/aaa/05/next-arrow.png"/>', TRUE); ?>

    My question is, what is a much cleaner way to make a function where instead of using &nbsp a thousand times, how can I simply make the previous button float on the left, and the next button float on the right?

    Thank you for any help! 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • esmi

    (@esmi)

    12 years, 11 months ago

    Try using CSS – not markup – to position page elements.
    CSS Tutorials
    Learning CSS

    Phil

    (@owendevelopment)

    12 years, 11 months ago

    Wrap them in a div then float and clear them:

    <div class="floatleft">
<?php previous_post_link('%link', '<img src="http://aaaa.com/wp-content/uploads/aaa/05/back-arrow.png"/>', TRUE); ?>
</div>
<div class="floatleft">
<?php next_post_link('%link', '<img src="http://aaaaaaa.com/wp-content/uploads/aaa/05/next-arrow.png"/>', TRUE); ?>
</div>
<div class="clear"></div>

    and in CSS…

    .floatleft {
float: left;
}

.floatright {
float: right;
}

.clear {
clear: both;
}

    Try that. 🙂

    Thread Starter dend359

    (@dend359)

    12 years, 11 months ago

    Thank you so much, this works wonder!

    Also, I want to put it out there that you have to be careful when placing

    .floatleft {
float: left;
}

.floatright {
float: right;
}

.clear {
clear: both;
}

    in certain areas of your CSS files! I didn’t get it working at first because of putting this css style at places where it was in conflict with the others.

    Phil

    (@owendevelopment)

    12 years, 10 months ago

    They were examples, you can edit the class names in the HTML if you’re theme already has classes that do this.

    Thread Starter dend359

    (@dend359)

    12 years, 9 months ago

    Hi there,

    I’ve ran into another problem trying to wrap a border inside these floating objects. This is what I have added in my css file:

    .navigationwrap {

border: 2px solid #cfcfcf;
box-shadow: 0px 5px 5px #888;
padding: 9px;

}

    Then when I go to close it ( <div class=”navigationwrap”>My stuff</div>)
    it doesn’t seem to show up.

    Am I doing something wrong here?

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Previous/Next php responsive themes. (Code included)’ is closed to new replies.