CSS and HTML navbar list with image - html

Question

I am semi-new to web development and am currently working on a webpage with a fixed top navbar. I have my logo in the center of a list and my links outside it. I would like the links to be vertically centered. I will include a screenshot and the code. Maybe you can help me? Thanks a lot! I appreciate your time.
Screenshot of Navbar
HTML:
<div class="header">
<div class="table">
<div class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Before & After</li>
<li><img src="photos/logo.png"> </li>
<li>Portfolio</li>
<li>Facebook</li>
<li> <script src="js/email.js"></script>
</ul>
</div>
</div>
</div>
CSS:
#font-face {
font-family: offbeat;
src: url(offbeat.woff);
font-weight: normal;
font-style: normal;
}
body {
margin: 0 auto;
padding: 0;
background: rgb(209,202,178);
}
.header {
background: rgb(175,166,135);
width: 100%;
height: 100px;
margin: 0px;
padding: 0px;
position: fixed;
top: 0px;
z-index: 2;
border-bottom: 1px solid rgb(102,102,102);
}
.table {
display: table;
float: left;
left: 50%;
width: 1150px;
height: 100px;
line-height: 100px;
overflow: auto;
position: absolute;
}
.logo img {
z-index: 4;
position: relative;
left: 50%;
}
.navbar {
float: left;
right: 48.5%;
position: relative;
}
.navbar li {
display: inline;
padding: 0px;
margin: 0 auto;
width: 100%;
margin-right: 40px;
text-shadow: 1px 1px rgb(115,109,88);
font-family: offbeat;
font-size: 20px;
letter-spacing: 5px;
white-space: nowrap;
overflow: auto;
}
.navbar a {
text-decoration: none;
color: rgb(255,255,255);
text-align: center;
border-bottom: 1px solid;
border-color: rgb(255,255,255);
padding: 10px;
margin: 5px;
white-space: nowrap;
}
.navbar a:hover {
background-color: rgb(135,127,99);
}

Answer 1

I would look to use line-height to achieve this. Set the height on the parent container .navbar to 100px then set a line-height of 100px on the .navbar li.
This will mean the link text is always in the centre of the navbar. To ensure the logo was in the centre I would add vertical align middle.
As a bonus I would look to implement box-sizing it greatly helps with layouts that use padding.
#font-face {
font-family: offbeat;
src: url(offbeat.woff);
font-weight: normal;
font-style: normal;
}
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0 auto;
padding: 0;
background: rgb(209, 202, 178);
}
.header {
background: rgb(175, 166, 135);
width: 100%;
height: 100px;
margin: 0px;
padding: 0px;
position: fixed;
top: 0px;
z-index: 2;
border-bottom: 1px solid rgb(102, 102, 102);
}
.navbar {
margin: 0;
padding: 0;
text-align: center;
}
.navbar ul {
margin: 0;
padding: 0;
overflow: hidden;
}
.navbar li {
display: inline-block;
padding: 0px;
margin-right: 40px;
text-shadow: 1px 1px rgb(115, 109, 88);
font-family: offbeat;
font-size: 20px;
letter-spacing: 5px;
line-height: 100px;
vertical-align: middle;
}
.navbar img {
vertical-align: middle;
}
.navbar a {
text-decoration: none;
color: rgb(255, 255, 255);
text-align: center;
border-bottom: 1px solid;
border-color: rgb(255, 255, 255);
padding: 10px;
margin: 5px;
white-space: nowrap;
}
.navbar a:hover {
background-color: rgb(135, 127, 99);
}
<div class="header">
<div class="navbar">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Before & After
</li>
<li>
<img src="http://placehold.it/50x50">
</li>
<li>Portfolio
</li>
<li>Facebook
</li>
<li>
<script src="js/email.js"></script>
</ul>
</div>
</div>
I edit your base code as you used a lot of needed positioning techniques. Please compare with your code.

Answer 2

try adding this to your css
.navbar ul
{
display:inline;
vertical-align:middle;
}

Answer 3

Let the ul padding:20px 0px; direct the center vertically and text-align:center direct your center horizontally. Also use inline-block so that you can give your entire li focus for menu linking purposes
here is your problem solved FIDDLE
p.s. Your main problem is you are using way too much css. This is not supposed to be such a hard implementation and you definitely do not need absolute positioning, but fixed positioning. The rest is just colors.
If you need to give more padding to the top so they look closer to the bottom, use the padding property to distribute the padding as needed (i.e. padding: 40px 0px 5px) etc.
Here is a common saying we have...Use "absolute" only when "absolutely" necessary ;)

Answer 4

heres how i did it.
core change on css:
.navbar {
display:table;
margin: 15px auto;
}
.navbar li {
line-height:70px;
display: block;
padding: 0px;
float:left;
margin: 0 auto;
margin-right: 40px;
text-shadow: 1px 1px rgb(115,109,88);
font-family: offbeat;
font-size: 20px;
letter-spacing: 5px;
white-space: nowrap;
}
simplified html:
<div class="header">
<ul class="navbar">
<li>Home</li>
<li>About</li>
<li>Before & After</li>
<li><img src="http://img1.wikia.nocookie.net/__cb20120630091052/farmville2/images/0/0f/Google-Logo.png" height=70px /></li>
<li>Portfolio</li>
<li>Facebook</li>
</ul>
<script src="js/email.js"></script>
</div>
http://jsfiddle.net/4a8dkz3n/
i messed around a bit on jsfiddle so it might be a bit different,
but basically i gave display:table to so that i can give "margin:0 auto;" to it
and used 'line-height' to vertical alignment of the list menu.
also simplified the code a bit.