Nav bar help needed |
Nav bar help needed |
JUI43555 |
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.
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; } |
Lo-Fi Version | Time is now: 11th May 2024 - 07:21 AM |