Budowa strony pomocy juz sie zgubiłem z tym :(

Question

Witam mam problem z html i css męcze się z tym i cos nie wychodzi jak powinno :(

Tutaj macie link https://codepen.io/kapsel5308/pen/ZEpdmpb 

Będę bardzo wdzięczny :) gdy ktos mi pomoże

Comments

Polecam do nauki: FLEXBOX FROGGY  

A Complete Guide to Flexbox

BUILD WITH FLEXBOX - edytor online

 

P.S. Ja preferuje grida 

<div class="grid-container">
  <div class="nav"></div>
  <div class="sideL"></div>
  <div class="content"></div>
  <div class="sideR"></div>
  <div class="footer"></div>
</div>

* {
  box-sizing: border-box;
}
html, body { 
  margin: 0;
  padding: 0;
  border: 0;
}
.grid-container {
  display: grid;
  grid-template-columns: 0.5fr 2fr 0.5fr;
  grid-template-rows: 0.25fr 3fr 0.25fr;
  gap: 0.5em 1em;
  grid-template-areas:
    "nav nav nav"
    "sideL content sideR"
    "footer footer footer";

  width: 100vw;
  height: 100vh;
  border: 2px dotted pink;
  padding: 0.25em 0.75em;
}
.nav { 
  grid-area: nav; 
  background-color: pink;
}
.sideL { 
  grid-area: sideL;
  background-color: #548EDF;
}
.content { 
  grid-area: content; 
  background-color: #DFA554;
}
.sideR { 
  grid-area: sideR; 
  background-color: #54DF5F;
}
.footer { 
  grid-area: footer; 
  background-color: pink;
}
.grid-container * {
  box-shadow: 0px 0px 4px 2px rgba(10,10,10,0.9);
  border-radius: 0.5em;
  transition: all 1s;
}

/* Do prezentacji bloków */
.grid-container *:before {
  content: attr(class);
  font: 2em/2.2em monospace;
  margin: 2em 2em;
}
.grid-container *:hover {      
  animation: puls 1.25s ease-in-out infinite;
}

@keyframes puls {
  from {
    transform: scale(1);   
  }
  50% {
    transform: scale(0.99);
    box-shadow: none;
  }
  to {
    transform: scale(1);   
  }
}

---

Proszę zapoznać się z regulaminem tego forum przed następnym zadaniem pytania, znajdziesz tam między innymi:

Zabronione jest nieuzasadnione ukrywanie lub usuwanie treści, również przez edycję zadanego przez siebie pytania, do którego udzielone zostały odpowiedzi innych Pasjonatów.

Sugeruję również pomyśleć o innych, którzy napotkali problem jak Twój i nie mogą skorzystać z odpowiedzi @CubeStorm, gdyż postanowiłeś z niewiadomych mi pobudek* zmienić treść pytania na absurdalną względem odpowiedzi.

* - nie wiem, choć się domyślam.

Answer 1

Błąd polega na tym że w kodzie html masz element o id: topbarL, a w kodzie css stylizujesz element z id tupbarL.

Co od razu rzuca się w oczy to stylizacja elementów, lepiej jest to robić po klasach, a nie po id tak jak to teraz robisz. 

Do rozmieszenia elementów w odpowiednich miejscach używasz float: left co również nie jest już zalecane, są nowsze opcje takie jak css grid czy sam flexbox.

Przy #content popełniłeś taki błąd: width: 60 %, znak % powinien być od razu przy liczbie.

Flexbox

Grid

Klasy HTML