0

Пробую делать одно и тоже несколькими вариантами в качестве практики. Помогите пожауйста вместо того варианта как сделано переделать все списком ul и использовать :nth-child. Не используя классы для элементов li

Как я понимаю чтобы сделать это списком придется попариться с позиционированием. Наверное тогда и картинку нужно фоном вставлять, чтобы не мешала список позиционировать. И нужно ли иконки этих ссылок тоже делать через css вместе img..

И еще я видимо неправильно посчитала ширину элементов и отступов. В данном варианте центральная картинка перекрывает 3 пикселя у кнопок слева. Но получается как-то так, что она лежит чуть ниже, чем верхний элемент в наведенном состоянии. И поэтому кусочек верхнего элемента выглядывает из-за картинки

*,
*:before,
*:after {
  box-sizing: border-box;
}
.services{
  width: 980px;
}

.btn {
  display: inline-block;
  vertical-align: middle;
  /*padding: .5rem 1rem;*/
  text-transform: uppercase;
  color: #fff;
  background: #5b667a;
  text-decoration: none;
  margin: 36px 15px;
  height: 56px;
  width: 235px;
  padding-top: 18px;
  font-family: sans-serif;
  font-weight: bold;
}

.btn img {
  display: none;
}

.btn:hover img{
  display: block;
  margin: 12px auto;
}

.btn:hover{
  height: 128px;
  background: #6884ad;
  margin: 0 13px;
}

.otolaryngologist:hover{
  background: #ffcc29;
}

.row {
  text-align: center;
  overflow: hidden;
}

.left {
  width: 25%;
  float: left;
}

.right {
  width: 25%;
  float: right;
}

.center {
  width: 50%;
  float: left;
}

.center img {
  max-width: 100%;
  width: 100%;
  height: auto;
}
<div class="services">
  <div class="row">
    <a href="#" class="btn"><img src="images/pediatria.png" alt=""/>Педіатрія</a>
    <a href="#" class="btn"><img src="images/therapy.png" alt=""/>Терапія</a>
  </div>
  <div class="row">
    <div class="left">
      <a href="#" class="btn otolaryngologist"><img src="images/otolaryngologist.png" alt=""/>Отоларинголог</a>
      <a href="#" class="btn"><img src="images/cosmetology.png" alt=""/>Косметологія</a>
      <a href="#" class="btn"><img src="images/mamology.png" alt=""/>Мамологія</a>
      <a href="#" class="btn"><img src="images/dietology.png" alt=""/>Дієтологія</a>
      <a href="#" class="btn"><img src="images/urology.png" alt=""/>Урологія</a>
      <a href="#" class="btn"><img src="images/surgery.png" alt=""/>Хірургія</a>
      <a href="#" class="btn"><img src="images/usd.png" alt=""/>Узд</a>
      <a href="#" class="btn"><img src="images/laboratory.png" alt=""/>Лабораторія</a>
    </div>
    <div class="center">
      <img src="https://i.stack.imgur.com/H8zsJ.png" alt=""/>
    </div>
    <div class="right">
      <a href="#" class="btn"><img src="images/neurology.png" alt=""/>Неврологія</a>
      <a href="#" class="btn"><img src="images/dermatology.png" alt=""/>Дерматологія</a>
      <a href="#" class="btn"><img src="images/cardiology.png" alt=""/>Кардіологія</a>
      <a href="#" class="btn"><img src="images/traumatology.png" alt=""/>Травматологія</a>
      <a href="#" class="btn"><img src="images/gynecology.png" alt=""/>Гінекологія</a>
      <a href="#" class="btn"><img src="images/proctology.png" alt=""/>Проктологія</a>
      <a href="#" class="btn"><img src="images/manual_therapy.png" alt=""/>Мануальна терапія</a>
      <a href="#" class="btn"><img src="images/physiotherapy.png" alt=""/>Фізіотерапія</a>
    </div>
  </div>  
  <div class="row">
    <a href="#" class="btn"><img src="images/massage.png" alt=""/>Масаж</a>
  </div>
</div>

8
  • Добро пожаловать на Stack Overflow на русском. Здесь принято помогать, а не делать работу за других. Покажите пожалуйста как Вы пробовали сделать новую верстку самостоятельно и укажите, что у Вас не получилось сделать.
    – Alex
    2 ноя 2016 в 11:26
  • @Alex с новой версией я пока что мучаюсь, а вот на счет пару пикселей которые видны при наведении на верхний левый элемент не подскажите? возможно там лишнее margin: 0 13px; но без этого все ломается
    – amaymon
    2 ноя 2016 в 11:32
  • Вам нужно, чтобы отступы слева и справа от картинки были одинаковые и чтобы верхние кнопки не выходили за границу картинки?
    – Alex
    2 ноя 2016 в 11:36
  • @Alex да, но сейчас левые и правые кнопки немного со сдвигом вправо
    – amaymon
    2 ноя 2016 в 11:44
  • более простой вариант, чтобы слева и справа расстояние до картинки было одинаковым, Вам нужно увеличить ширину .left и .right и уменьшить .center. Но и кнопки вверху нужно будет уменьшить. Пример.
    – Alex
    2 ноя 2016 в 11:52

1 ответ 1

0

*,
*:before,
*:after {
  box-sizing: border-box;
}
.services {
  width: 980px;
}
.btn {
  display: inline-block;
  vertical-align: middle;
  /*padding: .5rem 1rem;*/
  text-transform: uppercase;
  color: #fff;
  background: #5b667a;
  text-decoration: none;
  margin: 36px 15px;
  height: 56px;
  width: 179px;
  padding-top: 18px;
  font-family: sans-serif;
  font-weight: bold;
}
ul:nth-child(2)>li:nth-child(1) .btn,
ul:nth-child(2)>li:nth-child(3) .btn{
  width:238px;
}
.btn img {
  display: none;
}
.btn:hover img {
  display: block;
  margin: 12px auto;
}
.btn:hover {
  height: 128px;
  background: #6884ad;
  margin: 0 13px;
}
.otolaryngologist:hover {
  background: #ffcc29;
}
ul {
  list-style-type: none;
  text-align: center;
  overflow: hidden;
  padding: 0;
}
ul:nth-child(1)>li {
  display: inline-block;
}
ul:nth-child(2)>li {
  float: left;
}
ul:nth-child(2)>li:nth-child(1) {
  width: 30%;
}
ul:nth-child(2)>li:nth-child(3) {
  width: 30%;
}
ul:nth-child(2)>li:nth-child(2) {
  width: 40%;
}
ul:nth-child(2) li:nth-child(2) img {
  max-width: 100%;
  width: 100%;
  height: auto;
}
<div class="services">
	<ul>
		<li><a href="#" class="btn"><img src="images/pediatria.png" alt=""/>Педіатрія</a></li>
		<li><a href="#" class="btn"><img src="images/therapy.png" alt=""/>Терапія</a></li>
	</ul>
	<ul>
		<li>
			<ul>
				<li><a href="#" class="btn otolaryngologist"><img src="images/otolaryngologist.png" alt=""/>Отоларинголог</a><li>
				<li><a href="#" class="btn"><img src="images/cosmetology.png" alt=""/>Косметологія</a><li>
				<li><a href="#" class="btn"><img src="images/mamology.png" alt=""/>Мамологія</a><li>
				<li><a href="#" class="btn"><img src="images/dietology.png" alt=""/>Дієтологія</a><li>
				<li><a href="#" class="btn"><img src="images/urology.png" alt=""/>Урологія</a><li>
				<li><a href="#" class="btn"><img src="images/surgery.png" alt=""/>Хірургія</a><li>
				<li><a href="#" class="btn"><img src="images/usd.png" alt=""/>Узд</a><li>
				<li><a href="#" class="btn"><img src="images/laboratory.png" alt=""/>Лабораторія</a><li>
			</ul>
		</li>
		<li>
			<img src="https://i.stack.imgur.com/H8zsJ.png" alt=""/>
		</li>
		<li>
			<ul>
				<li><a href="#" class="btn"><img src="images/neurology.png" alt=""/>Неврологія</a><li>
				<li><a href="#" class="btn"><img src="images/dermatology.png" alt=""/>Дерматологія</a><li>
				<li><a href="#" class="btn"><img src="images/cardiology.png" alt=""/>Кардіологія</a><li>
				<li><a href="#" class="btn"><img src="images/traumatology.png" alt=""/>Травматологія</a><li>
				<li><a href="#" class="btn"><img src="images/gynecology.png" alt=""/>Гінекологія</a><li>
				<li><a href="#" class="btn"><img src="images/proctology.png" alt=""/>Проктологія</a><li>
				<li><a href="#" class="btn"><img src="images/manual_therapy.png" alt=""/>Мануальна терапія</a><li>
				<li><a href="#" class="btn"><img src="images/physiotherapy.png" alt=""/>Фізіотерапія</a><li>
			</ul>
		</li>
	</ul>  
	<ul>
		<li><a href="#" class="btn"><img src="images/massage.png" alt=""/>Масаж</a></li>
	</ul>
</div>

UPD:

И еще я видимо неправильно посчитала ширину элементов и отступов. В данном варианте центральная картинка перекрывает 3 пикселя у кнопок слева.

Проблема возникает из-за неправильных размеров блоков. Для решения проблемы ширина левого и правого блока увеличена, центральной части с картинкой уменьшена. Кроме этого, чтобы верхние кнопки не выходили за границу картинки, их ширина уменьшена до 179px.

2

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.