Egyszerű egyoszlopos weboldal elrendezések CSS-ben

Ebben a leckében gyakorolni fogjuk az egyszerű egyoszlopos weboldal elrendezések készítését. Készítsük el például a következő elrendezést:

Kezdjük a megvalósításhoz. Minden elrendezés általában egy általános div-el kezdődik, amelynek neve wrapper, és tartalmazza a weboldal többi részét:

html<div id="wrapper">
  
</div>

Esetünkben a wrapper középre lesz igazítva a képernyőn:

css#wrapper {
  width: 800px;
  margin: 50px auto;
}

Szintén lesz egy szegélye:

css#wrapper {
  width: 800px;
  margin: 50px auto;
  border: 1px solid black;
}

Készítsük el most az oldal fő szerkezetét. Ez egy menüből és a fő tartalom - a content - részből fog állni:

html<div id="wrapper">
  <div id="menu">
    
  </div>
  <div id="content">
    
  </div>
</div>

Adjunk hozzá tartalmat a blokkjainkhoz:

html<div id="wrapper">
  <div id="menu">
    <a href="#">link text 1</a>
    <a href="#" class="active">link text 2</a>
    <a href="#">link text 3</a>
    <a href="#">link text 4</a>
    <a href="#">link text 5</a>
  </div>
  <div id="content">
    <h1>Proin tristique lorem</h1>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>

Most már hozzáadhatjuk a stílusokat a blokkjainkhoz. Adjunk stílust a menühöz:

css#menu {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  background-color: #484848;
}
#menu a {
  margin: 0 5px;
  padding: 15px 25px;
  text-decoration: none;
  color: #fff;
  font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
  color: #484848;
  background-color: #fff;
}

És most adjunk stílust a tartalom elemeinek:

css#content {
  padding: 0 30px 20px;
}
#content h1 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 10px;
}
#content p {
  padding: 0 10px;
  margin-bottom: 5px;
  font: 18px/1.3 Arial;
  text-align: justify;
}

Most összeállíthatjuk az egész kódot:

html<div id="wrapper">
  <div id="menu">
    <a href="#">link text 1</a>
    <a href="#" class="active">link text 2</a>
    <a href="#">link text 3</a>
    <a href="#">link text 4</a>
    <a href="#">link text 5</a>
  </div>
  <div id="content">
    <h1>Proin tristique lorem</h1>
    <p>
      ...
    </p>
    <p>
      ...
    </p>
  </div>
</div>

css#wrapper {
  width: 800px;
  margin: 50px auto;
  border: 1px solid black;
}

#menu {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  background-color: #484848;
}
#menu a {
  margin: 0 5px;
  padding: 15px 25px;
  text-decoration: none;
  color: #fff;
  font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
  color: #484848;
  background-color: #fff;
}

#content {
  padding: 0 30px 20px;
}
#content h1 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 10px;
}
#content p {
  padding: 0 10px;
  margin-bottom: 5px;
  font: 18px/1.3 Arial;
  text-align: justify;
}

1. tipp

A legkényelmesebb a margókat felülről lefelé megadni. Például, van egy menünk és egy tartalom, köztük pedig üres tér. Nyilvánvaló, hogy ezt a teret lehet az alsó margóval megadni a menünek, a felső margóval a tartalomnak, vagy az egyidejű hatásukkal. Ebben az esetben jobb, ha a menünek alsó margót adunk, a tartalomnak pedig eltávolítjuk az alapértelmezett padding és margin értékeket a h1 elem esetében.

2. tipp

Az utódoknak nem szabad margót képezniük a szülők között. Például, van egy menünk. Ennek a menünek az alsó margója vagy a menüt tartalmazó div margin-jével, vagy a linkek margin-jével képezhető. Jobb az első változatot választani, mivel a linkeknek nem szabad a szülő "feje fölött" hatniuk.

3. tipp

Tegyük fel, hogy két elem között van margó és ebben az esetben vizuálisan nincs különbség, hogy mit válasszunk a margó számára - margin vagy padding. Ebben az esetben válaszd a margin-ot, mivel ez felelős az elemek közötti távolságok létrehozásáért.

Gyakorlati feladatok