Hello!
I'm creating a website template from scratch and I'm trying to insert a logo onto a bar that I'm calling the navBar. However, for some reason I can't seem to figure out why the logo is near the top while my
[CODE lang="html" title="HTML"]<div class="pageHeader">
<div class="navBarLogo"><img src="./images/dasfdsafdsfdsa.png"></div>
<div class="navbarTOP">
<ul>
<a href="#"><li class="navBarItem">Home</li></a>
<a href="#"><li class="navBarItem">About</li></a>
<a href="#"><li class="navBarItem">Contact Us</li></a>
</ul>
</div>
</div>[/CODE]
I'm creating a website template from scratch and I'm trying to insert a logo onto a bar that I'm calling the navBar. However, for some reason I can't seem to figure out why the logo is near the top while my
<ul>
is near the bottom? I'm trying to center the text vertically (I will try doing vertical-align). Below are an image and the code.[CODE lang="html" title="HTML"]<div class="pageHeader">
<div class="navBarLogo"><img src="./images/dasfdsafdsfdsa.png"></div>
<div class="navbarTOP">
<ul>
<a href="#"><li class="navBarItem">Home</li></a>
<a href="#"><li class="navBarItem">About</li></a>
<a href="#"><li class="navBarItem">Contact Us</li></a>
</ul>
</div>
</div>[/CODE]
CSS:
.pageHeader {
background-color:black;
}
.pageHeader img {
width: 50px;
height: 50px;
float: left;
}
.navBarLogo {
display:inline-block;
}
.navbarTOP {
display: inline-block;
}
.navBarItem {
display: inline-block;
margin: 0!important;
}