This is my portfolio: http://nayer.42web.io/ I have used HTML, CSS, and Bootstrap. There is a problem with my li elements which I can't figure out. They all list in reverse, both header and footer. For example, I have my header as:
<header id="header">
<nav id="main-nav">
<ul >
<li id="brand" style="float:left; font-family:'Dancing Script', sans-serif;font-weight:800;font-size:1.5rem"><a href="index.php">Nira</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#logos">Contact</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
But on my page, it gets listed in the following order: Nayer About Contact Projects. Of course, I can list them in reverse myself so when it gets reversed it shows in the right order, but I wonder what my code's issue is. Thanks in advance
CodePudding user response:
You have this on your css:
nav li {
float: right;
padding-top: 1em;
padding-bottom: 1.3em;
padding-right: 1.1em;
padding-left: 1.1em;
vertical-align: middle;
}
The float right sets your first item to the far right position, then the second items on it left and so on ... which reverses the order. Then you have a float left for your "Nira" item that sets it to the far left.
You can refer to this for more details: HTML float right element order