The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Nav bar help needed
JUI43555
post Mar 12 2023, 03:21 AM
Post #1


Member
***

Group: Members
Posts: 44
Joined: 6-March 23
From: Perth
Member No.: 28,833
Hi, im trying to get the nav bar inside the nav section (under the header) but it seems to be below and behind everything. You can see it faintly. Not sure what I'm doing wrong. Hoping someone can help.

IPB Image

CODE
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Template Areas</title>
    <link rel="stylesheet" href="grid.css">
</head>
<body>

    <header>Header</header>
    
    
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Prices</a></li>
                <li><a href="#">Options</a></li>
                <li><a href="#">News</a></li>
                <li><a href="#">Contacts</a></li>
            </ul>
        </nav>
  


    <main>Main</main>
    <aside>Aside</aside>
    <footer>Footer</footer>
    
</body>


CODE
* {
    box-sizing: border-box;
    padding: 20px;
    margin: 1px;
}

body {
    background-image: url(./_images/Background\ image\ wallpaper.jpg);
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    height: 100vh;
    display: grid;
    grid-template-areas:
    'header header header'
    'nav nav nav'
    'aside main main'
    'aside main main'
    'footer footer footer';

    grid-template-columns: 40% 70%;
    grid-template-rows: 100px 50px 600px 100px;
}

header,
nav,
aside,
main,
footer {
    background-color: rgb(151, 142, 131);
    opacity: 95%;
    color: #fff;
    padding: 20px;
    border: skyblue 1px solid;
}

header{
    grid-area: header;
}

nav {
    grid-area: nav;
}

nav ul{
    display: grid;
    grid-template-columns: repeat(5, 0.5fr);
    justify-content:center;
    justify-items: center;
}


aside {
    grid-area: aside;
}

main {
    grid-area: main;
}

footer {
    grid-area: footer;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 27th April 2024 - 05:11 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC