Witam , proszę o podpowiedź jak rozwiązać następujący problem:
W załączniku dodałem screen, aby łatwiej było zrozumieć o co chodzi, div banner ma na swoje tło ustawiony obrazek - w środku div'a banner znajduję się div Bcontent który ma tekst , po dodaniu polecenia "margin-top: XYZ;" zmienia się odległość między napisem z góry a moim banerem(zaznaczone fioletowymi kreskami) , podczas gdy chcę zmienić odległość elementu z niebieskim tłem od krawędzi div'a banner. Chodzi o wyśrodkowanie tekstu (tak wiem że nie powinno się tego robić w ten sposób), w poprzedniej podstronie zabieg ten działał bez problemowo , jednak nie jestem w stanie określić co się zmieniło w kodzie między nową, a poprzednią podstroną. W drugim załączniku dodaje screen z poprzedniej podstrony ,na której zabieg działał bezproblemowo. Dodam również całość kodu HTML i CSS nowej podstrony.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="SubPage1Style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Monoton" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Staatliches&subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton&subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,800&subset=latin-ext" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Righteous&subset=latin-ext" rel="stylesheet">
<title>PasjaProgramowania</title>
</head>
<body>
<header>
<div class="toptextdiv">Pasja Programowania</div>
</header>
<div class="container">
<aside>
<div class="banner"><div id="Bcontent">HTML</div></div>
</aside>
<article>
<div class="content"></div>
</article>
</div>
</body>
</html>
KOD CSS
body
{
background-image: url(img/space3.png);
background-attachment: fixed;
background-size: cover;
margin: 0px;
}
div.container
{
width: 1000px;
height: auto;
margin-left: auto;
margin-right: auto;
}
div.toptextdiv
{
width: 1000px;
height: auto;
font-family: 'Monoton', cursive;
color: #000000;
font-size: 54px;
margin-left: 0px;
margin-right: auto;
text-align: center;
}
div.banner
{
width: 1000px;
height: 280px;
background-image: url(img/banner2.jpg);
background-size: cover;
margin-top: 40px;
margin-left: auto;
margin-right: auto;
box-shadow: 2px 2px 5px black;
}
div#Bcontent
{
width: 100px;
height: 100px;
background-color: #123456;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
