#html
#HTML
Вопрос:
Итак, у меня сейчас две проблемы с моим кодом.
- Одним из них является фон для верхнего текста, левое текстовое поле не перемещается вместе с текстом, вместо этого текст перекрывает фон.
- Моя другая проблема заключается в заполнении текстового поля в правом нижнем углу. Я хочу иметь ту же функциональность, что и между средним изображением и верхним текстовым полем. Когда я пытаюсь добавить отступы в нижнее правое текстовое поле, он просто добавляет отступы к тексту, а не к белому фону.
body {
background-image: url("wall.jpg");
overflow-x: hidden;
}
.right {
float: right;
right: 0px;
width: 50%;
height:340px;
}
.campaign{
width: 100%;
height: 600px;
padding-top: 40px;
padding-bottom: 40px;
}
.campaignblurb{
float: left;
width: 100%;
background-color:white;
text-align:left;
vertical-align: middle;
padding:20px;
opacity: 0.6;
font-family: "Times New Roman", Times, serif;
font-style: normal;
font-weight: normal;
font-size: 42px;
line-height: normal;
color: #000000;
}
.p2coop{
float:left;
width: 50%;
font-family: "Times New Roman", Times, serif;
font-style: normal;
font-weight: normal;
font-size: 36px;
line-height: normal;
color: #000000;
background-color:white;
text-align:left;
vertical-align: left;
opacity: 0.6;
height: 340px;
}
.editorblurb{
width: 50%;
float:right;
height: 350px;
font-family: "Times New Roman", Times, serif;
font-style: normal;
font-weight: normal;
font-size: 35px;
line-height: normal;
color: #000000;
right: 100px;
background-color:white;
background-origin: padding-box;
text-align:left;
vertical-align: middle;
padding:20px;
opacity: 0.6;
}
.editor{
width: 50%;
height:350px;
float:left;
} <div class="p2coop">The game’s two-player cooperative mode features its own entirely
separate campaign with a unique story, test chambers, and two new player characters ATLAS and P-body,
referred to as Blue and Orange by GLaDOS, a pair of bipedal Personality Construct
based androids. This new mode forces players to reconsider everything they thought they knew about portals.
Success will require them to not just act cooperatively, but to think cooperatively.</div>
<img src="portal_atlas_pbody.jpg" class="right">
<img src="portal2campaign.jpg" class="campaign">
<div class="campaignblurb">The single-player portion of Portal 2 introduces a cast of dynamic
new characters, a host of fresh puzzle elements, and a much larger set of devious test chambers.
Players will explore never-before-seen areas of the Aperture Science Labs and be reunited with GLaDOS,
the occasionally murderous computer companion who guided them through the original game.</div>
<div class="editorblurb">
The Puzzle Creator (also known as Puzzle Maker or Editor) is a part of the Perpetual Testing
Initiative in Portal 2, allowing the creation of single-player
and Co-op test chambers within a simple in-game editor.
</div>
<img src="leveleditor.jpg" class="editor"> Ответ №1:
Причина, по которой текст перекрывает фон, заключается в том, что вы устанавливаете высоту, но не определяете переполнение или что-то еще.
Один из вариантов, который у вас есть, — это установить overflow: scroll в divs, чтобы пользователь мог затем прокручивать, чтобы прочитать содержимое, и это не изменит макет.
В противном случае вы можете удалить установленные высоты для divs и позволить тексту занимать столько места, сколько ему нужно.
Чтобы решить проблему, с которой вы сталкиваетесь с интервалом между нижним текстовым разделением и изображением, просто установите margin-bottom: Xpx в нижнем разделе. Это добавит пробел между ним и элементом под ним, заполнение добавляет пространство внутри элемента, что также приводит к перемещению фона.
body {
background-image: url("wall.jpg");
overflow-x: hidden;
}
.right {
float: right;
right: 0px;
width: 50%;
height: 340px;
}
.campaign {
width: 100%;
height: 600px;
padding-top: 40px;
padding-bottom: 40px;
}
.campaignblurb {
float: left;
width: 100%;
background-color: red;
text-align: left;
vertical-align: middle;
padding: 20px;
opacity: 0.6;
font-family: "Times New Roman", Times, serif;
font-style: normal;
font-weight: normal;
font-size: 42px;
line-height: normal;
color: #000000;
}
.p2coop {
float: left;
width: 50%;
font-family: "Times New Roman", Times, serif;
font-style: normal;
font-weight: normal;
font-size: 36px;
line-height: normal;
color: #000000;
background-color: grey;
background-size: cover;
text-align: left;
vertical-align: left;
opacity: 0.6;
height: 340px;
overflow: scroll;
}
.editorblurb {
width: 50%;
float: right;
/* height: 350px; */
font-family: "Times New Roman", Times, serif;
font-style: normal;
font-weight: normal;
font-size: 35px;
line-height: normal;
color: #000000;
right: 100px;
background-color: grey;
background-origin: padding-box;
text-align: left;
vertical-align: middle;
padding: 20px;
opacity: 0.6;
margin-bottom: 20px;
}
.editor {
width: 50%;
height: 350px;
float: left;
} <div class="p2coop">
Scrolling example with set height <br /><br /> The game’s two-player cooperative mode features its own entirely separate campaign with a unique story, test chambers, and two new player characters ATLAS and P-body, referred to as Blue and Orange by GLaDOS,
a pair of bipedal Personality Construct based androids. This new mode forces players to reconsider everything they thought they knew about portals. Success will require them to not just act cooperatively, but to think cooperatively.
</div>
<img src="portal_atlas_pbody.jpg" class="right" />
<img src="portal2campaign.jpg" class="campaign" />
<div class="campaignblurb">
The single-player portion of Portal 2 introduces a cast of dynamic new characters, a host of fresh puzzle elements, and a much larger set of devious test chambers. Players will explore never-before-seen areas of the Aperture Science Labs and be reunited
with GLaDOS, the occasionally murderous computer companion who guided them through the original game.
</div>
<div class="editorblurb">
Removing the height example <br /><br /> The Puzzle Creator (also known as Puzzle Maker or Editor) is a part of the Perpetual Testing Initiative in Portal 2, allowing the creation of single-player and Co-op test chambers within a simple in-game editor.
</div>
<img src="leveleditor.jpg" class="editor" /> Я бы не рекомендовал использовать этот макет на экранах мобильных устройств, поэтому, если вы хотите сделать его подходящим для разных размеров экрана, тогда изучите медиа-запросы, flexbox или CSS grid. Это позволит вам размещать изображения перед текстом, который имеет отношение к нему, или наоборот.