I can't figure out how to put them on the same line.
http://codepen.io/anon/pen/dovZdQ
<body>
<div class="navigation-bar">
<div id="navigation-container">
<img src="logo.png">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Get in Touch</a></li>
</ul>
</div>
</div>
</body>
This question is related to
html
css
navigation
1) you can float the image to the left:
<img style="float:left" src="http://i.imgur.com/hCrQkJi.png">
2)You can use an HTML table to place elements on one line.
Code below
<div class="navigation-bar">
<div id="navigation-container">
<table>
<tr>
<td><img src="http://i.imgur.com/hCrQkJi.png"></td>
<td><ul>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Get in Touch</a></li>
</ul>
</td></tr></table>
</div>
You need to apply the logo class to the image...then float the ul
HTML
<img class="logo" src="http://i.imgur.com/hCrQkJi.png">
CSS
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
float: left;
background: white;
}
Firstly, let's use some semantic HTML.
<nav class="navigation-bar">
<img class="logo" src="logo.png">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Get in Touch</a></li>
</ul>
</nav>
In fact, you can even get away with the more minimalist:
<nav class="navigation-bar">
<img class="logo" src="logo.png">
<a href="#">Home</a>
<a href="#">Projects</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Get in Touch</a>
</nav>
Then add some CSS:
.navigation-bar {
width: 100%; /* i'm assuming full width */
height: 80px; /* change it to desired width */
background-color: red; /* change to desired color */
}
.logo {
display: inline-block;
vertical-align: top;
width: 50px;
height: 50px;
margin-right: 20px;
margin-top: 15px; /* if you want it vertically middle of the navbar. */
}
.navigation-bar > a {
display: inline-block;
vertical-align: top;
margin-right: 20px;
height: 80px; /* if you want it to take the full height of the bar */
line-height: 80px; /* if you want it vertically middle of the navbar */
}
Obviously, the actual margins, heights and line-heights etc. depend on your design.
Other options are to use tables or floats for layout, but these are generally frowned upon.
Last but not least, I hope you get cured of div-itis.
Try this CSS:
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: 1200px;
margin: 0 auto;
height: 70px;
}
.navigation-bar {
background-color: #352d2f;
height: 70px;
width: 100%;
}
#navigation-container img {
float: left;
}
#navigation-container ul {
padding: 0px;
margin: 0px;
text-align: center;
display:inline-block;
}
#navigation-container li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
}
#navigation-container li a {
color: white;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
}
#menu {
float: right;
}
Source: Stackoverflow.com