Центрирование макета моего сайта не работает с полем: auto - PullRequest
Новая
       15

Центрирование макета моего сайта не работает с полем: auto

0 голосов
/ 06 ноября 2018

Мне нужно разработать сайт для школы, но у меня возникли некоторые проблемы с этим. Я не понимаю, почему макет моего сайта не центрирован, несмотря на то, что мы находимся на полях: auto. Отлично работает в других упражнениях.

Вот HTML и мой код CSS ... 

body {
  font-family: Roboto;
  background-color: #ededed;
}

nav {
  list-style-type: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: rgb(87, 222, 135, 0.3);
  width: 1025px;
}

nav li {
  list-style-type: none;
  float: left;
  padding: 4px 10px;
  color: #093156;
}

nav img {
  float: left;
  padding: 7px 5px 7px 5px;
}

header {
  margin-top: 5px;
}

figure {
  position: relative;
}

figure p {
  color: white;
  position: absolute;
  bottom: 50px;
  right: 125px;
  font-size: 14pt;
  font-weight: 400;
}

h1 {
  margin-bottom: 0;
  margin-top: 10px;
}

hr {
  margin-top: 0;
  border: none;
  background-color: black;
  height: 2px;
  width: 1000px;
}

.klein_links,
.klein_rechts {
  font-size: 7pt;
  margin-bottom: 2px;
}

.klein_rechts {
  float: right;
}

.klein_links {
  float: left;
}

main img {
  margin: 0;
}

h4 {
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 0;
}

.normaal {
  font-size: small;
  margin-top: 2px;
}

article {
  overflow: hidden;
  width: 250px;
  height: 217px;
  float: left;
}

.eerste_sectie article:first-of-type {
  padding-right: 5px;
}

.eerste_sectie article:nth-child(2n) {
  padding-right: 10px;
  padding-left: 5px;
}

.eerste_sectie article:last-of-type {
  padding-left: 10px;
}

.tweede_sectie article:first-of-type {
  padding-right: 5px;
}

.tweede_sectie article:nth-child(2n) {
  padding-right: 10px;
  padding-left: 5px;
}

.tweede_sectie article:last-of-type {
  padding-left: 10px;
}

.derde_sectie article:first-of-type {
  padding-right: 5px;
}

.derde_sectie article:nth-child(2n) {
  padding-right: 10px;
  padding-left: 5px;
}

.derde_sectie article:last-of-type {
  padding-left: 10px;
}

#button {
  background-color: #343740;
  color: white;
  width: 150px;
}

main {
  margin: auto;
}

footer {
  background-color: black;
  color: white;
  height: 100px;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  text-align: center;
  vertical-align: middle;
}

.derde_sectie p {
  background-color: #093156;
  color: white;
  padding: 8px;
  font-size: small;
  margin-top: 2px;
}

article>img:hover {
  opacity: 0.7;
}

img {
  float: none;
}
<header>
  <nav>
    <img src="assets/logo.png" alt="logo" width="40" height="30">
    <ol>
      <li><a>NIEUWS</a></li>
      <li><a>PRODUCTEN</a></li>
      <li><a>CONTACT</a></li>
    </ol>
  </nav>
  <figure>
    <img src="assets/banner.jpg" alt="banner" width="1025">
    <p>DE TUIN VAN SAM</p>
  </figure>
</header>

<main>
  <section class="eerste_sectie">
    <h1>Recent nieuws</h1>
    <hr>
    <article>
      <p class="klein_links">19 okt 2018</p>
      <p class="klein_rechts">Sam Agten</p>
      <img src="assets/blog01.jpg" alt="blog01">
      <h4>Tuin & Licht Deel 2</h4>
      <p class="normaal">Zuidelijk gelegen? Zicht op het westen? Deel 1 van onze spannende reeks. Hoe maak je optimaal gebruik van de lichtinval in je tuin
      </p>
    </article>
    <article>
      <p class="klein_links">19 okt 2018</p>
      <p class="klein_rechts">Sam Vanderstraeten</p>
      <img src="assets/blog02.jpg" alt="blog02">
      <h4>DIY Fridays</h4>
      <p class="normaal">Het is weer vrijdag! Wil je je tuin een klein beetje extra pit geven? Vandaag gebruikt Sam enkel een elastiekje en een zoutvatje om mooie tuindecora te maken
      </p>
    </article>
    <article>
      <p class="klein_links">19 okt 2018</p>
      <p class="klein_rechts">Sam van Rijn</p>
      <img src="assets/blog03.jpg" alt="blog03">
      <h4>Paddenstoelen</h4>
      <p class="normaal">Sam legt uit welke paddenstoelen giftig zijn en hoe je ze kan herkennen</p>
    </article>
    <article>
      <p class="klein_links">19 okt 2018</p>
      <p class="klein_rechts">Sam Swinnen</p>
      <img src="assets/blog04.jpg" alt="blog04">
      <h4>Tuin & Licht Deel 1</h4>
      <p class="normaal">De start van een nieuwe reeks. Ons team van Sammen leert je in deze 5-delige reeks hoe je optimaal gebruik kan maken van de lichtinval
      </p>
    </article>
  </section>
  <section class="tweede_sectie">
    <article>
      <p class="klein_links">19 okt 2018</p>
      <p class="klein_rechts">Sam Barzan</p>
      <img src="assets/blog05.jpg" alt="blog05">
      <h4>Slakkenseizoen</h4>
      <p class="normaal">Last van slakken? 10 handige tips om slakken te weren uit je tuintje</p>
    </article>
    <article>
      <p class="klein_links">19 okt 2018</p>
      <p class="klein_rechts">Sam Barzan</p>
      <img src="assets/blog06.jpg" alt="blog06">
      <h4>Tuinvrienden</h4>
      <p class="normaal">Dankzij jullie steun zijn we vastberaden om nog meer mensen te informeren over onze liefde voor Tuinen. Vanaf volgende maand zullen wij starten met een maandelijks qdgqdqdsg van blabla haha</p>
    </article>
    <article>
      <p class="klein_links">19 okt 2018</p>
      <p class="klein_rechts">Sam van Rijn</p>
      <img src="assets/blog07.jpg" alt="blog07">
      <h4>Hoge Bomen</h4>
      <p class="normaal">De verkiezingen zijn achter de rug, Sam kijkt vandaag naar de impact daarvan op jouw tuin</p>
    </article>
    <article>
      <p class="klein_links">19 okt 2018</p>
      <p class="klein_rechts">Sam Vanderstraeten</p>
      <img src="assets/blog08.jpg" alt="blog08">
      <h4>Wandelkriebels</h4>
      <p class="normaal">De herfst staat voor de deur. Sam neemt je mee op de 3 mooiste bostochten door de Ardennen</p>
    </article>
    <input type="button" id="button" value="More...">
  </section>

  <section class="derde_sectie">
    <h1>Actiecentrum</h1>
    <hr>
    <article>
      <img src="assets/feature01.jpg" alt="feature">
      <p>Offerte aanvragen</p>
    </article>
    <article>
      <img src="assets/feature01.jpg" alt="feature">
      <p>Vraag een cursus aan</p>
    </article>
    <article>
      <img src="assets/feature01.jpg" alt="feature">
      <p>Privacy & Veiligheid</p>
    </article>
    <article>
      <img src="assets/feature01.jpg" alt="feature">
      <p>Jobs</p>
    </article>
  </section>
</main>

Я надеюсь, что кто-то может мне помочь. Я действительно не знаю, что я делаю здесь не так?

Спасибо !!

Редактировать: спасибо за все ответы, решения Люльни и Тайлера Клея работали на меня. jorscobry, я не могу использовать ваше решение, так как мой учитель не позволяет мне использовать div, но все равно спасибо за ваше время.

Ответы [ 3 ]

0 голосов
/ 07 ноября 2018

Попробуйте поместить все в div с идентификатором контейнера. Укажите ширину контейнера, скажем, 960px. Дайте контейнеру div запас авто. Затем измените ширину вашей навигации на 100% и ширину вашего часа на 100%, чтобы заполнить контейнер div, но не выходить за его пределы.

Ex: 

#container {
  width: 960px;
  margin: auto;
}

nav {
  list-style-type: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: rgb(87, 222, 135, 0.3);
  width: 100%;
}

hr {
  margin-top: 0;
  border: none;
  background-color: black;
  height: 2px;
  width: 100%;
}

Надеюсь, это поможет!

0 голосов
/ 07 ноября 2018

Я уже некоторое время использую HTML / CSS, и иногда центрирование может быть затруднено в зависимости от того, что вы делаете.

Иногда назначение фиксированной ширины и выполнение математических операций для центрирования хорошо работает. Предположим, у меня есть следующий HTML-код, который я хочу центрировать 

<img src="www.somewebsite.com/myfavoriteimage.jpg" alt="My Favorite Image">

Если я могу предположить фиксированную ширину, как 80% экрана, простой способ центрировать это в CSS будет следующим: 

img{
    width:80%;
    margin-left:10%
    margin-right:10%
}

Это работает, только если вы можете предположить ширину элемента, который вы хотите центрировать. Я не совсем уверен, чего вы пытаетесь достичь. Вы хотите центрировать весь свой сайт?

0 голосов
/ 06 ноября 2018

Попробуйте это: 

main {
 margin: 0 auto;
 display: table;
 width: 50%;
}
...