The arrangement of grid elements does not impact the visual result in CSS

Having issues organizing my HTML into a grid format where the elements are not aligning correctly or moving at all. I am using Firefox and an online server to edit and host the website. Additionally, I am receiving a warning that 'grid-template-area' is an unknown property, which may be causing the issue.

.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>&copy; 2019, author.</small>
         </footer>
      </div>
      <!--Close 'wrapper' div -->
   </body>
   <!--Close 'body' -->
</html>
<!--Close 'html' -->

csscss-grid

Answer №1

Once you've addressed the issues pointed out by @s.kuznetsov, don't forget to assign a class or id to your main tag and then apply the following css directly to it instead of the wrapper, or in any other way that suits you best.

#main{
          display: grid;
            grid-gap: 0;
            grid-template-areas: "timeTable diaryNav"
                                 "diaryEntry extraWork" 
                                 "refrences refrences" 
        }

By using grid-area and grid-template-areas, you are effectively structuring your content similar to a table layout, specifying which content belongs in which cell.

Answer №2

Upon inspection, one glaring issue is the doctype being written in lowercase. It should be changed to uppercase. Additionally, the normalize needs to be properly labeled as "stylesheet" instead of "normal" since it's a CSS file. Furthermore, in the stylesheet.css, there is an error in the rel attribute where it says "stylesheet /". This extra space and slash must be removed for proper functionality.

Answer №3

Your code is facing an issue due to the absence of double quotes while declaring the class in HTML elements. The incorrect declaration looks like this:

<aside class=diaryNav>

To fix this, adjust it as follows:

<aside class="diaryNav">

There are several instances of this error throughout your code!

Additionally, there is a mistake in the CSS when assigning the rule grid-area: pageNav to .pageNav. The wrong notation is:

gridArea: pageNav;

The correct format should be:

grid-area: pageNav;

Remember to capitalize doctype, like so:

<!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>&copy; 2019, author.</small>
         </footer>
      </div>
   </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for enhancing the presentation of JSON information

I recently ventured into the world of JSON and JS, managing to create a JSON file to showcase data using .onclick event. While I have successfully generated and displayed the JSON data on screen, my next goal is to present it in a table format for better c ...

javascriptjquerycssjsonstyling

Enhancing jQuery UI popups with custom styles and layout

Currently, I am working on a web application that relies heavily on jQuery. To create popup windows, I have integrated jQuery UI dialog along with jQuery UI tabs and jScrollPane for customized scroll bars. The overall structure of the application is as fol ...

htmlcssjquery-ui

Ways to minimize the space between bootstrap columns

I have a code snippet that displays 4 items in a row, each with a bordered column to showcase the size. Within each column, there is a fixed-width and height wrapper that showcases an image and text. Is it possible to minimize the space between columns f ...

cssbootstrap-4

Is there a way to improve the efficiency of this jQuery/JavaScript snippet by rewriting it?

I've attempted at least 25 variations of this code to make it more efficient, but each one seems to cause issues. In essence, I am assigning different classes to elements in order to trigger a css/keyframes animation when the window width is 1025px o ...

javascriptjquerycss

Set right-aligned text within the footer of a Bootstrap card

Trying to display the status "Lost" in the Bootstrap card footer on the right side. The issue is, when I add margin-left to fix it in Chrome, it doesn't look the same in Microsoft Edge browser. How can I ensure it looks consistent across all browsers? ...

cssbootstrap-4

Challenges with TinyMCE and Drag Interaction

Here's the issue I'm facing with my page. The problem arises when using draggabilly to move the line. Dragging it to the left works fine, but dragging it to the right doesn't function properly in the area where the tinymce compiler is locat ...

htmlcsstinymcetinymce-4

Creating an inline css style for a different class within a div - tips and tricks

In my code, I have two separate div blocks. The first div has a class name of divone, while the second div has a class name of divtwo. I am able to write inline styles for the divone block, but now I want to apply inline styles directly to the divtwo block ...

wordpresshtmlcss

Changing the background color of a button

In the HEADER section, there are 4 buttons (B1, B2, B3, B4), each leading to a different page in the same tab. The background color of the buttons is set to WHITE. When a specific button is clicked, the entire page reloads and redirects to the correspond ...

javascriptjqueryhtmlcss

JavaScript MP3 player

Could someone kindly point out where I went wrong? I am attempting to create an MP3 player using CSS, HTML, and JavaScript. Currently, the script only functions to start or stop the audio file. However, I keep encountering an error message: TypeError: docu ...

javascripthtmlcss

What is the best method for showcasing various content using a uniform accordion style in React?

What is the most efficient way to display various content within multiple accordions? view image description here This is the current approach I am taking in my project, where shipping information and delivery options will involve different textboxes, labe ...

javascriptcssreactjstwitter-bootstrap

Displaying a Facebook iframe on the left side of the page

I'm struggling with positioning the Facebook iframe embed to sit on the left of the text. I want it to be aligned with the left margin, but also have the text flow beside it from the same height. Can anyone offer some guidance on how to achieve this u ...

cssvue.jsiframe

"Troubleshooting the issue with the jQuery function not being able to trigger a

When I press the enter key in an input field, I want to be able to select options from a searchable dropdown menu. However, this functionality is not working and the alert message I set up is also not functioning as expected. <div class="form-group m-f ...

javascriptjquerycsshtmlbootstrap-4

NgTemplate Bootstrap is not recognizing my CSS class

I made a CSS adjustment to alter the modal width to 50% instead of 100% of the screen. However, the class modal-content is being duplicated after the modification. https://i.sstatic.net/VZxM6.png https://i.sstatic.net/ahLkn.png CSS .modal-content{ ...

cssangularbootstrap-4bootstrap-modal

Guide on utilizing slider arrows for enabling Twitter Bootstrap tabnav controls

Previously, I sought help with an issue regarding a Navtab not being highlighted when active. The problem persists despite successfully configuring the slider to swipe to the corresponding slide upon selecting a tab. Specifically, if I manually slide fro ...

htmlcsstwitter-bootstrapbootstrap-carousel

Lines running horizontally on either side of the text

I recently found a helpful solution on Stack Overflow, but it's not exactly what I'm looking for due to two main reasons: I am unsure how to adjust the width of the lines to make them shorter. The solution uses H2, however, I have already d ...

htmlcsswordpress

Utilizing various z-index values for multiple background images in a single CSS class

My approach may be completely off. I am in the process of building a website using sliced images from a .PSD file created by a graphic artist. Essentially, the background image consists of 4 green bars angled at 45 degrees slightly intertwined with 3 blue ...

htmlcssbackground-imagez-index

What is the best way to position my Bootstrap sidenav on the right side of the page?

Sorry if this is a basic question, but I'm new to this. Currently, the sidebar is on the left side. How can I move it to the right? #sidebar-wrapper { top: 52px; right: -200px; width: 200px; background-color: #27CD70; color: white; posi ...

htmlcsstwitter-bootstrap-3

Using jQuery to toggle between two elements and updating the SELECT field

<div class="r_row"> <div class="row field_currency"> <div class="f_row"><label class="" for="currency">Currency</label></div> <div class="r_row"> <select id="currency" name="currency" class=" select ...

javascriptjqueryhtmlcss

Switching the Focus in Laravel Layouts

My understanding of CSS media queries includes: @media screen and (orientation: portrait) { div.container { ... } } @media screen and (orientation: landscape) { div.container { ... } } Despite this knowledge, I am looking ...

htmlcssbootstrap-4laravel-blade

show a pie chart at the top of the div using highcharts

i am struggling with positioning the high-chart with a label, as seen in the image below https://i.sstatic.net/m9bXW.png does anyone know how to properly display the chart from the top left corner? i have attempted to adjust the settings like this { ...

javascriptcsshighchartsrender