Reputation: 51
I have a .banner element and an h1 header within it. I want to center this header on the banner but when I'm trying to margin it it seems like it indents not from the banners top border, but from the nav element that is above the banner.
Here on screenshot I used Chrome's tool that shows that heading indents from where the nav element ends.
What is the problem and how can I solve it? Will be very grateful for any help and tips.
.container {
width: 1024px;
margin: auto;
overflow: hidden;
}
a {
text-decoration: none;
}
/*
***********
* =banner
***********
*/
.banner {
background: url(../img/banner1.jpg);
width: 1024px;
height: 580px;
margin: auto;
}
.banner h1 {
text-align: center;
font-size: 100px;
font-weight: normal;
margin: 200px;
}
/*
***********
* =nav
***********
*/
nav {
margin-left: -35px;
margin-top: 0;
margin-bottom: 0px;
position: relative;
}
nav li {
display: inline;
}
nav .left-nav {
margin-top: -20px;
margin-right: 0px;
width: 200px;
float: right;
position: relative;
padding-top: 20px;
}
#login {
position: absolute;
top: 11px;
right: 0;
}
header h3 {
text-indent: -9999px;
}
header h3:after {
clear: both;
display: block;
content: ' ';
visibility: hidden;
height: 1%;
}
header h3 a {
background: url(../img/cart.png) no-repeat;
width: 48px;
height: 44px;
position: absolute;
top: 10px;
left: 0;
padding: 0;
}
header h3 a:hover {
background-color: white;
}
nav a {
font-family: 'Indie Flower', cursive;
font-size: 26px;
letter-spacing: 3px;
margin-right: 5px;
color: #0d0d0d;
padding: 10px 5px;
}
nav a:hover {
background-color: #e8e8e8;
}
<body>
<div class="container">
<header>
<nav>
<ul>
<li><a href="#">Прайслист</a></li>
<li><a href="#">Подбор букета</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Доставка</a></li>
<div class="left-nav">
<li><h3><a href="#" ></a>Корзина</h3></li>
<li><a href="#" id="login">Войти</a></li>
</div>
</ul>
</nav>
<div class="banner">
<a href="#" id="left"></a> <!-- image replacement лучше сделать в css без картинки -->
<a href="#" id="right"></a> <!-- image replacement -->
<h1>Цветочный Дом Полины</h1>
<ul>
<li id=visited><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</header>
<div class="main">
<div class="news">
<h2>Новости нашего магазина</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
<img src="#" alt="Heart-shaped box of flowers">
</div>
<div class="portfolio">
<h2>Наши последние работы</h2>
<div class="image-container">
<img src="#" alt="Пример 1">
<img src="#" alt="Пример 2">
<img src="#" alt="Пример 3">
</div>
<p>
Во все времена цветы олицетворяют счастье, улыбку, радость, прекрасное настроение и чудеса. Именно цветами Вы можете рассказать о своих чувствах дорогим сердцу людям, поэтому многие тысячелетия люди стараются украсить свою жизнь и жизнь близких этими ароматными малышками. В любой момент жизни цветы порадуют и вызовут искреннюю улыбку на лице.
</p>
</div>
</div>
</body>
Upvotes: 0
Views: 49
Reputation: 3783
You can use padding-top:185px;
instead of margin inside .banner h1
.container {
width: 1024px;
margin: auto;
overflow: hidden;
}
a {
text-decoration: none;
}
/*
***********
* =banner
***********
*/
.banner {
background:url('https://images.designtrends.com/wp-content/uploads/2015/12/10131036/Yellow-Flower-Background.jpg') !important;
width: 1024px;
height: 580px;
margin: auto;
}
.banner h1 {
text-align: center;
font-size: 100px;
font-weight: normal;
margin: 200px;
padding-top:185px;
}
/*
***********
* =nav
***********
*/
nav {
margin-left: -35px;
margin-top: 0;
margin-bottom: 0px;
position: relative;
}
nav li {
display: inline;
}
nav .left-nav {
margin-top: -20px;
margin-right: 0px;
width: 200px;
float: right;
position: relative;
padding-top: 20px;
}
#login {
position: absolute;
top: 11px;
right: 0;
}
header h3 {
text-indent: -9999px;
}
header h3:after {
clear: both;
display: block;
content: ' ';
visibility: hidden;
height: 1%;
}
header h3 a {
background: url(../img/cart.png) no-repeat;
width: 48px;
height: 44px;
position: absolute;
top: 10px;
left: 0;
padding: 0;
}
header h3 a:hover {
background-color: white;
}
nav a {
font-family: 'Indie Flower', cursive;
font-size: 26px;
letter-spacing: 3px;
margin-right: 5px;
color: #0d0d0d;
padding: 10px 5px;
}
nav a:hover {
background-color: #e8e8e8;
}
<body>
<div class="container">
<header>
<nav>
<ul>
<li><a href="#">Прайслист</a></li>
<li><a href="#">Подбор букета</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Доставка</a></li>
<div class="left-nav">
<li><h3><a href="#" ></a>Корзина</h3></li>
<li><a href="#" id="login">Войти</a></li>
</div>
</ul>
</nav>
<div class="banner" style="background:#ccc;">
<a href="#" id="left"></a> <!-- image replacement лучше сделать в css без картинки -->
<a href="#" id="right"></a> <!-- image replacement -->
<h1>Цветочный Дом Полины</h1>
<ul>
<li id=visited><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</header>
<div class="main">
<div class="news">
<h2>Новости нашего магазина</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
<img src="#" alt="Heart-shaped box of flowers">
</div>
<div class="portfolio">
<h2>Наши последние работы</h2>
<div class="image-container">
<img src="#" alt="Пример 1">
<img src="#" alt="Пример 2">
<img src="#" alt="Пример 3">
</div>
<p>
Во все времена цветы олицетворяют счастье, улыбку, радость, прекрасное настроение и чудеса. Именно цветами Вы можете рассказать о своих чувствах дорогим сердцу людям, поэтому многие тысячелетия люди стараются украсить свою жизнь и жизнь близких этими ароматными малышками. В любой момент жизни цветы порадуют и вызовут искреннюю улыбку на лице.
</p>
</div>
</div>
</body>
Upvotes: 1