So I have some code here and I wanted to have my main navigation in the middle and then the account and cart tabs on the top right. I want it in a way where the tabs that say "buy,sell,trade... etc" are directly in the middle and not in the middle of the left side of the page and the account and cart containers.
CSS
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30p 10%;
text-align: center;
transition: all 0.4s ease 0s;}
.navigation {
list-style: none;
width: 10000px;
margin: 1%;}
.navigation li {
display: inline-block;
padding: 10px 20px;
float: center;}
.navigation li a {
transition: all 0.4s ease 0s}
.navigation li a:hover{
color:#75593e }
.home {
width: 65px;
height: 55px;
background: url("/images/ClosedBoxLogo.png");}
.home:hover {
background: url("/images/OpenBox.png") no-repeat;}
/* Cart and Account */
.rightside {
display: flex;
list-style: none;
align-items: center;
justify-content: space-between;}
.rightside li {
padding: 10px 20px;}
And this is my HTML
<body>
<header>
<ul class="navigation">
<li><a href="#">Buy</a></li>
<li><a href="#">Sell</a></li>
<li><a href="index.html"><img class="home" src="images/CloseBox.png" alt="Close Box" onmouseover="this.src='images/OpenBox.png';" onmouseout="this.src='images/CloseBox.png';"/></a></li>
<li><a href="#">Trade</a></li>
<li><a href="#">Middle Man</a></li>
</ul>
<ul>
<div class="rightside">
<li><a href="#"> Account </a></li>
<li><a href="#"> Cart </a></li>
</div>
</ul>
</header>
</body>
Aucun commentaire:
Enregistrer un commentaire