Я уже некоторое время пытаюсь выучить HTMl и CSS, я уже знаком с некоторыми основами, но долгое время я боролся с позиционированием предметов там, где я их хочу.
Я следовал многим урокам, и если я буду в точности следовать им, они все сделают отлично, но когда я начинаю играть с вещами вокруг, чтобы сделать их немного более сложными, вещи не ведут себя так, как Я ожидаю
Проверьте на этом изображении, например. У меня есть ряды с элементами, первые из которых я смог покрыть 50% процентов экрана каждым элементом и выровнять их по центру с помощью поплавка, но когда я изменяю ширину на 40% вместо 50%, они теряют центр выравнивание, и что еще более странно для меня, это то, что они сдвигаются на несколько пикселей вниз и теряют разделение с помощью элемента ниже. Я не понимаю, почему изменение ширины влияет на ее вертикальное положение.
С элементами второго ряда, которые позиционируют их как абсолютные, я не могу понять, как расположить их по центру экрана.
И в четвертом ряду, бежевые и зеленые прямоугольники, я не понимаю, почему текст на бежевом прямоугольнике находится в нижней части прямоугольника, а его часть находится вне рамки, а текст во всех остальных строках выровнен по вертикали к центру прямоугольника автоматически.
Вот мой код:
body {
margin: auto;
max-width: 4000px;
height: 5000px;
font-family: "Lato";
}
#text-1{
background-color: black;
color: white;
width: 50%;
padding: 20px, 50px;
float: left;
text-align: center;
text-justify: auto;
}
#text-1:hover{
background-color: white;
color: black;
}
#text-2 {
background-color: lightgray;
color: black;
width: 50%;
padding: 20px, 50px;
float: left;
text-align: center;
text-justify: auto;
}
#text-2:hover {
background-color: white;
color: black;
}
#text-3{
background-color: black;
color: white;
width: 500px;
padding: 0px, 50px;
position: absolute;
left:200px;
top: 100px;
text-align: center;
}
#text-3:hover{
background-color: white;
color: black;
}
#text-4 {
background-color: lightgray;
color: black;
width: 500px;
padding: 0px, 50px;
position: absolute;
left: 700px;
top: 100px;
text-align: center;
}
#text-4:hover {
background-color: white;
color: black;
}
#text-5 {
background-color: lightpink;
color: black;
width: 100%;
padding: 0px, 50px;
position: fixed;
top: 200px;
text-align: center;
}
#text-5:hover {
background-color: white;
color: black;
}
a:link{
text-decoration: none;
color: inherit;
}
a:visited{
text-decoration: none;
color: inherit;
}
.box-1 {
background-color: beige;
color: black;
width: 500px;
height: 100px;
position: relative;
left: 100px;
top:300px;
text-align: center;
border-style: solid;
border-width: 1px;
padding-left: 20px;
padding-right: 20px;
z-index: 1;
}
.box-2 {
background-color: lightgreen;
color: black;
width: 200px;
height: 100px;
position: relative;
left: 300px;
top: 250px;
padding: 20px, 20px,20px, 20px;
text-align: center;
border-style: solid;
border-width: 1px;
z-index: 0;
}
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>
</head>
<body>
<div id="text-1">
<a href="index.html" target="_blank">
<p>Experimenting with one paragraph</p>
<p>This button is . positioned with a float, so it will stick eother to the lef or right of the screen</p>
</a>
</div>
<div id="text-2">
<a href="index.html" target="_blank">
<p>Another chunck of text</p>
<p>This button is . positioned with a float, so it will stick eother to the lef or right of the screen</p>
</a>
</div>
<div id="text-3">
<a href="index.html" target="_blank">
<p>Button 3</p>
<p>This button has an absolute posittion, so it doesn't float around.</p>
</a>
</div>
<div id="text-4">
<a href="index.html" target="_blank">
<p>Button 4</p>
<p>This button has an absolute posittion, so it doesn't float around.</p>
</a>
</div>
<div id="text-5">
<a href="index.html" target="_blank">
<p>Button 4</p>
<p>This button has a fixed posittion, so it wont move when scrolling up or down</p>
</a>
</div>
<div class="box-1">
<p>This box is poitioned in front of others by using a z-index higher than the box bellow.</p>
</div>
<div class="box-2"></div>
</body>
</html>