CODEWITHSUNDEEP
htmlcssresponsive-design
Kyle
Kyle

Reputation: 2379

Can't get CSS Menu to align properly

so below is all the code that makes the picture you see at the bottom. I'm trying my best to make this site responsive, but the main problem right now is that the menu bar is not centered (vertically) with the logo to the left. How can I get it to be centered there? I tried setting the top to 50% and it stayed where it is. Now the background color red is only containing the menu bar for some reason even though the logo should be inside of it. Thanks for any help.

HTML:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bond Solutions | Home</title>
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="menubar.css" />
<script type="text/javascript">
var video;
window.onload = function () {
window.video = document.getElementById("video");
window.video.addEventListener('ended',myHandler,false);
window.video.volume=0.5;
}
function myHandler() {
        window.video.currentTime = 7;
        window.video.volume=0;
        window.video.play();
}
</script>
</head>

<body>
<center>
<div id="site">
<div id="header">
<img class="logo" src="images/logo.svg" />
<div id="menu">
<ul id="menu-bar">
 <li class="active"><a href="index.html">Home</a></li>
 <li><a href="#">Products</a>
  <ul>
   <li><a href="#">Stock Photos</a></li>
   <li><a href="#">Stock Videos</a></li>
  </ul>
 </li>
 <li><a href="#">Services</a>
  <ul>
   <li><a href="#">Web Design</a></li>
   <li><a href="#">Graphic Design</a></li>
   <li><a href="#">Computer Repair</a></li>
   <li><a href="#">Computer Cleaning</a></li>
   <li><a href="#">Custom Computers</a></li>
   <li><a href="#">Retro Console Refurbishing</a></li>
  </ul>
 </li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</center>
</body>
</html>

CSS:

body {
    background-color: #000;
}
#site {
    background-color:#0F0;
    width:75%;
}
#header {
    position:relative;
    background-color:red;
    height:50%;
    width:100%;
}
.logo {
    width:auto;
    max-width:100%;
    height:auto;
    float:left;
}
#menu {
    top:50%;
}
#menu ul ul {
display: none;
}

#menu ul li:hover > ul {
display: block;
}
#menu ul{
background: #AC2828;
background: linear-gradient(top, #AC2828 0%, #A31010 100%);
background: -moz-linear-gradient(top, #AC2828 0%, #A31010 100%);
background: -webkit-linear-gradient(top, #AC2828 0%,#A31010 100%);
box-shadow: 0px 0px 8px #A31010;
padding: 0 20px;
border-radius: 10px; 
list-style: none;
position: relative;
display: inline-table;
}
#menu ul li {
 float: left;
 border-right:1px solid #8A0000;
}
#menu ul li:last-child{
 border-right:none;
}

#menu ul li:hover {
  background: #4b545f;
  background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
  background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
  background: -webkit-linear-gradient(top, #811919 0%,#680000 40%);
}

#menu ul li:hover a {
   color: #fff;
}

#menu ul li a {
   font-family: 'Pathway Gothic One', sans-serif;
   font-size:14px;
   display: block;

   padding: 14px 40px;
   color: #fff; text-decoration: none;
}
#menu ul ul {
background: #811919; border-radius: 0px; padding: 0;
position: absolute; 
}
#menu ul ul li {
float: none; 
border-top: 1px solid #680000;
border-bottom: 1px solid #8F3333;
position: relative;
}
#menu ul ul li a {
padding: 14px 40px;
color: #fff;
}

#menu ul ul li a:hover {

background: #AC2828;
}

Picture: Failure

Upvotes: 0

Views: 117

Answers (1)

mohamedrias
mohamedrias

Reputation: 18566

To make the logo fit in the header properly, you need to add clearfix to the header.

 <div style="clear:both;"></div>

Add it just before the ending </div> of header.

Then to make it align at middle:

#header {
    position:relative;
    background-color:red;
    height:50%; 
    display: table;
    width:100%;
}

#menu {
  display: table-cell;
  vertical-align: middle;
}

DEMO

Upvotes: 1

Related Questions