I haven't done any web design stuff in a while. I'm trying to knock the rust off now while attempting to make a portfolio. I would like help with bringing the menu and logo areas closer together in the header area.
Basically, I need to know where I'm putting the div container in the html file and what properties I'm assigning to it in the stylesheet. I tried putting a headercontainer div before the header div and giving a width to that but it wasn't working.
HTML
Code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Ruzzio Design</title>
</head>
<body>
<div id="header">
<div id="logo">
<img class="logo" src="images/logo.png">
</div>
<div id="menu">
<ul class="menu">
<li class="menu"><a href="#">About</a></li>
<li class="menu"><a href="#">Gallery</a></li>
<li class="menu"><a href="#">Services</a></li>
<li class="menu"><a href="#">Resources</a></li>
<li class="menu"><a href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS
Code
@font-face {
font-family: 'BEBAS';
src: url('fonts/BEBAS.TTF');
}
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
color: #ffffff;
background: #bbbbbb;
}
#header {
height: 65px;
width: 100%;
background-image: url('null');
background-repeat: repeat-x;
background: -webkit-linear-gradient(#555555, #353535); /* Safari */
background: -o-linear-gradient(#555555, #353535); /* Opera */
background: -moz-linear-gradient(#555555, #353535); /* Firefox */
background: linear-gradient(#555555, #353535); /* Standard */
box-shadow: 0px 1px 1px #131313;
}
.logo {
height: 65px;
width: 282px;
float: left;
}
#menu {
float: right;
}
ul.menu {
list-style: none;
height: 65px;
}
li.menu {
float: left;
height: 65px;
width: 88px;
display: inline;
border-left: 1px solid #353535;
font-size: 15px;
font-family: 'BEBAS';
text-align: center;
}
li.menu a {
display: block;
color: #888888;
text-decoration: none;
line-height: 65px;
background: -webkit-linear-gradient(#353535, #262626);
background: -o-linear-gradient(#353535, #262626);
background: -moz-linear-gradient(#353535, #262626);
background: linear-gradient(#353535, #262626);
}
li.menu a:hover {
color: #dddddd;
background: -webkit-linear-gradient(#00bce2, #007ebc);
background: -o-linear-gradient(#00bce2, #007ebc);
background: -moz-linear-gradient(#00bce2, #007ebc);
background: linear-gradient(#00bce2, #007ebc);
}