Skip to content
Kursen webtec

Footer i tre delar, triptych

Vi skall nu bygga footer-delen av webbplatsen och fylla den med innehåll som kan vara bra att ha samt styla den likt vi gjorde med headern.

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

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

Footern består av flera delar och dels är det en tredelad column vilket också kallas “triptych” och dels en avslutande footer med en copyright. Upplägget liknar nog det vi kan se på många webbplatser.

Grundkonstruktionen för footern

Till att börja med så skapar vi en ny fil för stylen footer.css och den importerar vi till sidans stylesheet som nu ser ut så här.

Sidans stylesheet importerar nu även footer.css.
// style.css
@import url("normalize.css");
@import url("header.css");
@import url("footer.css");

Vi uppdaterar nuvarande html-kod så att den i footern skapar tre kolumner och en rad under kolumnerna. Tanken är att vi använder flexbox för att strukturera footerns olika delar.

Element som strukturerar sidans footer.
  <footer class="sitefooter">
    <div class="footer-triptych">
      <div class="footer-column">
        <h3>Tekniker</h3>
        <ul>
          <li><a href="#">Länk 1</a></li>
          <li><a href="#">Länk 2</a></li>
          <li><a href="#">Länk 3</a></li>
        </ul>
      </div>
      <div class="footer-column">
        <h3>Manualer</h3>
        <ul>
          <li><a href="#">Länk 1</a></li>
          <li><a href="#">Länk 2</a></li>
          <li><a href="#">Länk 3</a></li>
        </ul>
      </div>
      <div class="footer-column">
        <h3>Verktyg</h3>
        <ul>
          <li><a href="#">Länk 1</a></li>
          <li><a href="#">Länk 2</a></li>
          <li><a href="#">Länk 3</a></li>
        </ul>
      </div>
    </div>
    <div class="footer-bottom">
      <p>&copy; Kursen Webtec. Copyright av mig.</p>
    </div>
  </footer>

Prova att ladda om din sida för att se hur footern ser ut utan style.

I footer.css placerar vi följande grundstruktur som delar upp footern i dess delar.

Style för att ge sidans footer en grundstruktur.
/* General styling for the footer */
.sitefooter {
  border-top: 2px solid #2e8b57; /* Forest green border */
  background-color: #2e2e2e;      /* Dark gray-green background */
  color: #f9f9f9;                 /* Light/white text */
  padding: 1.5rem 1rem;             /* Reduce padding for a shorter footer */
  font-family: 'Arial', sans-serif; /* Font for footer text */
}


/* Triptych layout */
.footer-triptych {
  display: flex;                  /* Use flexbox for horizontal layout */
  justify-content: space-between; /* Distribute columns evenly */
  gap: 2rem;                      /* Space between columns */
  margin-bottom: 1.5rem;          /* Reduce space below the triptych */
}


/* Individual footer column */
.footer-column {
  flex: 1;                      /* Equal width for each column */
  background-color: #3a3a3a;  /* Slightly lighter gray background for pop */
  padding: 1rem;                /* Add padding inside columns */
  border-radius: 8px;           /* Rounded corners for columns */
}

De viktiga delarna för att skapa strukturen enligt flexbox-modellen är display: flex och flex: 1.

Det ser ut så här när vi är klara.

Image description
Bild: Sidans footer har nu en grundstruktur.

Den kan behövas lite finjusteringar, låt oss lägga till det.

Snygga till footern

När grundstrukturen är på plats så kan vi finslipa utseendet med css. Här kommer ett förslag.

Snygga till footerns utseende.
.footer-column h3 {
  margin: 0 0 0.5rem;   /* Remove top margin and keep space below */
}


.footer-column ul {
  list-style: none;     /* Remove bullet points */
  padding: 0;           /* Remove padding */
  margin: 0 0 1.5rem 0; /* Adjust margin */
}


.footer-column ul li {
  margin-bottom: 0.5rem; /* Space between list items */
}


.footer-column ul li a {
  color: #f9f9f9;                             /* Light text for links */
  text-decoration: none;                        /* Remove underline */
  transition: color 0.3s, text-decoration 0.3s; /* Smooth hover effect */
}


.footer-column ul li a:hover {
  color: #2e8b57;           /* Forest green hover color */
  text-decoration: underline; /* Add underline on hover */
}


/* Footer bottom row */
.footer-bottom {
  text-align: center;           /* Center align the text */
  font-size: 0.85rem;           /* Smaller text size */
  border-top: 1px solid #444;   /* Subtle border at the top */
  padding-top: 0.5rem;          /* Reduce space above the text */
}

Nu ser det ut på detta viset. Små justeringar kan göra en stor effekt av hur webbsidan upplevs.

Image description
Bild: Sidans footer ser nu lite snyggare ut.

Låt oss nu lägga till innehåll i footern.

Länkar till dokumentation

Här följer att antal länkar som du kan uppdatera din footer med. Du kan gruppera länkarna som du vill i din footer och du kan även ändra rubriker i footern.

Först har vi ett par länkar till manualer och dokumentation till resurser där vi kan lära oss mer om HTML och CSS.

<ul>
    <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference">MDN: HTML referens</a></li>
    <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference">MDN: CSS referens</a></li>
    <li><a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a></li>
    <li><a href="https://www.w3.org/Style/CSS/">CSS Standard</a></li>
    <li><a href="https://www.w3.org/2009/cheatsheet/">Cheat Sheet</a></li>
</ul>

Lägg gärna till fler länkar som du tycker är bra att ha. Här kommer ett par förslag.

Resurser på W3Schools.

Organisationen WHATWG arbetar med standardiseringar av webbteknologier, främst gäller det HTML, HTML API:er och Document Object Model (DOM).

Organisationen W3C arbetar med standardiseringar av webbteknologier, bland annat CSS.

Fler bra resurser att lägga i footern

Det finns flera olika typer av stödverktyg som kan vara bra att ha när man utvecklare webbsidor. Här följer ett par som du bör lägga till i din footer.

  • CanIUse, en webbplats som visar vilke HTML & CSS konstruktioner som stöds av olika versioner av webbläsare.
  • CodePen, ett utvecklingsverktyg där du kan skriva HTML och CSS för att testa konstruktioner som du även kan dela med din kompis. Det finns även ett stort utbud av konstruktioner som du kan låna eller hämta inspiration ifrån.

Placera länkarna i din footer så tappar du inte bort dem.

När allt är klart kan det till exempel se ut som följer. Men du får gärna strukturera innehållet i din footer på annat sätt.

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

Image description
Bild: Nu är footern stylad och klar samt har relevant innehåll.

Du får gärna styla din footer så att den ser ut som du själv vill ha den.