Logo blocking my menu buttons

+1 Jacob Beck · January 24, 2015
/images/forum/upload/2015-01-24/e515a7580783bad3fb0feb4be027ecce.PNG
I added an image if it helps.

Sorry for posting all the code here:

HTML file:

<body>
<!------------ Header ------------>
<div id="tob_body">
<div>
<div id="top_menu">
<nav>
<ul>
<li class="menu_left"><a href="index.html">Home</a></li>

<li class="menu_left left_slash"><a href="about.html">About</a></li>

<li class="menu_left left_slash"><a href="updates.html">Updates</a></li>

<li class="menu_right right_slash"><a href="contacts.html">Contacts</a></li>

<li class="menu_right right_slash"><a href="services.html">Services</a></li>

<li class="menu_right"><a href="careers.html">Careers</a></li>
</ul>
</nav>
</div>
<div class="menu_logo">
<h1 align="center"><a href="index.html"><img src="images/logo.png" alt=""></h1>
</div>
<div>
<div>
<ul>
</ul>
</div>
<ul>
</ul>
</div>
</div>
</div>

CSS file:

/* -Global properties- */
html, body {
width: 100%; 
padding: 0; 
margin: 0;
}

body {  
font: 14px/18px "Times New Roman", Times, serif;
color: #6f6f6f;
min-width: 1024px;
background: #262626;
}

/* -Header- */
#top_body {
position: relative;
width: 100%;
background: url(../images/background.png) 0 0 repeat;
}

#top_menu {
width: 1024px;
margin: 0px auto 0px auto;
padding: 1px;
background: url(../images/menu_box.png);
}

#top_menu ul {
display: inline-box;
display: box;
list-style: none;
padding: 10px 0px 35px 0px;
}

#top_menu li {
display: inline-box;
display: box;
padding: 0px 25px 0px 25px;
}

#top_menu li a {
display: inline-block;
font-size: 18px;
font-style: italic;
text-decoration: none;
line-height: 24px; 
color: white; 
}

#top_menu li a:hover { 
color: #009cff; 
}

.menu_left {
float: left;
margin-left: 25px;
}

.left_slash {
display: inline-box;
background: url(../images/left_slash.png) no-repeat;
}

.menu_right {
float: right;
margin-right: 25px;
}

.right_slash {
display: inline-box;
background: url(../images/right_slash.png) no-repeat;
}

.menu_logo {
position: relative;
display: inline-box;
top: -90px;
vertical-align: middle;
}

As the title says my logo blocks the menu. I have tried a few things but this is the only way I could get my logo to be at the top and centered of my top menu.

Post a Reply

Replies

Oldest  Newest  Rating
0 Mr. Computer · January 24, 2015
Change its position if You  don't want it that way
0 Pieter Moens · January 24, 2015
You can use z-index, give your logo z-index:-1;
0 Jacob Beck · January 24, 2015
That's the thing I want my logo in the middle of my menu.
0 Jacob Beck · January 24, 2015
I fixed it. 
  • 1

HTML / CSS / Web Design

107,070 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators