Блог

Главная - Вопросы по программированию - Ссылка на боковой панели отображается только по краям текста

Ссылка на боковой панели отображается только по краям текста

#html #css

#HTML #css

Вопрос:

Я хочу связать изображение и текст на боковой панели с новой страницей. «Зависшая рука» отображается только по краю страницы.

  • Боковая панель к правому краю просмотра.
  • Два вертикальных блока внутри боковой панели.
  • Три сегмента внутри каждого блока, слева — изображение, справа — текст.

Я хочу, чтобы «зависшая рука» отображалась по всему сегменту изображения и текста. Теперь она отображается только до правой границы сегмента. А когда окно сужается, «зависшая рука» вообще не отображается.

Может быть, вложенная структура здесь каким-то образом маскирует сегмент, а ссылка скрыта? Я попытался наложить три слоя: ссылка только на изображение, ссылка на сегмент, ссылка на блок. Ни один из них не работал нормально. Спасибо за вашу помощь!

 #menu{
    padding: 0;
    position: absolute;
    right:0px;
    top: 50px;
    width: 14em;
}

.vertical-1-of-2{
    height:50%;
}

.consumerstudies{
    border-left: 5px solid #008388;
    margin: 10px 0;
}

#menu p{
    color:#553b2f;
    font-size:60%;
    word-spacing: 1px;
    margin-top:5px;
    margin-bottom: 10px;
    width:100%;
    text-align: left;
}

.project-photo img{
    border-radius: 10%;
    max-width: 90%;
    float: right;
    margin-right: 2px;
} 
 <div id="menu">
                <div class="nav vertical-1-of-2">
                    <div class="consumerstudies">
                        <h3>Consumer Studies</h3>
                         <a href="{{ site.baseurl }}/projects.html" class="project-photo">
                            <div class="sidebar">
                                <div class="col span-1-of-4">
                                    <img src="vendors/images/cookie.jpg" alt="finding_perfect_chocolate_chip_cookie" style="width:100%">
                                </div>
                                <div class="col span-3-of-4">
                                    <h4>Cookie Recipe</h4>
                                    <p>Find the perfect chocolate chip cookie recipe</p>
                                </div>
                            </div>
                        </a>
                        
                    </div>
                </div>
        </div>

Комментарии:

1. Мне кажется, это работает: смотрите Это

2. Большое вам спасибо за подтверждение того, что это работает. Я понял, почему ссылки не работают. Главная панель закрывает ее. Раньше я устанавливал для нее ширину: 60em, и она распространялась на часть боковой панели. Позже я изменил его на ширину: 48em; и все ссылки на изображение и текст снова исправляются. Спасибо, что помогли мне!