由于某些原因,我的网格模板区域不起作用.它只是显示每个区域的下方,而不是我如何设置它们.
我试着判断我是否有任何打字错误,但没有.我的浏览器确实支持网格功能. 我不知道问题是不是我设置为网格模板的行或列.
`<!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;
}`