My grid template areas ,for some reason, isn't working. It just shows every area below each other instead of how I set them up.
I tried to see if I have any typos but there are none. My browser does support grid function. I don't know if the problem is what I'm setting up as grid-template rows or columns.
`<!DOCTYPE html>
<html>
<head>
<title>Uputstvo</title>
<link rel="stylesheet" href="styleeee.css">
</head>
<body>
<div class="LogoStranice">
<img src="add.png" alt="none">
</div>
<div class="NaslovStranice">
<h1>Dodavanje studenata na listu predmeta</h1>
<h3>Uputstvo za dodavanje studenata</h3>
</div>
<div class="Info">
<marquee>Dobrodošli na stranicu na kojoj možete dodati studente na listu predmeta. Ispravno
popunjen obrazac, kojim se student dodaje na listu, možete pronaći
na stranici<a href="uputstvo.html"> Uputstvo</a> </marquee>
</div>
<div class="Navigacija">
<ul>
<li><a href="uputstvo.html">Uputstvo</a></li>
<li><a href="dodaj.html">Dodaj studenta</a></li>
</ul>
</div>
<div class="Sadrzaj">
<p class="tekst">Da bi unos podataka, koji se odnose na studenta, bio validan, potrebno je da podaci imaju sledeću formu:<br/>
Ime i Prezime<br/>
I ime i prezime moraju biti kraćei od 20 karaktera i ne smeju sadržati brojeve.<br/>
Ispravni formati unosa su:<br/>
Petar<br/>
Marko<br/>
Marinkovic <br/>
Nevalidni formati unosa su:<br/>
01Goran<br/>
Goran01<br/>
Petrovic9<br/>
Broj indeksa<br/>
Validan format gggg/bbbb, gde gggg predstavlja godinu, dok bbbb predstavlja redni broj. Bitno je da na petoj poziciji postoji znak '/'.<br/>
Ispravni formati unosa su:<br/>
2014/000 <br/>
2015/0699<br/>
2001/0322<br/>
Nevalidni formati unosa su: <br/>
20/0001 <br/>
20011/1000<br/>
2/899 <br/>
</p>
</div>
<div class="PotpisStranice">
<p>Skolska 2022/23 Stranica poslednji put azurirana <span class="Modifikacija">18.08.2023</span> </p>
</div>
</body>
</html>`
`.body{
width:1000px;
height:700px;
display:grid;
grid-template-rows:200px 50px 400px 50px ;
grid-template-columns: 200px 800px;
grid-template-areas:
"LogoStranice NaslovStranice"
"Info Info"
"Navigacija Sadrzaj"
"PotpisStranice PotpisStranice";
margin: auto;
}
.LogoStranice{
background-color: #78fd94;
height: 200px;
width:200px;
grid-area: LogoStranice;
}
.NaslovStranice{
height: 200px;
width: 800px;
background-color: #78fd94;
text-align: center;
padding-top: 40px;
grid-area: NaslovStranice;
}
.Info{
background-color: blue;
color: white;
height: 20px;
width: 1000px;
grid-area: Info;
}
.Navigacija{
background-color: gray;
font-size: 16px;
font-weight: bold;
height: 550px;
width:200px;
grid-area: Navigacija;
}
.Sadrzaj{
background-color:#d3e9d8 ;
height: 550px;
width: 800px;
grid-area: Sadrzaj;
}
.tekst{
padding: 30px 30px 30px 30px;
}
.PotpisStranice{
grid-area: PotpisStranice;
height: 40px;
width: 1000px;
color: white;
background-color: #2034fc;
}
.Modifikacija{
color:yellow;
}
img{
height: 200px;
width: 200px;
}`
The problem is in your stylesheet. You used .body {} with a dot (.), but this is a class selector. Since <body> is an element, the correct syntax is just its name, without the dot:
body {
width: 1000px;
height: 700px;
display: grid;
grid-template-rows: 200px 50px 400px 50px;
grid-template-columns: 200px 800px;
grid-template-areas:
"LogoStranice NaslovStranice"
"Info Info"
"Navigacija Sadrzaj"
"PotpisStranice PotpisStranice";
margin: auto;
}
However, using <body> just for style purposes is not advised. The properties you set to your <body> element are replicated across your entire website. If you eventually decide to create a new page with a different layout, things will get messy.
Instead, creating a wrapper specific to the page layout you are currently working on is better, and it will save you some headaches.
Another (really) good practice is writing semantic HTML. Take your code as an instance: Let's divide it into three sections:
<header><main><footer>Now we can style each individually, making code more accessible, flexible, and meaningful.
I created a codepen to illustrate one better approach to your layout; I hope you don't mind :) There are comments on the code explaining the suggestions.
Some references:
Styling Layout Wrappers In CSS (Excellent article)