#html #css
Всем привет! Начал потихоньку разбираться с HTML и CSS сразу подкатила небольшая работка. Так как я только учусь всех нюансов не знаю. Имеется меню в котором текст должен быть написан на звездочках, звездочки(они разного цвета) являются картинками и требуется поместить ссылку в них. Уже пытался это сделать с помощью position: relative и absolute. Выравнивал текст по первой ссылке и получалось так, что 1 ссылка становилась ровно в центр, а остальные 4 съезжали влево с помощью padding исправить это не удавалось, так как кол-во букв разное и все равно в какую-то сторону ссылки съезжали. Кусочек кода HTML: Здесь картинки одинаковые, так как 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
img { width: 100px; height: 100px; float: left; } a { display: inline-block; position: absolute; top: 40px; left: 25px; } li { display: inline-block; position: relative; }
Комментариев нет:
Отправить комментарий