Issue
i'm trying to reproduce this website to practice : https://www.arte.tv/fr/videos/documentaires-et-reportages/
I'm trying to create the nav bar and I don't know why the left line won't align on the same line, they ride on each other instead of being on the same line. The left part of the nav bar aligns on the same line, but the right part doesn't god know why.
I honestly start to feel kind of a shmuck, I've been on CSS 4 hours a day since one month, and I still can't do a darn navbar.
Here's my HTML and CSS :
* {
list-style: none;
background-color: black;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
color: rgb(221, 213, 213);
margin: 0;
padding: 0;
}
.arte-logo {
height: 45px;
margin: 0;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-left ul {
display: flex;
}
.nav-right ul {
display: flex;
}<!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>Documentaires et reportages</title>
<link rel="stylesheet" href="style.css" />
<link
rel="icon"
href="/Users/jeandizian/Documents/Code/space/Arte/Assets/imgs/arte-icon.png"
/>
</head>
<body>
<nav>
<div class="nav-left">
<ul>
<li>
<img
class="arte-logo"
src="/Users/jeandizian/Documents/Code/space/Arte/Assets/imgs/arte-logo.png"
alt="arte logo"
;
/>
</li>
<li><span>☷</span></li>
<li>Guide TV</li>
<li>Direct</li>
<li>Bientôt en ligne</li>
<li>Arte Concert</li>
</ul>
</div>
<div class="nav-right">
<ul>
<li><span>☸</span></li>
<li><span>⊕</span></li>
<div class="connecter">
<li><span>⚉</span></li>
<li>Se connecter</li>
</div>
<li>ARTE en 6 langues</li>
</ul>
</div>
</nav>
</body>
</html>Solution
It's not enough that you have align-items: center on the navbar. That only aligns the nav-left and nav-right elements.
You need to also make sure that the elements that are inside those elements are aligned.
* {
list-style: none;
background-color: black;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
color: rgb(221, 213, 213);
margin: 0;
padding: 0;
}
.arte-logo {
height: 45px;
margin: 0;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-left ul {
display: flex;
align-items: center;
}
.nav-right ul {
display: flex;
align-items: center;
}
.connecter {
display: flex;
align-items: center;
}<!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>Documentaires et reportages</title>
<link rel="stylesheet" href="style.css" />
<link
rel="icon"
href="/Users/jeandizian/Documents/Code/space/Arte/Assets/imgs/arte-icon.png"
/>
</head>
<body>
<nav>
<div class="nav-left">
<ul>
<li>
<img
class="arte-logo"
src="/Users/jeandizian/Documents/Code/space/Arte/Assets/imgs/arte-logo.png"
alt="arte logo"
;
/>
</li>
<li><span>☷</span></li>
<li>Guide TV</li>
<li>Direct</li>
<li>Bientôt en ligne</li>
<li>Arte Concert</li>
</ul>
</div>
<div class="nav-right">
<ul>
<li><span>☸</span></li>
<li><span>⊕</span></li>
<div class="connecter">
<li><span>⚉</span></li>
<li>Se connecter</li>
</div>
<li>ARTE en 6 langues</li>
</ul>
</div>
</nav>
</body>
</html>Answered By - Patrick
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.