Верстка сайта Психолог по примеру макета PSD

Страница сайта"Психолог" созданная по примеру макета PSD.

1 симпатия

В макете есть кнопка “ЗАПИСАТЬСЯ НА ПРИЕМ” - при наведении на кнопку курсор меняется не по всей области.
Сделайте так, чтобы при наведении на кнопку курсор менялся не только на тексте.
Это нужно для того чтобы пользователь мог прейти по ссылке не только в момент нажатия на текст, но и на любой другой участок кнопки.

Поменял код. Теперь активной областью ссылки является не только область текста, но и вся область кнопки. Просто поместил div “button” в ссылку “a” и немного поменял стили. В стилях для кнопки добавил “display:inline-block” чтобы активная область ссылки не выходила за рамки кнопки.
Было:

<div class="button">
            <a href="#" class="zapis_link" > записаться на прием</a>
</div>

Стало:

<a href="#" class="zapis_link" > 
           <div class="button">
             записаться на прием
           </div>
 </a>

На GitHub все поменял и ссылка на домашнее задание, которую я выкладывал выше, актуальна.

1 симпатия

но это наверное тоже ну лучше решение. Этот див растягивается на всю ширину родителя и выходит за кнопку?

но это наверное тоже ну лучше решение. Этот див растягивается на всю ширину родителя и выходит за кнопку?

Нет. Я в стилях для класса “button” написал display: inline-block.. За счет этого див занимает не всю ширину родительского окна, а ведет себя как строчный элемент и не выходит за рамки кнопки. То есть курсор меняется только на самой кнопке, но рядом ведет себя как обычный курсор.
HTML

<div class="zapis_na_priem_2">
       <a href="#" class="zapis_link" > 
           <div class="button">
             записаться на прием
           </div>
       </a>
    </div>

CSS

div.button{
    background-color: #CB9223;
    width: 342px;
    height: 75px;
    font-size: 1.5em;
    text-align: center;
    line-height: 3;
    font-family: AdobeInvisFont,MyriadPro-Regular;
    text-transform: uppercase;
    display: inline-block;
}

А в первом случае кнопка находится внутри родительского дива который имеет position:absolute и видимо за счет этого проблемы выхода за кнопку нет. Курсор меняется только в пределах кнопки.
HTML

<div class="zapis_na_priem">
           <a href="#" class="zapis_link" >
                <div class="button">
                 записаться на прием
                </div>
           </a>
        </div>

CSS

div.zapis_na_priem{    
    position: absolute;
    bottom: 42px;
    right: 204px;  
}
div.button{
    background-color: #CB9223;
    width: 342px;
    height: 75px;
    font-size: 1.5em;
    text-align: center;
    line-height: 3;
    font-family: AdobeInvisFont,MyriadPro-Regular;
    text-transform: uppercase;
    display: inline-block;
}
1 симпатия