I am very new to the field of network coding and need some help. I'm making a web page for a local sports team and since their web page doesn't look that great and Wordpress isn't very user-friendly, I thought it might be easier to try coding it myself.
I can't enter the navigation bar, main content, and footer on the page. I want the navigation bar, main content, and footer to be entered and only 80% wide so you see some background with pictures of athletes from sports teams)
#footerWrapper { max-width: 80%;
max-height: 5%;
margin-bottom: 20px;
line-height: 30px;
font-size: 0.9em;
border: 0 solid #ddd;
border-bottom-color: #3F8444;
border-width: 1px 0;}
/*Positions and Margins*/
.image {
position: absolute;
top:100px;
left:100px;
}
.image-1 {
position: absolute;
top:20px;
right: 100px;
}
header{
text-align: center;
margin-top: 100px;
margin-bottom: 100px;
}
main{ width: 80%;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;}
footer{
position: static;
left: 0;
bottom: 0;
width: 80%;
height: 5%;}
p {margin-left: 5px;
margin-right: 5px;}
/*Navigation*/
ul { display: flex;
flex-direction: row;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #04AA6D;
width: 80%;
}
/*li {float: left;}*/
li a, .dropdown li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {background-color: #111;}
li.dropdown {
display: inline-block;}
.dropdown-content {
display:none;
position: absolute;
background-color: #04AA6D;
color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0,.2);
z-index: 1;
}
.dropdown-content a
{
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #111;color: white;}
.dropdown:hover .dropdown-content
{
display: block;
}
</style>
</div>
</head>
<body>
<header>
<div class="image" id="Sports Team logo">
<img src="Sport Teams logo">
</div>
<div class="image-1" id="Club logo">
<img src="Club logo" width="246" height="237">
</div>
<h1>Sports Team</h1>
</header>
<nav>
<ul>
<li><a href="Sports Team url link">Home</a></li>
<li class="dropdown">
<a class="dropbtn">Club Info</a>
<div class="dropdown-content">
<a href="Sports Team url link">About Us</a>
<a href="Sports Team url link">Committee</a>
<a href="Sports Team url link">Contact Us</a>
<a href="Sports Team url link">Game Rules</a>
<a href="Sports Team url link">Uniforms</a>
<a href="Sports Team url link">Fair Play</a>
<a href="Sports Team url link">Terms and Conditions</a>
</div>
<li class="dropdown">
<a class="dropbtn">Winter Season 2023</a>
<div class="dropdown-content">
<a href="Sports Team url link">Training Information</a>
<a href="Sports Team url link">Game Details</a>
<a href="Sports Team url link">Registration</a>
<a href="Sports Team url link">Season Info Pack</a>
<a href="Sports Team url link">Handbook</a>
<a href="Sports Team url link">Privacy Policy</a>
</div>
<li class="dropdown">
<a class="dropbtn">Summer Season 2023</a>
<div class="dropdown-content">
<a href="Sports Team url link">Training Information</a>
<a href="Sports Team url link">Game Details</a>
<a href="Sports Team url link">Registration</a>
<a href="Sports Team url link">Season Info Pack</a>
</div>
<li><a href="Sports Team url link">Umpire Information</a>
</ul>
</nav>
<Div></Div>
<main>
<div class="main">
<h2>Contact Us</h2>
<p>Sports Team email</p>
</main>
</body>
</html>
I tried many different CSS styles float, margin, flex, grid, etc.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
here you go! What a great start. Looks like you're hanging out. I highly recommend looking into something like tailwindcss or bootstrap.
These frameworks help handle most of the tedious fine-tuning. You won't actually have much CSS in your file, you can just add class names. Something like
class="m-auto d-flex text-center"will replace all your css.These frameworks are based on classes, which is my next recommendation. You should use classes or IDs for everything. This allows you to write cleaner, more organized code. You should have:
<style> .nav_bar { } </style> <ul class="nav_bar"> ... </ul>What if you need to have multiple
ulon your site, but they need to be different colors or one should not be centered?Here's how to center existing code: Margins on navigation bar and main bar should be auto instead of 0.
main { width: 80%; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; margin: auto; } ul { display: flex; flex-direction: row; align-items: center; list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #04AA6D; width: 80%; }