Содержание
Поместить текст в картинку HTML/CSS
Всем привет!
Начал потихоньку разбираться с 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>
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. каждая ссылка должна быть в центре звезды.
- html
- css
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
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
html — Конфликт картинки и текста в css
Задать вопрос
Вопрос задан
Изменён
2 года 3 месяца назад
Просмотрен
411 раз
При создании шапки, я сделал текст «Главная», чтобы затем вложить в него ссылку на главную страницу, а позже решил что нужно вставить лого перед этим текстом.
После того, как я вставил картинку, она очень сильно съехала, и никакие параметры в CSS это не исправляют. Что делать не знаю, помогите пожалуйста.
* {
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
}
header {
background-color: #000000;
height: 120px;
margin: 0px;
padding: 0px;
}
#logo {
padding-top: 28px;
margin-left: 190px;
}
h2 {
color: #757575;
font-family: Sans-Serif;
font-weight: 550;
font-size: 13pt;
padding-top: 28px;
margin-left: 220px;
}<!DOCTYPE html>
<html lang=ru>
<head>
<meta charset=utf-8>
<title>Pepeland</title>
<!--заголовок, отображается в названии вкладки-->
<link rel="stylesheet" href="csscode.css">
<!--rel показывает что мы подключили стили, а href это название файла-->
</head>
<body>
<header>
<!--шапка сайта-->
<img src="pictures/logo.png">
<h2>Главная</h2>
</header>
<footer>
<!--подвал сайта, как шапка, но в самом низу-->
</footer>
</body>
</html>- html
- css
- вёрстка
- сайты
6
Вам нужно использовать свойство float.
И желательно, разбивать лого и меню на отдельные div. Тогда получается такой код:
* {
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
}
header {
background-color: #000000;
height: 120px;
margin: 0px;
padding: 0px;
}
#logo {
padding-top: 28px;
margin-left: 190px;
float: left;
}
h2 {
color: #757575;
font-family: Sans-Serif;
font-weight: 550;
font-size: 13pt;
padding-top: 28px;
margin-left: 220px;
}<!DOCTYPE html>
<html lang=ru>
<head>
<meta charset=utf-8>
<title>Pepeland</title>
<!--заголовок, отображается в названии вкладки-->
<link rel="stylesheet" href="csscode.css">
<!--rel показывает что мы подключили стили, а href это название файла-->
</head>
<body>
<header>
<!--шапка сайта-->
<div>
<img src="pictures/logo.png">
</div>
<div>
<h2>Главная</h2>
</div>
</header>
<footer>
<!--подвал сайта, как шапка, но в самом низу-->
</footer>
</body>
</html>
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
html — Показать подпись к изображению внизу изображения
Задавать вопрос
спросил
Изменено
4 года, 10 месяцев назад
Просмотрено
5к раз
Я пытаюсь отобразить подпись к изображению внизу.
Это то, что у меня есть сейчас. Подпись должна быть внизу изображения и соответствовать его ширине. Причина, по которой этого не происходит, заключается в том, что размер
<рисунок>
Подпись
Я поискал и обнаружил, что обычно нужно добавить display: inline-block , как предложено здесь. Здесь это не влияет. Я подозреваю, что это связано с тем, что само изображение имеет CSS с position: absolute . Если я удалю этот бит, макет сломается. (Не мой CSS, и я не веб-разработчик.) Похоже, мне нужен способ заставить
- html
- css
- фигура
я бы посоветовал сделать так позиция: абсолютная; для figcaption не img что цифра может принимать ширину img
цифра {
граница: сплошная 1px;
отображение: встроенный блок;
маржа: 0;
положение: родственник;
}
figcaption {
положение: абсолютное;
внизу: 1см;
слева: 0;
цвет фона: желтый;
ширина: 100%;
} <рисунок>
it/500x200"/>
Подпись
1
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Требуется, но никогда не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
html — Как я могу добавить подпись к этому изображению в CSS?
Я создаю веб-сайт, и у меня есть эти два изображения в мобильном представлении.
Их ширина составляет 30%. Эти два изображения расположены рядом, вот так
Я хочу добавить небольшую подпись под каждым изображением.
<класс div = "unique-img1">
<дел>
css:
/* код для изображений в уникальном разделе */ .
unique-раздел img {
плыть налево;
ширина: 30%;
высота: авто;
}
/* изображение tinkercad справа */
img.tcimg2 {
поплавок: справа;
}
.unique-img1 {
плыть налево;
}
- html
- css
Просто раскомментируйте тег p в коде. Тогда это будет работать как заголовок.
<класс div = "unique-img1">
Модель с тремя вентиляторами
