0
Ich habe ein .banner-Element und einen h1-Header darin. Ich möchte diesen Header auf dem Banner zentrieren, aber wenn ich versuche, es zu umrandeten, scheint es, als ob es nicht von der oberen Grenze des Banners, sondern von dem Element nav, das über dem Banner ist.Warum ist das Element keine Ränder von seinem Elternteil?
Hier auf dem Screenshot habe ich das Tool von Chrome verwendet, das anzeigt, dass die Einrückungen von dem Ende des Navigationselements ausgehen.
Was ist das Problem und wie kann ich es lösen? Wir sind sehr dankbar für jede Hilfe und Tipps.
.container {
\t width: 1024px;
\t margin: auto;
\t
\t overflow: hidden;
}
a {
\t text-decoration: none;
}
/*
***********
* =banner
***********
*/
.banner {
\t background: url(../img/banner1.jpg);
\t width: 1024px;
\t height: 580px;
\t margin: auto;
}
.banner h1 {
\t text-align: center;
\t font-size: 100px;
\t font-weight: normal;
\t margin: 200px;
\t
}
/*
***********
* =nav
***********
*/
nav {
\t margin-left: -35px;
\t margin-top: 0;
\t margin-bottom: 0px;
\t position: relative;
}
nav li {
\t display: inline;
}
nav .left-nav {
\t margin-top: -20px;
\t margin-right: 0px;
\t width: 200px;
\t float: right;
\t position: relative;
\t padding-top: 20px;
}
#login {
\t position: absolute;
\t top: 11px;
\t right: 0;
}
header h3 {
\t text-indent: -9999px;
}
header h3:after {
\t clear: both;
\t display: block;
\t content: ' ';
\t visibility: hidden;
\t height: 1%;
}
header h3 a {
\t background: url(../img/cart.png) no-repeat;
\t width: 48px;
\t height: 44px;
\t position: absolute;
\t top: 10px;
\t left: 0;
\t padding: 0;
}
header h3 a:hover {
\t background-color: white;
}
nav a {
\t font-family: 'Indie Flower', cursive;
\t font-size: 26px;
\t letter-spacing: 3px;
\t margin-right: 5px;
\t color: #0d0d0d;
\t padding: 10px 5px;
}
nav a:hover {
\t background-color: #e8e8e8;
}\t <body>
\t \t <div class="container">
\t \t \t <header>
\t \t \t \t <nav>
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li><a href="#">Прайслист</a></li>
\t \t \t \t \t \t <li><a href="#">Подбор букета</a></li>
\t \t \t \t \t \t <li><a href="#">Контакты</a></li>
\t \t \t \t \t \t <li><a href="#">Доставка</a></li>
\t \t \t \t \t \t <div class="left-nav">
\t \t \t \t \t \t \t <li><h3><a href="#" ></a>Корзина</h3></li>
\t \t \t \t \t \t \t <li><a href="#" id="login">Войти</a></li>
\t \t \t \t \t \t </div>
\t \t \t \t \t </ul>
\t \t \t \t </nav>
\t \t \t \t <div class="banner">
\t \t \t \t \t <a href="#" id="left"></a> <!-- image replacement лучше сделать в css без картинки -->
\t \t \t \t \t <a href="#" id="right"></a> <!-- image replacement -->
\t \t \t \t \t <h1>Цветочный Дом Полины</h1>
\t \t \t \t \t <ul>
\t \t \t \t \t \t <li id=visited><a href="#"></a></li>
\t \t \t \t \t \t <li><a href="#"></a></li>
\t \t \t \t \t \t <li><a href="#"></a></li>
\t \t \t \t \t </ul>
\t \t \t \t </div>
\t \t \t </header>
\t \t \t
\t \t \t <div class="main">
\t \t \t \t <div class="news">
\t \t \t \t \t <h2>Новости нашего магазина</h2>
\t \t \t \t \t <p>
\t \t \t \t \t \t 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.
\t \t \t \t \t </p>
\t \t \t \t \t <img src="#" alt="Heart-shaped box of flowers">
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div class="portfolio">
\t \t \t \t \t <h2>Наши последние работы</h2>
\t \t \t \t \t <div class="image-container">
\t \t \t \t \t \t <img src="#" alt="Пример 1">
\t \t \t \t \t \t <img src="#" alt="Пример 2">
\t \t \t \t \t \t <img src="#" alt="Пример 3">
\t \t \t \t \t </div>
\t \t \t \t \t <p>
\t \t \t \t \t \t Во все времена цветы олицетворяют счастье, улыбку, радость, прекрасное настроение и чудеса. Именно цветами Вы можете рассказать о своих чувствах дорогим сердцу людям, поэтому многие тысячелетия люди стараются украсить свою жизнь и жизнь близких этими ароматными малышками. В любой момент жизни цветы порадуют и вызовут искреннюю улыбку на лице.
\t \t \t \t \t </p>
\t \t \t \t </div>
\t \t \t </div>
\t </body>
Könnten Sie einen Screenshot hinzufügen, wie Sie möchten, dass es aussieht? Ich bin mir nicht sicher, ob ich das gewünschte Ergebnis verstehe. – Stuart
[link] (http://i.imgur.com/p9EUx9l.png) – Iskorka
Ich habe Positionierung verwendet, aber ich möchte immer noch wissen, was mit dem Rand falsch ist – Iskorka