How to make image and text on the same line? - html

Question

I've got a nav bar and I'm trying to have the logo and text on the same line as each other and the links. Also, my links are in the wrong order so I want to know why that is and how to fix it?
This is what it looks like:
Here is my html code:
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #D4D4D4;
}
#nav li {
float: right;
}
#nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#nav
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
<div id="nav" >
<ul >
<p style="display:inline-block;vertical-align:middle; margin-top:2px"><img src='images/DBA
LOGO.png 'width="30" height="30" style="float:left">DIGITAL BUCKET COMPANY</p>
<li style="text-align:right;"> <a> Home </a></li>
<li style="text-align:right;"> <a> Courses </a></li>
<li style="text-align:right;"> <a> Log in </a></li>
<li style="text-align:right;"> <a> Trainers </a></li>
<li style="text-align:right;"> <a> Enterprise </a></li>
</ul>
</div>

Answer 1

I simplify your snippet and rewrite the css. Please note it is not valid to put <p> under <ul>. Introducing <nav>, ideal for navigation. You don't have to float everything. float: right put the first element to to the most right, that's why the menu order is reverse. You can shift the whole navigation to right using text-align: right. Finally, to align the logo with the company name, I set its line-height to 30px, same as the <img> height.
#logo {
display: inline-block;
vertical-align: middle;
margin-top: 2px;
float: left;
}
#company-name {
line-height: 30px;
}
#nav {
background-color: #D4D4D4;
}
nav {
text-align: right;
}
nav a {
display: inline-block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color: white;
}
nav a:hover {
background-color: #111;
}
<div id="nav">
<p id="logo" style="">
<img src='images/DBA LOGO.png ' width="30" height="30" style="float: left"> <label id="company-name">DIGITAL
BUCKET COMPANY</label>
</p>
<nav>
<a> Home </a> <a> Courses </a> <a> Log in </a> <a> Trainers </a> <a> Enterprise </a>
</nav>
</div>

Answer 2

You could remove all float properties and use flexbox.
Add flexbox properties to ul, have it take the whole space and align items to the center; clear the inherited margins of your p and let it grow; remove float: right from the li item.
Also note that you should not have a <p> inside <ul>
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #d4d4d4;
display: flex;
align-items: center;
justify-content: space-between;
}
#nav p {
flex-grow: 1;
margin: auto;
}
#nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#nav
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
<div id="nav">
<ul>
<p><img src='images/DBA
LOGO.png ' width="30" height="30" style="float:left">DIGITAL BUCKET COMPANY</p>
<li style="text-align:right;"> <a> Home </a></li>
<li style="text-align:right;"> <a> Courses </a></li>
<li style="text-align:right;"> <a> Log in </a></li>
<li style="text-align:right;"> <a> Trainers </a></li>
<li style="text-align:right;"> <a> Enterprise </a></li>
</ul>
</div>

Answer 3

Added new CSS, Hope this helps.
p {
margin: 0;
display: flex;
align-items: center;
white-space: nowrap;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #D4D4D4;
display: flex;
align-items: center;
justify-content: space-between;
}
#nav li {
float: right;
}
#nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
white-space: nowrap;
}
#nav
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
<div id="nav" >
<ul >
<p style="vertical-align:middle; margin-top:2px"><img src='images/DBA
LOGO.png 'width="30" height="30" style="">DIGITAL BUCKET COMPANY</p>
<li style="text-align:right;"> <a> Home </a></li>
<li style="text-align:right;"> <a> Courses </a></li>
<li style="text-align:right;"> <a> Log in </a></li>
<li style="text-align:right;"> <a> Trainers </a></li>
<li style="text-align:right;"> <a> Enterprise </a></li>
</ul>
</div>

Answer 4

p is valid children of ul, it's bad html so move p tag in nav id
second you can set layout using flexbox and remove float:right from li
#nav {
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
background-color: #D4D4D4;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li {
/*float: right;*/
display:inline-block;
}
#nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#nav li a:hover {
background-color: #111;
}
<div id="nav" >
<p style="display:inline-block;vertical-align:middle; margin:0"><img src='images/DBA
LOGO.png 'width="30" height="30" style="float:left">DIGITAL BUCKET COMPANY</p>
<ul>
<li style="text-align:right;"> <a> Home </a></li>
<li style="text-align:right;"> <a> Courses </a></li>
<li style="text-align:right;"> <a> Log in </a></li>
<li style="text-align:right;"> <a> Trainers </a></li>
<li style="text-align:right;"> <a> Enterprise </a></li>
</ul>
</div>

Answer 5

its better practice to put only <li> inside <ul>
check flexbox
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#nav{
display: flex;
justify-content: space-between;
align-items: center;
background-color: #D4D4D4;
}
#nav p{
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#nav li {
float: left;
}
#nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
<div id="nav" >
<p><img src='images/DBA
LOGO.png 'width="30" height="30">DIGITAL BUCKET COMPANY</p>
<ul>
<li style="text-align:right;"> <a> Home </a></li>
<li style="text-align:right;"> <a> Courses </a></li>
<li style="text-align:right;"> <a> Log in </a></li>
<li style="text-align:right;"> <a> Trainers </a></li>
<li style="text-align:right;"> <a> Enterprise </a></li>
</ul>
</div>