Issue
I'm building a website with HTML and CSS for a project in CS class. I've been able to create a navbar with the <table>
tag but I've heard its bad practice so how do you think I can convert this layout with <ul>
?
The layout is the following:
+-------------------------------------------------------------------------------+
| | Company |
| SITE LOGO | Page 1 | Page 2 | Page 3 | Page 4 | Login +
| | Name |
+-------------------------------------------------------------------------------+
Here's the markup:
.nav {
color:black;
text-align:center;
vertical-align:middle;
border-collapse:collapse;
width:100%;
}
<TABLE class="nav">
<TR style="position:fixed; top:0; background-color:white; width:100%">
<TD width="77">
<img src="site_logo.png"style="text-align:center; vertical-align:middle">
</TD>
<TD>
<div style="font-size:30; font-weight: bold; text-align:left;">
Company
</div>
<div style="font-size:18; text-align:left;">
Name
</div>
</TD>
<TD width="20%">Page 1</TD>
<TD width="20%">Page 2</TD>
<TD width="20%">Page 3</TD>
<TD width="20%">Page 4</TD>
<TD width="20%">Login</TD>
</TD>
</TR>
</TABLE>
I've been trying to use <ul>
instead of <table>
by myself but i couldn't manage to make the company name subtitle in the same <li>
element and vertical-align everything.
Solution
Here‘s how i would create that nav. The Links get evenly distributed and i added a max-width to make it responsive and move the logo above the links if the available space gets to small to display everything in the same line. If you dont want that, remove the flex-wrap: wrap;
and the max-width: 600px;
:
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
color: black;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
background-color: #ccc;
padding: 20px;
}
nav ul {
display: flex;
justify-content: space-around;
width: 100%;
max-width: 600px;
list-style: none;
padding: 10px;
}
nav a {
text-decoration: none;
color: inherit;
}
.brand_container {
display: flex;
align-items: center;
justify-content: center;
/* Add this if you want the name to be below the image:
flex-direction: column;
*/
width: 200px;
}
.brand_container img {
/* This is just to make sure it is visible in this example. The background-color can be deleted if an image is added */
width: 50px;
height: 50px;
background-color: #f00;
margin: 5px;
}
<nav>
<div class="brand_container">
<img src="site_logo.png" alt="logo">
<p>Company Name</p>
</div>
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
<li><a href="#">Login</a></li>
</ul>
</nav>
Answered By - HackerFrosch
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.