Brandon Bridges
Reputation: 90
Order of grid elements has no effect on the visual outcome CSS
When trying to put my HTML into a grid format the elements do not change to the correct postion set and do not move at all and was wondering if there was any fix to this. I am using firefox and am using an server to edit the code and host the website. As well as this it comes up with a cautio that grid-template-area: is an unknown propiety if this makes any diffrence.
.diaryNav {
grid-area: diaryNav;
margin-left: 0px;
background-color: #3F3F3F;
padding: 30px;
margin-left: 35px;
margin-right: 880px;
}
.banner {
grid-area: banner;
}
.timeTable {
grid-area: timeTable;
margin-left: 0px;
}
.diaryEntry {
grid-area: diaryEntry;
}
.extraWork {
background-color: #66fcf1;
color: black;
margin-left: 0px;
grid-area: extraWork;
}
.refrences {
grid-area: refrences;
margin-left: 0px;
}
.pageNav {
gridArea: pageNav;
margin-left: 0px;
}
#wrapper {
display: grid;
grid-gap: 0;
grid-template-areas: "banner" "timeTable" "pageNav" "diaryNav" "diaryEntry" "extraWork" "refrences" "footer";
}<!doctype html><!--HTML5 doctype declaration -->
<html lang="en">
<!--default language of the document content -->
<head>
<meta charset="utf-8">
<!--character encoding for the document (Unicode) -->
<title>Brandon's Learning Journal</title>
<!--web page title -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/normalize.css" rel="normal">
<link href="css/stylesheet.css" rel="stylesheet /">
</head>
<body>
<!--Markup all web page content inside the 'body' tags -->
<div id="wrapper">
<a id="top"></a>
<!--The 'wrapper' contains all the page content-->
<header class=banner>
<!--The main heading for the page -->
<h1>Welcome to my Learning journal</h1>
<h2>
Feel free to look around and check out the other pages avaliable
</h2>
</header>
<aside class=pageNav>
<nav class="menu">
<!--The primary navigation for the page -->
<ul>
<li><a href="">Learning Journal</a></li>
<li><a href="tutorial.html">Tutorial</a></li>
<li><a href="contact.html">Contact me</a></li>
</ul>
</nav>
</aside>
<main>
<!--The main page content -->
<aside class=timeTable>
<h2>Weekly Posts</h2>
<table class=dates border="1">
<tr>
<th>Day/time</th>
<th>Monday</th>
<th>Tuesday</th>
</tr>
<tr>
<td>9-10am</td>
<td></td>
<td>CI435 lecture</td>
</tr>
<tr>
<td>10-11am</td>
<td>CI401 lecture</td>
<td>CI435 lab </td>
</tr>
</table>
</aside>
<aside class=diaryNav>
<p class=menu><a href="#w1">Go to week one</a></p>
<p class=menu><a href="#w2">Go to week two</a></p>
<p class=menu><a href="#w3">Go to week three</a></p>
<p class=menu><a href="#w4">Go to week four</a></p>
</aside>
<article class=diaryEntry>
<diary>
<ul>
<li>
<a id="w1"></a>
<h3>Week 1: ...</h3>
<p>Hello </p>
<figure>
<img src="images/ssww1.png" alt=" " />
<figcaption>Week 1 of the website<br />
<small>Screenshot Brandon Bridges</small>
</figcaption>
</figure>
<p>I learned to:</p>
<ol>
<li>a</li>
<li>b</li>
</ol>
</li>
<li>
<a id="w2"></a>
<h3>Week 2: ...</h3>
<p>Hello </p>
<p>I learned to:</p>
<ol>
<li>a</li>
<li>b</li>
</ol>
</li>
<li>
<a id="w3"></a>
<h3>Week 3: ...</h3>
<p>Hello </p>
<p>I learned to:</p>
<ol>
<li>a</li>
<li>b</li>
</ol>
</li>
</ul>
</diary>
</article>
<aside class=extraWork>
<h2>My own work outside of lessons</h2>
<p>Some reference here to my own reading and research, explaining what I have done and what I have learned from it.</p>
</aside>
<aside class=refrences>
<h2>References</h2>
<ol>
<li>
<blockquote>helo???</blockquote>
</li>
<li>...</li>
</ol>
<p class=menu><a href="#top">Go to top</a></p>
</aside>
</main>
<!--Close main page content -->
<footer>
<!--Footer content -->
<small>© 2019, author.</small>
</footer>
</div>
<!--Close 'wrapper' div -->
</body>
<!--Close 'body' -->
</html>
<!--Close 'html' -->Upvotes: 2
Views: 72
Answers (3)
Amit Creation
Reputation: 342
After fixing what @s.kuznetsov has described you should mind adding a class or an id to you main tag and then apply this css to it instead of the wrapper or however you prefer
#main{
display: grid;
grid-gap: 0;
grid-template-areas: "timeTable diaryNav"
"diaryEntry extraWork"
"refrences refrences"
}
When using grid-area and grid-template-areas you are implicitly arranging your content in a table-like form, so you specify which area goes into which cell.
Upvotes: 1
s.kuznetsov
Reputation: 15213
The problem with your code is the missing double quotes when declaring the class in html elements. You pointed out as:
<aside class=diaryNav>
Correct like this:
<aside class="diaryNav">
And you have many items with this error!
Also, there is one error in the css, when specifying rule grid-area: pageNav to .pageNav. You indicated like this:
gridArea: pageNav;
Correct like this:
grid-area: pageNav;
And write doctype in uppercase. Like this:
<!DOCTYPE html>
.diaryNav {
grid-area: diaryNav;
margin-left: 0px;
background-color: #3F3F3F;
padding: 30px;
margin-left: 35px;
margin-right: 880px;
}
.banner {
grid-area: banner;
}
.timeTable {
grid-area: timeTable;
margin-left: 0px;
}
.diaryEntry {
grid-area: diaryEntry;
}
.extraWork {
background-color: #66fcf1;
color: black;
margin-left: 0px;
grid-area: extraWork;
}
.refrences {
grid-area: refrences;
margin-left: 0px;
}
.pageNav {
grid-area: pageNav;
margin-left: 0px;
}
#wrapper {
display: grid;
grid-gap: 0;
grid-template-areas: "banner" "timeTable" "pageNav" "diaryNav" "diaryEntry" "extraWork" "refrences" "footer";
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Brandon's Learning Journal</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/normalize.css" rel="normal">
<link href="css/stylesheet.css" rel="stylesheet /">
</head>
<body>
<div id="wrapper">
<a id="top"></a>
<header class="banner">
<h1>Welcome to my Learning journal</h1>
<h2>
Feel free to look around and check out the other pages avaliable
</h2>
</header>
<aside class="pageNav">
<nav class="menu">
<ul>
<li><a href="">Learning Journal</a></li>
<li><a href="tutorial.html">Tutorial</a></li>
<li><a href="contact.html">Contact me</a></li>
</ul>
</nav>
</aside>
<main>
<aside class="timeTable">
<h2>Weekly Posts</h2>
<table class="dates" border="1">
<tr>
<th>Day/time</th>
<th>Monday</th>
<th>Tuesday</th>
</tr>
<tr>
<td>9-10am</td>
<td></td>
<td>CI435 lecture</td>
</tr>
<tr>
<td>10-11am</td>
<td>CI401 lecture</td>
<td>CI435 lab </td>
</tr>
</table>
</aside>
<aside class="diaryNav">
<p class="menu"><a href="#w1">Go to week one</a></p>
<p class="menu"><a href="#w2">Go to week two</a></p>
<p class="menu"><a href="#w3">Go to week three</a></p>
<p class="menu"><a href="#w4">Go to week four</a></p>
</aside>
<article class="diaryEntry">
<diary>
<ul>
<li>
<a id="w1"></a>
<h3>Week 1: ...</h3>
<p>Hello </p>
<figure>
<img src="images/ssww1.png" alt=" " />
<figcaption>Week 1 of the website<br />
<small>Screenshot Brandon Bridges</small>
</figcaption>
</figure>
<p>I learned to:</p>
<ol>
<li>a</li>
<li>b</li>
</ol>
</li>
<li>
<a id="w2"></a>
<h3>Week 2: ...</h3>
<p>Hello </p>
<p>I learned to:</p>
<ol>
<li>a</li>
<li>b</li>
</ol>
</li>
<li>
<a id="w3"></a>
<h3>Week 3: ...</h3>
<p>Hello </p>
<p>I learned to:</p>
<ol>
<li>a</li>
<li>b</li>
</ol>
</li>
</ul>
</diary>
</article>
<aside class="extraWork">
<h2>My own work outside of lessons</h2>
<p>Some reference here to my own reading and research, explaining what I have done and what I have learned from it.</p>
</aside>
<aside class="refrences">
<h2>References</h2>
<ol>
<li>
<blockquote>helo???</blockquote>
</li>
<li>...</li>
</ol>
<p class="menu"><a href="#top">Go to top</a></p>
</aside>
</main>
<footer>
<small>© 2019, author.</small>
</footer>
</div>
</body>
</html>Upvotes: 0
Yugi
Reputation: 1
The first thing I can notice is that you have the doctype in lowercase, change it to , the next is the normalize, the rel says "normal" which is wrong because it is a css file and it should say "stylesheet". The next thing that is the problem is that it says in the stylesheet.css file in the rel it says "stylesheet /", remove the space and the /. With that it should work
Upvotes: 0
Related Questions
- Change the column order in a CSS grid
- CSS, elements in nested grid not placed correctly
- Unexpected CSS Grid behaviour
- CSS Grid template areas in wrong order
- Reverse display order of css grid columns
- Why are some grid items appearing out of order?
- CSS GRID not able to rearrange items with order:;
- CSS grid items are not ordered according to grid-area property
- Re-ordering grid items
- Does the order of elements define their place in a CSS grid?