Изображения для следующей/предыдущей навигации в блоге

Я пытаюсь сделать так, чтобы ссылки на следующую/предыдущую внизу моего блога отображались только с изображениями. У меня правильно настроено позиционирование и ссылки с изображениями, которые я также хочу использовать. Проблема в том, что ссылки работают только с текстом, который я использовал из исходного кода. У меня есть изображение, которое я хочу использовать в качестве фона div. Не могу понять, как сделать изображение ссылкой и удалить текст.

Ссылка на блог:

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

Что есть внутри моего PHP:

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

И CSS

.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 источник

Ответы (2)


arrow_upward
1
arrow_downward

попробуйте с:

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

Вам больше не нужен фон в вашем css

person billyJoe    schedule 12.12.2012

arrow_upward
1
arrow_downward

Примените фоновое изображение к якорям, а не к пролетам.

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

Вам также необходимо установить якоря как элементы блока:

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

И, наконец, используйте text-indent: -9999px, чтобы скрыть текст.

person Simone    schedule 12.12.2012