Kako organizovati strukturu za header?

CSS

/* Stil za kontejner zaglavlja */
header {
  display: flex; /* Upotreba flexboxa za poravnanje elemenata */
  justify-content: space-between; /* Raspodela prostora između elemenata */
  align-items: center; /* Vertikalno poravnanje elemenata */
  padding: 10px 20px; /* Unutrašnji razmak */
  background-color: #f0f0f0; /* Boja pozadine */
}

/* Stil za logo */
.logo {
  flex-shrink: 0; /* Sprečava skupljanje logotipa */
}

.logo img {
  height: 40px; /* Visina slike logotipa */
}

/* Stil za navigaciju */
nav ul {
  list-style: none; /* Uklanjanje oznaka sa liste */
  margin: 0;
  padding: 0;
  display: flex; /* Upotreba flexboxa za horizontalno raspoređivanje */
}

nav li {
  margin-left: 20px; /* Razmak između stavki menija */
}

nav a {
  text-decoration: none; /* Uklanjanje podvlačenja linkova */
  color: #333; /* Boja teksta linkova */
}

/* Stil za dugmad ili druge elemente za kontrolu */
.controls {
  display: flex; /* Upotreba flexboxa */
  align-items: center; /* Vertikalno poravnanje */
}

.controls button {
  margin-left: 10px; /* Razmak između dugmadi */
}

HTML

<header>
  <div class="logo">
    <img src="logo.png" alt="Logotip kompanije">
  </div>
  <nav>
    <ul>
      <li><a href="/">Početna</a></li>
      <li><a href="/about">O nama</a></li>
      <li><a href="/services">Usluge</a></li>
      <li><a href="/contact">Kontakt</a></li>
    </ul>
  </nav>
  <div class="controls">
    <button>Prijava</button>
    <button>Registracija</button>
  </div>
</header>

Osnovni principi:

• Semantika: Koristite <header> tag.
• Fleksibilan dizajn: Primena Flexbox ili Grid za lako poravnanje i prilagodljivost.
• Razdvajanje komponenti: Istaknite logo, navigaciju i dugmad u odvojene blokove.
• Pristupačnost: Koristite semantičke tagove (<nav>, <ul>, <li>, <a>) i alt atribute za slike.
• Modularnost: Stilizujte pojedinačne blokove (.logo, nav, .controls) radi lakšeg održavanja.
• Reaktivni dizajn: Dodajte media queries za prilagođavanje zaglavlja različitim veličinama ekrana.

Struktura može varirati u zavisnosti od složenosti i sadržaja zaglavlja (npr. dodavanje trake za pretraživanje, padajućih menija itd.).