0
J'ai un élément .banner et un en-tête h1 à l'intérieur. Je veux centrer cet en-tête sur la bannière mais quand j'essaye de le marginer, il semble qu'il ne soit pas indenté par la bordure supérieure des bannières, mais par l'élément nav qui se trouve au-dessus de la bannière.Pourquoi l'élément n'est pas les marges de son parent?
Ici, sur la capture d'écran, j'ai utilisé l'outil de Chrome qui montre les retraits de cap à partir desquels se termine l'élément nav.
Quel est le problème et comment puis-je le résoudre? Sera très reconnaissant pour toute aide et conseils.
.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>
Pourriez-vous ajouter une capture d'écran de votre apparence? Je ne suis pas sûr de comprendre le résultat souhaité. – Stuart
Comme ça [link] (http://i.imgur.com/p9EUx9l.png) – Iskorka
J'ai utilisé le positionnement mais je veux toujours savoir ce qui ne va pas avec la marge – Iskorka