Je suis très nouveau dans le domaine du codage Web et j'ai besoin d'aide. Je crée une page Web pour une équipe sportive locale et comme leur page Web n'a pas l'air très belle et que Wordpress n'est pas très convivial, j'ai pensé qu'il serait peut-être plus facile d'essayer de la coder moi-même.
Je ne parviens pas à accéder à la barre de navigation, au contenu principal et au pied de page de la page. Je veux que la barre de navigation, le contenu principal et le pied de page soient saisis et larges de seulement 80 % afin que vous puissiez voir un arrière-plan avec des photos d'athlètes d'équipes sportives)
#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>
J'ai essayé beaucoup de styles CSS différents float, margin, flex, grid, etc.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Bravo ! Quel bon début. On dirait que tu traînes. Je recommande fortement de rechercher quelque chose comme tailwindcss ou bootstrap.
Ces frameworks aident à gérer la plupart des réglages fastidieux. En réalité, vous n'aurez pas beaucoup de CSS dans votre fichier, vous pouvez simplement ajouter des noms de classe. Quelque chose comme
class="m-auto d-flex text-center"remplacera tous vos CSS.Ces frameworks sont basés sur des classes et c'est ma prochaine recommandation. Vous devez utiliser des classes ou des identifiants pour tout. Cela vous permet d'écrire du code plus propre et plus organisé. Vous devriez avoir :
<style> .nav_bar { } </style> <ul class="nav_bar"> ... </ul>Que se passe-t-il si vous devez en avoir plusieurs
ulsur votre site Web, mais qu'ils doivent être de couleurs différentes ou que l'un d'entre eux ne doit pas être centré ?Voici comment centrer le code existant : Les marges sur la barre de navigation et la barre principale doivent être automatiques au lieu de 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%; }