Адаптивное изображение героя с кнопкой + проблемы с текстом в рамке
Я пытаюсь создать изображение героя полной ширины с заголовком h1, текст в рамке с двумя размерами текста внутри плюс кнопка. Я боролся с этим весь день, и, похоже, это не работает так, как мне хотелось бы. Любая помощь могла бы быть полезна.
Благодарность
Картинки: Как это выглядит на данный момент с кодом
Если вы заметили, он не выходит на полную ширину (пробел слева).
Вот так я бы хотел, чтобы он выглядел или достаточно близко
//css//
.hero-image {
background-image: url("image.jpg");
background-position: 100%;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
padding: 50px;
}
.hero-text {
position: relative;
color: #154774;
}
.hero-text button {
border-radius: 5px;
padding: 10px 20px;
color: white;
background-color: #00adee;
text-align: center;
cursor: pointer;
font-size: 20px;
font-weight: bold;
bottom: 50px;
}
.hero-text button:hover {
background-color: #0597c4;
color: white;
}
.herotext2 {
border-radius: 5px;
padding: 10px 10px 10px 10px;
color: white;
background-color: red;
font-size: 20px;
width: 200px;
line-height: 1.4;
}
</style>
//html//
<div class = "hero-image">
<div class = "hero-text">
<h1 style = "font-size:40px">IT support for<br>your business<br>as easy as<br>child’s play</h1>
<p class = "herotext2">All inclusive IT GDPR service packages from £33 p/m</p>
<button>Try it for free today</button>
</div>
</div>
Обновленное изображение: Обновленное изображение
Ответы 2
Вам не хватает absolute, позиционирующего элементы внутри главного изображения. Таким образом, вы можете сила, чтобы они оставались в определенной точке внутри него, установив верх, правый, нижний и левый угол каждого из них.
Не забудьте установить для div родительского героя значение position: relative.
.hero-image {
background-image: url("https://beerdeluxe.com.au/hawthorn/wp-content/uploads/sites/4/2017/05/hero-placeholder.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 50px;
}
.hero-text {
position: relative;
color: #154774;
text-align:right;
}
.hero-text h1 {
font-size:40px;
margin-right:15%;
}
.hero-text h1 .italic {
font-style: italic;
}
.hero-text button {
border-radius: 5px;
padding: 10px 20px;
color: white;
background-color: #00adee;
text-align: center;
cursor: pointer;
font-size: 20px;
font-weight: bold;
bottom: 50px;
max-width: 150px;
margin-top: 25px;
}
.hero-text button:hover {
background-color: #0597c4;
color: white;
}
.herotext2 {
position:relative;
border-radius: 5px;
padding: 10px 10px 10px 10px;
color: white;
background-color: red;
font-size: 20px;
width: 200px;
line-height: 1.4;
margin: 0 0 0 auto;
text-align:left;
}
.herotext2 .no {
font-size: 135px;
line-height: 130px;
font-weight: 600;
}
.herotext2 .tag {
position: absolute;
bottom: 26px;
right: 30px;
font-size: 12px;
color: red;
}<div class = "hero-image">
<div class = "hero-text">
<h1>IT support for your<br> business - <span class = "italic">as easy as<br>child’s play</span></h1>
<p class = "herotext2">All inclusive IT GDPR service packages from <span class = "no">£33</span><span class = "tag">p/m</span></p>
<button>Try it for free today</button>
</div>
</div>https://jsfiddle.net/Sampath_Madhuranga/pwxf73z8/16/
Я обновил ваш формат html и добавил новые стили ... Теперь он отображается как ваш дизайн, но вам нужно применить соответствующее семейство шрифтов.
Работает отлично. Сообщите мне, если возникнут проблемы. Спасибо.
@ j4mes83, я видел возникшие проблемы, но не смог их решить, не увидев кода. пришлите мне ссылку jsfiddle или фрагмент кода. Тогда я могу вам помочь.
спасибо за ответ, извините, я не очень разбираюсь в кодировке, поэтому не уверен, что вы хотите, чтобы я отправил, я использую wordpress. Могу я дать вам ссылку на страницу разработчика? В противном случае я могу попытаться найти то, что вам нужно, с дополнительной информацией, еще раз спасибо
@ j4mes83, да, свяжите меня со своей страницей разработки. пришлите мне URL-адрес, пожалуйста.
@ j4mes83, мне не удалось найти область вашего баннера. Где вы их разместили?
Кажется, он находится в разделе class = content wide, а затем в div class = hero-image. Извините, если вы не это имеете в виду, но, как я уже сказал, для меня это немного внове.
@ j4mes83 обновите свои стили, как показано ниже jsfiddle. jsfiddle.net/Sampath_Madhuranga/pwxf73z8/29
Большой! Не могу вас отблагодарить. Большое спасибо, вы были спасителем.
Только одно: он по-прежнему не отображается на полную ширину, возможно ли это из-за самого изображения? Спасибо
@ j4mes83, согласно моей памяти о вашем кодировании, вам нужно разместить тег div баннера за пределами области оболочки ...
Извините, как мне это сделать? <div class = "hero-image"> <div class = "hero-text"> <h1> ИТ-поддержка вашего <br> бизнеса - <span class = "italic"> так же просто, как <br> детская игра </ span> </h1> <p class = "herotext2"> Все включенные ИТ-пакеты услуг GDPR от <span class = "no"> 33 фунта стерлингов </span> <span class = "tag"> в месяц </span> </p> <button> Попробуйте бесплатно сегодня </button> </div> </div>
@ j4mes83, пришлите мне свой сайт и снова pw. Я точно скажу, чем вы хотите заниматься. Спасибо.
еще раз спасибо, что нашли время для этого :) jms-securedata.co.uk/home-page-new pw = jms1
@ j4mes83, проверьте этот скриншот и правильно разместите дивы. imgur.com/RYdCFyh Вам нужно разместить div .hero-image с его содержимым за пределами раздела содержимого ... Сообщите мне, если вам нужны какие-либо пояснения.
спасибо за помощь, думаю, я смогу это сделать, только если изменю шаблон php wordpress по умолчанию, который ранее был создан кем-то другим. Это нормально, теперь я знаю, что потенциально могу обойтись, спасибо
Большое спасибо за это, я думаю, что сейчас я довольно близко, просто кажется, что проблема с изображением, растягивающимся на всю ширину, и текстом, остающимся в границах поля и кнопки. Я добавил фотографию в исходный вопрос, чтобы показать проблему. i.stack.imgur.com/JN93k.png