Tarique Tarique - 5 months ago 16
HTML Question

how to create equal spaces in the navigation bar?

i want to make my navigation bar look like this http://www.templatemonster.com/demo/51347.html

what i achieved is this

please while correcting the code , do state the reason behind it. it will of great help. thanks

also the social networking icons shown are in black and the hover effect gives it a red color. is it an image or that can be achieved solely with help of css ?



body {
background:gray;
/*border: 2px solid yellow;*/
}

.headwrap {
width: 93%;
height: auto;
margin: auto;
padding-top: 70px;
}

.logo {
margin: 0;
float: left;
}

.socialbuttons {
float: right;
}

.socialbuttons ul {
list-style: none;
float: right;
}

.socialbuttons ul li {
display: inline;
padding-left: 20px;
}

.navbar {
margin-top: 40px;
width: 100%;
background: #db3636;
float: left;
}

.navbar ul {
list-style: none;
margin: 0;
float: left;
padding: 30px 15px;
}

.navbar ul li {
display: inline;
padding: 15px;
border-right: 2px solid black;
color: white;
font-weight: bold;
font-family: sans-serif;
}

<!DOCTYPE html>
<html>
<head>
<title>Industrial Website demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial scale=1.0">
<link href="damion.css" rel="stylesheet" type="text/css">
</head>
<body>
<header class="headwrap">
<div class="logo">
<img src="logo.png" alt="Damion max">
</div>
<div class="socialbuttons">
<ul>
<li><img src="facebook.png"</li>
<li><img src="twitter.png"</li>
<li><img src="feed.png"</li>
<li><img src="google.png"</li>
</ul>
</div>
<nav class="navbar">
<ul>
<li>ABOUT US</li>
<li>GALLERY</li>
<li>EVENTS</li>
<li>BLOG</li>
<li>CONTACTS</li>
</ul>
</nav>
</header>
</body>
</html>




Answer

Floats and percentages of the container width is a good way to go, especially, if you can't afford to have a fixed width container. Don't forget to adjust font-size, to make sure text doesn't bloat it's container's size and remains on a single line. Also, for this to work you only need floats on "li" elements themselves. And never forget to clear the floats (clearfix class provided).

P.S. It would be much harder to achieve without use of "box-sizing: border-box;", here's a good article about box-sizing css property

The code:

 <header class="headwrap">

  <nav class="navbar">
    <ul class="clearfix">
      <li>ABOUT US</li>
      <li>GALLERY</li>
      <li>EVENTS</li>
      <li>BLOG</li>
      <li>CONTACTS</li>
    </ul>
  </nav>

</header>

* {
/* Very important part, set on all elements for simplicity.  */
  box-sizing: border-box;
}

body {
    background:gray;
    /*border: 2px solid yellow;*/
}

.headwrap {
    width: 93%;
    height: auto;
    margin: auto;
    padding-top: 70px;
}

.navbar {
    margin-top: 40px;
    width: 100%;
    background: #db3636;
}

.navbar ul {
    list-style: none;
    margin: 0;
    padding: 15px; 
}

.navbar ul li {
  /* float it to have no issues with whitespace between inline-blocks */
    float: left;
    padding: 15px;
  /* borders from both sides */
    border-right: 1px solid black;
    border-left: 1px solid black;
    color: white;
  font-size: 14px;
    font-weight: bold;
    font-family: sans-serif;

  text-align: center;
  /* total width 100% / 5 elements */
  width: 20%;
}

/* No left border for the first one */
.navbar ul li:first-child {
  border-left: none;
}

/* No right border for the last one */
.navbar ul li:last-child {
  border-right: none;
}

/* Helps with floats inside */
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
    line-height: 0;
}

.clearfix:after {
  clear: both;
}

About clearfix

And here's the fiddle