css logo top center menu bar either side [Archive]

View Full Version : 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:
http://i.stack.imgur.com/nG5zF.png
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.

<!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>

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:

<!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 (http://mesdomaines.nu/eendracht/header/header2.html).

<!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:


<!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">

<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>

</div>
<h1>Lorem du ples me como leromes oaf los ochos marones</h1>
</body>
</html>

styles-2.css

/*
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.

<!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">


<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>


</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>

nztim1

09-09-2013, 09:12 AM

thanks for that i think thats the best im going to get for now :)