Jump to content
  • 0

выравнивание горизонтального меню с картинками


BlooDSikeR
 Share

Question

Здравствуйте,столкнулся с проблемой,не могу выровнять в горизонтальном меню картинки,сейчас это выглядит вот так http://slayers.zz.vc/ ,а нужно что бы ссылки были под картинками.

 

<style>

.menu_head{
float:right;
margin-top:17px;
display:table;
}
.menu_head li{
display:table-row;
float:left;
}
.menu_head li a{
display:table-cell;
text-align:center;
}

</style>

 

<ul class="menu_head">
<li><a href="#"><img src="img/home.png"/>Про комплекс</a></li>
<li><a href="#"><img src="img/key.png"/>Квартири</a></li>
<li><a href="#"><img src="img/shopping.png"/>Покупцям</a></li>
<li><a href="#" class="current"><img src="img/gallery.png"/>Галерея</a></li>
<li><a href="#"><img src="img/speaker.png"/>Новини</a></li>
<li><a href="#"><img src="img/email.png"/>Контакти</a></li>
</ul>
Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

Добавьте <br> после картинки.

О боже,на сколько все оказалось легко.А я что только не перепробовал. 

Спасибо большое!

Добавьте <br> после картинки.

а нет,не все так просто) https://yadi.sk/i/6UtfdBRzeuHYS

вот так и раньше получалось,а нужно что бы ссылки выравнивались в одну линию

Link to comment
Share on other sites

  • 0

нужно что бы ссылки выравнивались в одну линию

Так сделайте все картинки одинаковыми по высоте. Берёте самую высокую, допустим она будет 100px по высоте, и все остальные в фотошопе делаете такими же по высоте (если надо добавляете пустое место вокруг иконки).
Link to comment
Share on other sites

  • 0

 

нужно что бы ссылки выравнивались в одну линию

Так сделайте все картинки одинаковыми по высоте. Берёте самую высокую, допустим она будет 100px по высоте, и все остальные в фотошопе делаете такими же по высоте (если надо добавляете пустое место вокруг иконки).

 

ну дело в том что мне дали тестовое задание на собеседовании,и я пытаюсь сделать все максимально точно как на макете,не изменяя графических элементов)) а там картинки то разной высоты)вот практически завершил,остались маленькие нюансы http://f-picture.net/lfp/s018.radikal.ru/i527/1502/28/301bc95a4dca.png/htm

Edited by BlooDSikeR
Link to comment
Share on other sites

  • 0

В таком случае можно вообще убрать картинку из <a>, вместо этого задать <a> фиксированный отступ сверху (допустим те же 100px), а затем добавить картинку на бекграунд.

Или обернуть <img> в <span>, которому задать фиксированную высоту, а внутри выровнять картинку по вертикали.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Proxt
      Всем привет!
      Я только начинаю учиться верстать и хочу узнать,как сделать вот такое меню?
      Самое главное,что бы оно было адаптивным.
      Заранее спасибо)

    • By vano1208
      Подскажите, для чего горизонтальное меню оборачивать в ul>li, если можно обойтись только дескриптером '<a>'? Только чтобы меню формально было списком? В чем подвох и почему никто так не делает? Привожу ниже мой код и скриншот готового меню.
      <!DOCTYPE html><title>Test Page</title><meta charset = "utf-8"><link rel = "stylesheet" href = "style.css"><div> <nav> <a href="#">Home</a> <a href="#">Portfolio</a> <a href="#">About</a> <a href="#">Contacts</a> <a href="#">Forum</a> <a href="#">Support</a> <a href="#">Callback</a> </nav> <header></header></div>body { margin: 0; padding: 0; font-family: Arial;}body div { background: #eee; height: 1000px;}nav { display: block; background: #333; height: 34px;}nav a { color: white; display: block; float: left; line-height: 34px; padding: 0px 20px; text-decoration: none; font-size: 12px;}nav a:hover { background: #29b4f9;}header { background: #29b4f9; display:block; height: 150px;}
       
      P.S.: Может еще какие-то ошибки в коде есть, или можно написать как-то лучше — буду рад если не промолчите.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy