Блог

Главная - Вопросы по программированию - Два изображения рядом с эффектом наведения в CSS

Два изображения рядом с эффектом наведения в CSS

#html #css

#HTML #css

Вопрос:

У меня есть два изображения, которые я хочу разместить рядом с эффектами наведения. Мне удалось расположить их рядом … но я бы хотел, чтобы изображения располагались по центру под изображением логотипа.

CSS:

     a.btn1 {
display: inline-block;
float: left;
width: 332px;
height: 85px;
cursor: pointer;
background-image: url(images/bttn_model.png);
text-indent: -9999em;
margin: 
}
a.btn1:hover {
background-image: url(images/bttn_model_over.png);
}

a.btn2{
display: inline-block;
width: 332px;
height: 85px;
cursor: pointer;
background-image: url(images/bttn_photographers.png);
text-indent: -9999em;
}
a.btn2:hover {
background-image: url(images/bttn_photographers_over.png);
}

}

HTML:

 <body>

<div align="center">
  <p>amp;nbsp;</p>
  <p><img src="images/logo.gif" width="618" height="85" /></p>
</div>
<p>amp;nbsp;</p>
<div align="center"><a href="#" class="btn1">Models</a>


<div align="center"><a href="#" class="btn2">Photographers</a>
</div>

</div>
<p>amp;nbsp;</p>
</body>
</html>

Ответ №1:

Вы должны обернуть 2 изображения в один div, чтобы вы могли центрировать этот div следующим классом

 .centerDiv
{
    width: 50%;
    margin: 0 auto;
}

Ответ №2:

Один из возможных способов сделать то, что вы хотите, следующий.

HTML

 <div class="logo">
<img src="images/logo.gif" width="618" height="85" />
</div>
<div class="pictures">
    <a href="#" class="btn1">Models</a>
    <a href="#" class="btn2">Photographers</a>
</div>

CSS

 .logo {
    text-align: center;
}
.pictures {
    text-align: center;
}
.pictures a {
    cursor: pointer;
    display: inline-block;
    width: 332px;
    height: 85px;
    text-indent: -9999em;
}
.btn1 {
    background-image: url('images/bttn_model.png');
}
.btn1:hover {
    background-image: url('images/bttn_model_over.png');
}

.btn2{
    background-image: url('images/bttn_photographers.png');
    /* next margin-left is to fix the space between */
    /* images that because of the inline-block */
    /* margin-left: -4px; */
}
.btn2:hover {
    background-image: url('images/bttn_photographers_over.png');
}

Использование таких атрибутов align сейчас не очень хорошая практика. Для этого есть решение в CSS.

display: inline-block float: left В этом случае использование and не требуется, пока оно уже находится в одной строке с display .

Если вы хотите использовать <p>amp;nbsp;</p> вместо margin amp; padding , это вернет их обратно, но лучше придерживаться margin amp; padding

Метки: