RHH
Coder
I've created an HTML and CSS file pair that displays a navbar that I want to use on my website. The pair works and displays the navbar just as I want it to.
When I try to cut and paste the HTML into my index.html file and the CSS into my CSS file, it breaks the display. Obviously there is something I don't know.
I've searched and read articles and gone to my old books to no avail. I'm posting my code that works for the heading alone.
In the CSS you can see that I tried to use a gridbox but abandoned it in favor of the ul approach which works.
My questions are 1) can this code be cut and pasted into the relevant files? 2) If so, how? 3) Should I be using a different approach? 4) If so, what?
TIA
HTML
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>
The Hutchins Clan
</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css"
rel="stylesheet" href="CSS/clan.css" media="screen">
<!-- 26 SEP 2023 -->
</head>
<body>
When I try to cut and paste the HTML into my index.html file and the CSS into my CSS file, it breaks the display. Obviously there is something I don't know.
I've searched and read articles and gone to my old books to no avail. I'm posting my code that works for the heading alone.
In the CSS you can see that I tried to use a gridbox but abandoned it in favor of the ul approach which works.
My questions are 1) can this code be cut and pasted into the relevant files? 2) If so, how? 3) Should I be using a different approach? 4) If so, what?
TIA
Code:
/* filename: clan.css */
/* design and create a header - maybe just a line of menu items */
/* #navbar */
#navbar {position:relative; z-index: 9999;} /* Navbar is on top */
#idOfContentHere {position: relative; z-index:0} /* Your content is not on top */
.navbar
{
display: grid;
position: relative;
z-index: 9999;
margin-left: auto;
margin-right: auto;
width: 1100px;
height: 20px;
border-width: 2px;
border-style: ridge;
border-radius: 5px;
grid-template-columns: ;
grid-template-rows: 1;
grid-template-areas:
'home personal-pages hutchins-line baker-line histories anecdotes submissions search help';
}
.navbar > div
{
background-color: beige;
text-align: center;
font-size: 15px;
padding: 5px;
}
.home
{
grid-area: home;
}
.personal-pages
{
grid-area: personal-pages;
}
.hutchins-line
{
grid-area: hutchins-line;
}
.baker-line
{
grid-area: baker-line;
}
.histories
{
grid-area: histories;
}
.anecdotes
{
grid-area: anecdotes
}
.submissions
{
grid-area: submissions;
}
.search
{
grid-area: search;
}
.help
{
grid-area: help;
}
/* End of NAVBAR */HTML
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>
The Hutchins Clan
</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css"
rel="stylesheet" href="CSS/clan.css" media="screen">
<!-- 26 SEP 2023 -->
</head>
<body>
