css logo top center menu bar either side

**nztim1** · 09-06-2013, 08:57 PM

Hi there,

I need some help coding a menu, my goal is to create something like the image bellow:

The navigation with the logo needs to be fixed at the top.

Here is the code i have created so far just need help on the menu.

HTML Code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="www.timandjerry.com">
<link rel="stylesheet" href="css/styles.css" type="text/css" >
<title>NOW+GENERATION</title>
</head>
<body>
<div id="body">
<div id="header">
<div id="logo">
 <a href="index.html" target="_top"><img src="images/logo.png" width="450px" height="107px" alt="NOW+GEN"></a>
</div>
</div>
<h1>Lorem du ples me como leromes oaf los ochos marones</h1>
</div>
</body>
</html>

Code:

body {
	background: #09c;
	/*
	margin-left: 10px;
	margin-right: 10px;
	*/
	
}
#header {
    position: fixed;
    top: 0px;
	left: 0px;
	right:0px;
    background-image:url(../images/header-background.jpg);
    background-repeat: repeat-x;
	background-position: top;
}
#logo {
	margin-top:8px;
	width:450px;
	margin-left:auto;
	margin-right:auto;
}
h1 {
	margin-top:300px;
	margin-bottom:800px;
}

Thanks

**molendijk** · 09-07-2013, 11:25 AM

You can do with less code:

Code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="www.timandjerry.com">
<title>NOW+GENERATION</title>
</head>
<body>
<div style="position: fixed; width: 100%; text-align: center; ">
<a href="index.html" target="_top">
<img src="http://i.stack.imgur.com/nG5zF.png" alt="NOW+GEN" style="position: relative; width: 450px; height: 107px; ">
</a>
</div>
<h1 style="position: relative; top: 107px; margin-bottom:107px">Lorem du ples me como leromes oaf los ochos marones</h1>
</body>
</html>

**coothead** · 09-07-2013, 12:49 PM

Hi there nztim1,

and a warm welcome to these forums.

check out the attachment to see a working example.

coothead

**molendijk** · 09-07-2013, 03:34 PM

Hello nztim1,
After examining coothead's code I realized that you didn't just want a logo at the top (static, am I right?), but also working links inside it. So I made a new document for you.
Coothead, I noticed that your logo is not fixed (static) at the top. Maybe I'm wrong, but the person seems to want a logo having 'position: fixed'.
New code (with some explanations) below. DEMO here.

Code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="www.timandjerry.com">
<title>NOW+GENERATION</title>
</head>
<body >
<div style="position: fixed; width: 100%; top:1px; text-align: center; z-index: 10" >
<img src="http://i.stack.imgur.com/nG5zF.png" alt="NOW+GEN" style="position: relative; width: 750px; height: 107px; ">
<div style="position: relative; font-family: arial; font-size: 14px; float: left; left: 50%; top: 17px; opacity: 0">
<a style="position: absolute; background: black; color: white; cursor: pointer; margin-left: -200px; " title="Click me" onclick="alert('Hello')">HELLO</a>
<a style="position: absolute; background: black; color: white; cursor: pointer; margin-left: -130px; " title="Click me" onclick="alert('About')">ABOUT</a>
<a style="position: absolute; background: black; color: white; cursor: pointer; margin-left: -30px; width:60px; height: 60px; " title="Click me and bring me home" onclick="alert('QI'); location.href='index.html'">QI</a>
<a style="position: absolute; background: black; color: white; cursor: pointer; margin-left: 80px; " title="Click me"  onclick="alert('Portfolio')">PORTFOLIO</a>
<a style="position: absolute; background: black; color: white; cursor: pointer; margin-left: 180px; " title="Click me"  onclick="alert('Contact')">CONTACT</a>
</div>
</div>

<h1 style="position: relative; top: 107px; margin-bottom:107px; text-align: center">Lorem du ples me como leromes oaf los ochos marones</h1>
<div style="font-family: verdana; font-size: 13px; ; margin-left: 120px; margin-right: 120px">
<br><br>I kept the styles inline to allow a better view on how things are styled, view source.<br><br>
The main div has <i>width: 100%; text-align: center</i> to center its content (including the logo). It also has <i>position: fixed; top:1px </i> to keep its content fixed on top. <br><br>
The 'secondary' div (inside the main div, after the image) contains links put on top of the logo and made invisible with <i>opacity: 0</i>. Of course, the successive margin-left value depend entirely on the value given for the width of the image. Experiment with it. Don't forget to hover the mouse over the items of the logo.
<br><hr>Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones <br><br>Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones <br><br>Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones <br><br><br><br>Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones <br><br>Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones <br><br>Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones <br><br><br><br>Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones <br><br>Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones <br><br>Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones <br><br><br><br>Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones <br><br>Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones <br><br>Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones Lorem du ples me como leromes oaf los ochos marones <br><br>
</div>
</body>
</html>

**nztim1** · 09-07-2013, 08:19 PM

Thanks guys for the input, i dont actually need to use that image as my header sorry was just meant to be an example.
Attached are the files for the site but now im having a problem centering the logo and evenly spacing the links on either side.

Thanks heaps!

**molendijk** · 09-07-2013, 08:46 PM

There appears to be an unzip-problem.

**nztim1** · 09-07-2013, 08:52 PM

i changed the link try again, thanks.

**molendijk** · 09-07-2013, 11:03 PM

This seems to work better, but it's guess work:
index-2.html:

Code:

<!--Website created by www.timandjerry.com-->
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="www.timandjerry.com">
<link rel="stylesheet" href="css/styles-2.css" type="text/css" >
<title>NOW+GENERATION</title>
</head>
<body>
 <div id="header">
  <!--test nav-->
  <div id="navigation">
   <ul id="nav-left">
    <li><a href="index.html" class="current">Home</a></li>
    <li><a href="about.html">About</a></li>      
   </ul>
   <ul id="nav-right">
    <li><a href="video.html">Video</a></li>
    <li><a href="social.html">Social</a></li>      
   </ul>
   <div id="logo" style="left:30%; ">
    <a href="index.html" target="_top"><img src="images/logo.png" style="width:40%"   alt="NOW+GEN"></a>
   </div>
  </div>
  <!--test nav-->
 </div>
<h1>Lorem du ples me como leromes oaf los ochos marones</h1>
</body>
</html>

styles-2.css

Code:

/*
Design by Tim Howe & Jerremy Jacob
http://timandjerry.com
*/
body {
	background: #09c;
}
#header {
    position: fixed;
    top: 0px;
	left: 0px;
	right:0px;
 height:200px;   background-image:url(../images/header-background.jpg);
    background-repeat: repeat-x;
	background-position: top; 
}
#navigation {
	 width:100%;
	text-align: center; margin-left:auto;
	margin-right:auto;
}
#nav-left {
	float:left;
	display:inline-block;margin-left: 20%
}
#nav-right {
	float:right;
	display:inline-block;margin-right: 20%
}
a {
	color: #999999;
	text-transform:uppercase;
	text-decoration: none;
	padding:6px 10px 6px 10px;
	font-family:"Courier New", Courier, monospace;
	font-size:25px;
}
a:hover, a.current {
	color: #F96728;
}
li {
	display:inline-block;
	margin-top:13px;
}
#logo {
position: absolute; width: 40%; top:20px}
h1 {
	margin-top:300px;
	margin-bottom:800px;
}

**nztim1** · 09-08-2013, 01:57 AM

Thanks for that, is it possible i can keep the logo same size and have the overhang over the header?

**molendijk** · 09-08-2013, 11:12 AM

This works much better. I've kept the styles inline/internal for readability. The logo will have the overhang over the header, but the width must be given in percentages, otherwise there will be an issue with smaller screen resolution.

Code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="www.timandjerry.com">

<style>
a {color: #999999;
 text-transform:uppercase;
 text-decoration: none;
 padding:6px 10px 6px 10px;
 font-family:"Courier New", Courier, monospace;	font-size:25px;
}
a:hover, a.current {
color: #F96728;
}
li {
display:inline-block;
 margin-top:13px;
}
</style>

<title>NOW+GENERATION</title>

</head>

<body style="background: #09c;">
 
<div id="header" style="position: fixed;
 z-index: 10; top: 0px; left: 0px;
 right:0px;
 height:100px; background-image:url(../images/header-background.jpg);
    background-repeat: repeat-x;
 background-position: top; background-color: white">
  <!--test nav-->
  
<div id="navigation" style="width:100%;
	text-align: center; margin-left:auto;
 margin-right:auto;">
   
<ul id="nav-left" style="width: 210px; margin: 0px; padding: 0px; position: absolute; left: 10%">
    
<li><a href="index.html" class="current" >Home</a></li>
    
<li><a href="about.html">About</a></li>
</ul>
   
<ul id="nav-right" style="width: 210px; margin: 0px; padding: 0px; margin-top: 20px; ">
    
<li style="width: 220px;  position: absolute;right:10%; ">
<a href="video.html">Video</a> <a href="social.html">Social</a>
</li>
</ul>
   
<div id="logo" style="left:30%; 
position: absolute; width: 40%; top:20px; ">
    
<a href="index.html" target="_top"><img src="images/logo.png" style="position: absolute; width: 60%; left: 20%; min-height:100px; "  alt="NOW+GEN"></a>
   
</div>
  
</div>
  
<!--test nav-->
 </div>

<h1 style="
position: relative; margin-top:130px;
 margin-bottom:20px; text-align: center">Lorem du ples me como leromes oaf los ochos marones</h1>


text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> text<br> 

</body>

</html>