Gambar untuk navigasi selanjutnya/sebelumnya untuk sebuah blog

Saya mencoba agar tautan berikutnya/sebelumnya di bagian bawah blog saya muncul hanya dengan gambar. Saya telah mengatur posisi dan tautan dengan benar dengan gambar yang ingin saya gunakan juga. Masalahnya adalah tautan tersebut hanya berfungsi pada teks yang saya gunakan dari kode aslinya. Saya memiliki gambar yang ingin saya gunakan sebagai latar belakang div. Saya tidak tahu cara menjadikan gambar itu tautan dan menghapus teksnya.

Tautan ke blog:

http://www.conutant.org/test-box/

Apa yang ada di dalam PHP saya:

<div id="bottomnavigation">
    <?php if($single) { ?>
        <div class="nextprev">
            <span class="prev"><?php previous_post('&lsaquo;&lsaquo;&lsaquo; %', 'PREVIOUS TUTORIAL', 'no', 'no'); ?></span>

            <a href="http://www.conutant.org"><div id="homeicon"></div></a>

            <span class="next"><?php next_post('% &rsaquo;&rsaquo;&rsaquo;', 'NEXT TUTORIAL', 'no', 'no'); ?></span>
        </div>
    <?php } ?>
</div>

Dan CSSnya

.nextprev {
    height: 100px;
}

.nextprev .prev {
    float: left;
    height: 100px;
    width:200px;
    background: url(http://www.conutant.org/wp-content/uploads/2012/12/Prev.png);
    background-repeat: no-repeat;
    background-position: left top;
    margin-left: 19px;
}

.nextprev .next {
     float: right;
     height: 100px;
     width:186px;
     background: url(http://www.conutant.org/wp-content/uploads/2012/12/next.png);
     background-repeat: no-repeat;
     background-position: left top;
}

navigation wordpress css
person Dustin Myers    schedule 12.12.2012    source sumber

Jawaban (2)


arrow_upward
1
arrow_downward

coba dengan:

<div id="bottomnavigation">

<?php if($single) { ?>
<div class="nextprev">
<span class="prev"><img src="http://www.conutant.org/wp-content/uploads/2012/12/Prev.png" alt="<?php previous_post('&lsaquo;&lsaquo;&lsaquo; %', 'PREVIOUS TUTORIAL', 'no', 'no'); ?>" /></span>
<a href="http://www.conutant.org"><div id="homeicon"></div></a>
<span class="next"><img src="http://www.conutant.org/wp-content/uploads/2012/12/next.png" alt="<?php next_post('% &rsaquo;&rsaquo;&rsaquo;', 'NEXT TUTORIAL', 'no', 'no'); ?>"</span>
</div>
<?php } ?>


</div>

Anda tidak memerlukan latar belakang di css Anda lagi

person billyJoe    schedule 12.12.2012

arrow_upward
1
arrow_downward

Terapkan gambar latar belakang pada jangkar, bukan pada bentang.

.prev a {
 float: left;
 background: url(http://www.conutant.org/wp-content/uploads/2012/12/Prev.png);
}

.next a {
 float: right;
 background: url(http://www.conutant.org/wp-content/uploads/2012/12/next.png);
}

Anda juga perlu mengatur jangkar sebagai elemen blok:

.prev a,
.next a {
 display:block;
}

Dan terakhir gunakan text-indent: -9999px untuk menyembunyikan teks.

person Simone    schedule 12.12.2012