Cara memusatkan bar navigasi, kandungan utama dan pengaki
Saya sangat baru dalam bidang pengekodan web dan memerlukan bantuan. Saya sedang membuat halaman web untuk pasukan sukan tempatan dan memandangkan halaman web mereka tidak kelihatan sangat bagus dan Wordpress tidak begitu mesra pengguna, saya fikir mungkin lebih mudah untuk mencuba pengekodannya sendiri.
Saya tidak boleh memasuki bar navigasi, kandungan utama dan pengaki pada halaman. Saya mahu bar navigasi, kandungan utama dan pengaki dimasukkan dan hanya 80% lebar supaya anda boleh melihat beberapa latar belakang dengan gambar atlet dari pasukan sukan)
#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>
Saya mencuba banyak gaya CSS yang berbeza terapung, jidar, lentur, grid, dll.
