Skip to content
Kursen webtec

Header med logo och navbar

Vi skall fixa till en trevlig header till vår webbsida. Här är tanken att man skall se sidans logotyp och titel samt en möjlighet att navigera mellan webbplatsens olika delar. Vi behöver tänka igenom vilken struktur som html-elementen skall ha och hur de skall stylas.

Det kan se ut så här när vi är klara.

Image description
Bild: Nu är headern stylad och klar.

Struktur på html-elementen

Till att börja med så justerar vi innehållet i det som vi vill skall vara vår header. Den ser nu ut så här.

Struktur på html-element för sidans header.
  <header class="siteheader">
    <header>
        <a href="me.html">
            <img src="img/leaf.png" alt="Logotyp">
            <span>Kursen webtec</span>
        </a>
    </header>


    <nav>
      <ul>
        <li><a href="me.html">Me</a></li>
        <li><a href="report.html">Redovisa</a></li>
        <li><a href="about.html">Om</a></li>
      </ul>
    </nav>
  </header>

Strukturen är viktig då den bestämmer vilka möjligheter jag har för att styla. Men ibland måste jag veta hur man kan styla, innan jag väljer den slutliga strukturen för html-elementen. Vi behöver egentligen tänka på båda sakerna samtidigt.

Innan vi lägger till någon style så ser webbsidan ut så här.

Image description
Bild: Header som ännu inte är stylad.

Grunden till en stylesheet

När man bygger en stylesheet så kan man ibland börja med en “reset” eller “normalisering”. Det gör man för att ställa in “rätt” standardinställningar och skriva över webbläsarens egna inställningar.

Det finns ramverk man kan använda för det här, till exempel “Normalizer”, men i detta fallet så gör vi en enklare normalisering med vår egen kod.

Enkel normalisering av en stylesheet.
/* Basic normalization */
* {
  box-sizing: border-box;
}
Förklaring om box-sizing.

box-sizing är en CSS-egenskap som styr hur webbläsaren beräknar storleken på ett element. När du sätter box-sizing: border-box, inkluderar webbläsaren padding och border i elementets totala bredd och höjd. Detta gör det enklare att hantera layout, eftersom du inte behöver manuellt räkna in dessa värden när du specificerar storleken på ett element.

Det vanliga värdet för box-sizing är content-box. I det läget är definierar bredd och höjd endast innehållet i elementet. Padding och border läggs till ovanpå den specificerade bredden och höjden.

Placera ovan kod i filen css/normalize.css och importera den i din stylesheet css/style.css med följande konstruktion.

Importera stylesheet för normalisering.
@import url("normalize.css");

Importera en stylesheet

Ibland är det bra att organisera sin kod så man får en bra struktur. I stylesheeten kan vi göra det med hjälp av @import url();. Vi kan alltså importera en annan style in till vår style. Det gör det enklare att ha ordning och reda.

Innan du går vidare så skapar du filen css/header.css och sedan lägger du till en import i din stylesheet för att importera den.

Din stylesheet css/style.css ser nu ut så här.

Importera stylesheet för header och normalisering.
@import url("normalize.css");
@import url("header.css");

Ordningen i hur man importerar och skriver sina regler spelar roll. De översta reglerna är minst signifikanta och de kan skrivas över eller justeras av de regler som skrivs längre ned i din stylesheet.

Det första vi gör för att styla headern är att fixa till navbaren. Här har vi valt att strukturera elementen som en ul/li-lista och det är relativt vanligt i sammanhanget.

HTML struktur för navbar.
  <header class="siteheader">
    <nav>
      <ul>
        <li><a href="me.html">Me</a></li>
        <li><a href="report.html">Redovisa</a></li>
        <li><a href="about.html">Om</a></li>
      </ul>
    </nav>
  </header>

Det första vi gör i stylen är att nollställa stilen för elementet ul, det är för att vi vill ha navbaren liggande. Placera koden i header.css.

Nollställ stilen för ul.
.siteheader nav ul {
  display: flex;    /* Arrange navigation links in a horizontal row */
  gap: 1rem;        /* Add spacing between individual navigation links */
  list-style: none; /* Remove default bullet points from the list */
  margin: 0;        /* Remove default margin around the list */
  padding: 0;       /* Remove default padding around the list */
}

När vi lägger till stylen så öppnar vi webbläsaren för att se hur stilen påverkar webbsidan.

Image description
Bild: Navbaren visas utan style för ul.
Image description
Bild: Devtools kan hjälpa dig att analysera hur stylen påverkar elementen.

Vi fortsätter med att styla länkarna i navbaren. Här har vi en style för hur länkarna ser ut som standard och hur länkarna ser ut när man håller muspekaren över länken, man “hovrar” över länken.

Ge stil till länkarna i navbaren.
/* Styling for navigation links */
.siteheader nav a {
  text-decoration: none;  /* Remove the default underline from links */
  color: #006400;       /* Set a dark green color for the navigation links */
  font-size: 1rem;        /* Define the font size for the links */
  font-weight: bold;      /* Make the text bold for better readability */
  transition: color 0.3s, border-bottom 0.3s; /* Add a smooth transition for color and border changes on hover */
}


/* Hover effect for navigation links */
.siteheader nav a:hover {
  color: #2e8b57;             /* Change the text color to forest green when hovered */
  text-decoration: underline;   /* Add an underline to the link when hovered */
}

NU har navbaren fått färg och länkarna i navbaren ändrar sig när man håller musen över dem.

Image description
Bild: Länkarna i navbaren har fått sin stil.

Logo och titel för webbplatsen

När man klickar på webbsidans logo, eller på dess titel, så brukar det leda till webbsidans start. Låt oss nu styla den delen.

De html-element som ingår är dessa.

Element för logo och titel.
  <header class="siteheader">
    <header>
      <a href="me.html">
        <img src="img/leaf.png" alt="Logotyp">
        <span>Kursen webtec</span>
      </a>
    </header>
  </header>

Vi börjar med att styla logon och titeln så att de har en lika höjd.

Stil för logo och titel.
/* Styling for the logo image */
.siteheader img {
  width: 40px;  /* Set the width of the logo */
  height: 40px; /* Set the height of the logo, ensuring it is square */
}


/* Styling for the text next to the logo */
.siteheader span {
  font-size: 1.5rem;  /* Define the font size for the header text */
  font-weight: bold;  /* Make the header text bold for emphasis */
  color: #2e8b57;   /* Apply a forest green color to the header text */
  font-family: 'Arial', sans-serif; /* Use Arial font, fallback to sans-serif */
}

Uppdatera stilen i din stylesheet och se hur den påverkar webbsidans element.

Nu vill vi avsluta med att placera logon och titeln på en rad så att man får en visuell känsla att de hänger ihop.

Placera logo och titel på en rad.
/* Styling for the logo and heading link */
.siteheader a {
  display: flex;          /* Arrange the logo and text in a horizontal row */
  align-items: center;    /* Align the logo and text vertically at the center */
  gap: 0.5rem;            /* Add spacing between the logo image and the text */
  text-decoration: none;  /* Remove the default underline from the link */
  color: inherit;         /* Inherit the color from the parent element for consistency */
}

När all kod är på plats i din stylesheet så kan det se ut så här.

Image description
Bild: Logo och sidans titel har nu fått sin stil.

Färglägg header och placera på en rad

Avslutningsvis så lägger vi en flexbox på de två grupperna av element som ligger i headern så att de kan placeras på samma rad och vi kan lägga en bakgrundsfärg.

/* General styling for the header */
.siteheader {
  display: flex;                  /* Use flexbox to arrange child elements horizontally */
  justify-content: space-between; /* Place items at both ends of the header */
  align-items: center;            /* Vertically align items to the center */
  padding: 1rem 2rem;             /* Add spacing inside the header (1rem top/bottom, 2rem left/right) */
  background-color: #eaf5ea;    /* Set a light green background color */
  border-bottom: 2px solid #2e8b57;   /* Add a forest green border at the bottom */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);   /* Apply a subtle shadow for a slight 3D effect */
}

Det vi gör är att använda display: flex som hjälper oss att organisera sidans olika element. I detta fallet placeras de på en rad som ges en bakgrundsfärg för att framhäva headern.

När all kod är på plats i din stylesheet så kan det se ut så här.

Image description
Bild: Sidans header är nu komplett.

En komplett stylesheet

Här kan du se den kompletta stylesheeten header.css för att styla sidans header. Studera den gärna i detalj för att lära dig vilka css-regler som används.

En komplett stylesheet
Stylesheet för headern.
/* Navigation menu styling */
.siteheader nav ul {
  display: flex;    /* Arrange navigation links in a horizontal row */
  gap: 1rem;        /* Add spacing between individual navigation links */
  list-style: none; /* Remove default bullet points from the list */
  margin: 0;        /* Remove default margin around the list */
  padding: 0;       /* Remove default padding around the list */
}


/* Styling for navigation links */
.siteheader nav a {
  text-decoration: none;  /* Remove the default underline from links */
  color: #006400;       /* Set a dark green color for the navigation links */
  font-size: 1rem;        /* Define the font size for the links */
  font-weight: bold;      /* Make the text bold for better readability */
  transition: color 0.3s, border-bottom 0.3s; /* Add a smooth transition for color and border changes on hover */
}


/* Hover effect for navigation links */
.siteheader nav a:hover {
  color: #2e8b57;                   /* Change the text color to forest green when hovered */
  border-bottom: 2px solid #2e8b57; /* Add a forest green underline to the link when hovered */
}


/* Styling for the logo image */
.siteheader header img {
  width: 40px;  /* Set the width of the logo */
  height: 40px; /* Set the height of the logo, ensuring it is square */
}


/* Styling for the text next to the logo */
.siteheader header span {
  font-size: 1.5rem;  /* Define the font size for the header text */
  font-weight: bold;  /* Make the header text bold for emphasis */
  color: #2e8b57;   /* Apply a forest green color to the header text */
  font-family: 'Arial', sans-serif; /* Use Arial font, fallback to sans-serif */
}


/* Styling for the logo and heading link */
.siteheader header a {
  display: flex;          /* Arrange the logo and text in a horizontal row */
  align-items: center;    /* Align the logo and text vertically at the center */
  gap: 0.5rem;            /* Add spacing between the logo image and the text */
  text-decoration: none;  /* Remove the default underline from the link */
  color: inherit;         /* Inherit the color from the parent element for consistency */
}


/* General styling for the header */
.siteheader {
  display: flex;                  /* Use flexbox to arrange child elements horizontally */
  justify-content: space-between; /* Place items at both ends of the header */
  align-items: center;            /* Vertically align items to the center */
  padding: 1rem 2rem;             /* Add spacing inside the header (1rem top/bottom, 2rem left/right) */
  background-color: #eaf5ea;    /* Set a light green background color */
  border-bottom: 2px solid #2e8b57;   /* Add a forest green border at the bottom */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);   /* Apply a subtle shadow for a slight 3D effect */
}

Så här ser det ut när man använder sig av den kompletta stylen.

Image description
Bild: Nu är headern stylad och klar.