Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: css logo top center menu bar either side

  1. #1
    Join Date
    Sep 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question css logo top center menu bar either side

    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

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,370
    Thanks
    31
    Thanked 141 Times in 136 Posts
    Blog Entries
    32

    Default

    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>
    Last edited by molendijk; 09-07-2013 at 11:35 AM. Reason: Correction styles

  3. #3
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    689
    Thanks
    1
    Thanked 113 Times in 111 Posts

    Default

    Hi there nztim1,

    and a warm welcome to these forums.

    check out the attachment to see a working example.

    coothead
    Attached Files Attached Files

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,370
    Thanks
    31
    Thanked 141 Times in 136 Posts
    Blog Entries
    32

    Default

    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>
    Last edited by molendijk; 09-07-2013 at 07:31 PM. Reason: Added demo

  5. #5
    Join Date
    Sep 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!
    Attached Files Attached Files
    Last edited by nztim1; 09-07-2013 at 08:55 PM.

  6. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,370
    Thanks
    31
    Thanked 141 Times in 136 Posts
    Blog Entries
    32

  7. #7
    Join Date
    Sep 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    i changed the link try again, thanks.

  8. #8
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,370
    Thanks
    31
    Thanked 141 Times in 136 Posts
    Blog Entries
    32

    Default

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

  9. #9
    Join Date
    Sep 2013
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  10. #10
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,370
    Thanks
    31
    Thanked 141 Times in 136 Posts
    Blog Entries
    32

    Default

    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>

Similar Threads

  1. Smooth Navigational Menu (v1.5) want to display as dropline side by side
    By jqdesigner in forum Dynamic Drive scripts help
    Replies: 19
    Last Post: 01-30-2013, 02:35 PM
  2. Replies: 6
    Last Post: 07-16-2012, 12:03 PM
  3. static logo / site logo script: can i make it not move when page is scrolled
    By chrislhawkes in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 06-03-2012, 01:52 AM
  4. Replies: 2
    Last Post: 09-17-2011, 10:15 PM
  5. CSS Logo Drops to center of page
    By brecken in forum CSS
    Replies: 1
    Last Post: 07-28-2009, 02:00 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •