Sidans huvudsakliga innehåll med main och aside

Vi skall nu skapa en grundstruktur för sidans huvudsakliga innehåll.

Image description — Bild: Strukturen är på plats och den är färglagd för tydlighet.

Stylen som sker i denna del tänker jag placera i filen main.css som importeras in i style.css.

Wrapper, main och aside

Min tänkta grundstrukturen för sidans huvudsakliga innehåll är main + aside tillsammans med en wrapper runt de båda. Det ser ut så här i html-kod.

  <div class="wrap">
    <main class="main"></main>
    <aside class="aside"></aside>
  </div>

Tanken är att ha en wrapper runt main/aside för att underlätta styling. Inuti main skall sidans huvudsakliga innehåll placeras. Inuti en aside placeras innehåll som är viktigt, men inte lika viktigt till main. Ofta placerar man en aside tillsammans med main om det finns relevant och relaterat innehåll som man vill visa upp.

Jag har valt att lägga till klasser för att förenkla stylingen.

Jag tänker använda flexbox för att styla grunden så att jag kan placera main och aside som jag vill.

Innan vi går vidare så ser sidan ut så här och det innehåll du ser är placerat innanför main-elementet.

Vi kan nu styla wrapper, main och aside med flexbox. Grunden för stylen med flexbox ser ut så här.

/**
 * Use flexbox container for layout.
 */
.wrap {
  display: flex;    /* Enables Flexbox layout */
  flex-wrap: wrap;  /* Allows items to wrap onto the next line if needed */
  gap: 1rem;        /* Adds spacing between child elements */
}

.main {
  flex: 3;          /* Allocates 3 parts of available space to the main area */
}

.aside {
  flex: 1;          /* Allocates 1 part of available space to the aside */
}

För att göra det tydligare, vilken del som är vilken och hur de placeras i webbsidan, så lägger vi till bakgrundsfärger för de olika elementen.

/**
 * Add colors for visibility of the areas.
 */
.wrap {
  background-color: #FFC5D9; /* Soft Pink */
  padding: 1rem;               /* Adds padding around the container */
}

.main {
  background-color: #C5F6E2; /* Mint Green */
}

.aside {
  background-color: #D7C5F6; /* Pale Lavender */
}

Nu kan webbsidan se ut så här

Använd gärna devtools för att undersöka sidans olika element och se vilken style de har. Det är en bra idé att bli duktig på att hantera devtools.

Alternativ style och färg

De färger som används ovan är bra när man vill se strukturen på de element som bygger upp sidan. Vill man göra sidan lite snyggare så kan man justera stylen.

Här är ett förslag, så att du har något att utgå ifrån.

/**
 * Add colors for visibility of the areas.
 */
.wrap {
  background-color: #FFFFFF; /* White */
}

.main {
  background-color: #f9f9f9;  /* Light gray background for better contrast */
  padding: 1rem;                /* Adds space inside the main area */
  border-radius: 8px;           /* Rounds the corners of the main area */
}

.aside {
  background-color: #f1f1f1; /* Slightly darker gray background */
  padding: 1rem;               /* Adds space inside the sidebar */
  border-radius: 8px;          /* Rounds the corners of the sidebar */
}

Nu ser sidan ut så här. Det blev en ljus grå bakgrund till main-delen och en aning mörkare för asiden och wrappern fick bli vit.

Då börjar det bli dags att fylla webbsidan med innehåll.