5

Всем привет!

Начал потихоньку разбираться с HTML и CSS сразу подкатила небольшая работка. Так как я только учусь всех нюансов не знаю. Имеется меню в котором текст должен быть написан на звездочках, звездочки(они разного цвета) являются картинками и требуется поместить ссылку в них. Уже пытался это сделать с помощью position: relative и absolute. Выравнивал текст по первой ссылке и получалось так, что 1 ссылка становилась ровно в центр, а остальные 4 съезжали влево с помощью padding исправить это не удавалось, так как кол-во букв разное и все равно в какую-то сторону ссылки съезжали.

Кусочек кода HTML:

            <nav>
                <li><img src="img/star1.png" alt=""><a href="#">Avaleht</a></li>
                <li><img src="img/star1.png" alt=""><a href="#">Broneeri</a></li>
                <li><img src="img/star1.png" alt=""><a href="#">Reeglid</a></li>
                <li><img src="img/star1.png" alt=""><a href="#">Hinnad</a></li>
                <li><img src="img/star1.png" alt=""><a href="#">Galerii</a></li>
            </nav>

Здесь картинки одинаковые, так как 5 с разными цветами прикладывать я думаю не имеет смысла.

CSS:

nav {
   float: right;
}

nav li {
   float: left;
   display: block;
   position: relative;
}

nav img {
   height: 150px;
   width: 150px;
}

nav li a {
   position: absolute;
   top: 50px;
   right: 15px;
   color: #fff;
   text-decoration: none;
   text-transform: uppercase;
   text-shadow: 5px 6px 10px #000000;
   font-size: 27px;
   font-family: "Roboto", sans-serif;
}

Может это у меня руки не из того места растут, но вроде я делаю все правильно. Возможно это можно выровнять через child, но я уверен есть более простой способ.

Картинка:Картинка

У меня получается вот такая вот фигня:

P.S. каждая ссылка должна быть в центре звезды.

1 ответ 1

4

img {
  width: 100px;
  height: 100px;
  float: left;
}

a {
  display: inline-block;
  position: absolute;
  top: 40px;
  left: 25px;
}

li {
  display: inline-block;
  position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
</head>

<body>
  <nav>
    <li><img src="http://pngimg.com/uploads/star/star_PNG41531.png" alt=""><a href="#">Avaleht</a></li>
    <li><img src="http://pngimg.com/uploads/star/star_PNG41531.png" alt=""><a href="#">Broneeri</a></li>
    <li><img src="http://pngimg.com/uploads/star/star_PNG41531.png" alt=""><a href="#">Reeglid</a></li>
    <li><img src="http://pngimg.com/uploads/star/star_PNG41531.png" alt=""><a href="#">Hinnad</a></li>
    <li><img src="http://pngimg.com/uploads/star/star_PNG41531.png" alt=""><a href="#">Galerii</a></li>
    <li><img src="http://pngimg.com/uploads/star/star_PNG41531.png" alt=""><a href="#">Galerii</a></li>
    <li><img src="http://pngimg.com/uploads/star/star_PNG41531.png" alt=""><a href="#">Galerii</a></li>
  </nav>
</body>
</html

4
  • Только лучше бы вместо img использовать background.
    – Qwertiy
    19 июл 2018 в 22:11
  • @Qwertiy Я делал в соответсвии как попросили. Он привел пример свой, я исправил. 19 июл 2018 в 22:12
  • 2
    Можно использовать не отступы left и top у <a>, которые поломают верстку, если в ссылке будет несколько строк или текст будет короче, а transform: translate(-50%, -50%); left: 50%; top: 50%; text-align: center 19 июл 2018 в 22:34
  • Спасибо за ответы! Проверю чутка позже. P.S. Использовать background вместо img крайне не удобно, так как звездочки должны быть разные, а для каждого <a> добавлять свои стили это я считаю лишней нагрузкой.
    – Aleksei .C
    20 июл 2018 в 6:24

Ваш ответ

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

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