Need some help on my navigation bar and logo

StackOverflow https://stackoverflow.com/questions/16897018

Question

Pretty much I need some help moving my navigation buttons to either side of the logo. I'm pretty new to web design and css and I'm trying my hardist but can't get this one going. So Basically i need my home and about on the left side of the logo at 16px apart from eachother and on the right side of the logo i need gallery and contact 16px apart from eachother.

HTML code:

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>{Michael Grace} Portfolio website - {Gracey design}</title>

    <link href="css/styles.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <div id="container">      

      <div id="logo">
        <img src="images/images/logo.png" />
        </div>

        <ul id="navigation">
        <li><a href="index.html"><img src="images/images/home_button2.gif" /></a></li>
        <li><a href="about.html"><img src="images/images/about_button1.gif" /></a></li>
        <li><a href="portfolio.html"><img src="images/images/gallery_button1.gif" /></a></li>
        <li><a href="contact.html"><img src="images/images/contact_button1.gif" /></a></li>
        </ul>

      <div id="header">


      </div>

      <div id="line">
      </div>

      <div id="content">
      content
      </div>

    </div>

</body>

CSS CODE:

body {
background: url(../images/images/bg_page.gif) center center;
}

#container {
width: 940px;
margin: 0 auto;
margin-top: 100px;
}

    #header {
    height: 281px;
    background: url(../images/home/header.gif) top center;
    position: relative;
    }

    #logo {
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 11%; 
    margin-left: -150px;
    margin-top: -86px;
    z-index: 2;
    }

    #navigation {
    position: relative;
    height: 60px;
    }

        #navigation li {
        display: inline;
        width: 160px; 
        height: 60px; 
        float: left; 
        padding: 13px 0 0 16px;
        }

            #navigation li:nth-child(1) {
            margin: 0 0 0 0;
            }
            #navigation li:nth-child(2) {
            margin: 0 0 0 0;
            }
            #navigation li:nth-child(3) {
            margin: 0 0 0 0;
            }
            #navigation li:nth-child(4) {
            margin: 0 0 0 0;
            }

    #content {
    height: 541px;
    background: url(../images/home/bg_body.png) top center;
    position: relative;
    }

    #line {
    height: 4px;
    background: url(../images/home/line.gif) top center;
    position: relative;
    }

and lastly a link to the images i used and the layout itself should be on there to what i want the links to look like! if anyone could helo with my code it would be very appreciated! http://www.flickr.com/photos/79239963@N07/sets/72157633896526590/

jfiddle link http://jsfiddle.net/3X6mE/

Was it helpful?

Solution

Well, just create another li in between and put your image there

<ul id="navigation">
            <li><a href="index.html"><img src="http://s17.postimg.org/c4vy50xtn/home_button2.gif" /></a>
            </li>
            <li><a href="about.html"><img src="http://s17.postimg.org/e6wfj9vsr/about_button1.gif" /></a>
            </li>
            <li>
                <div id="logo" style="padding:16px">
                    <img src="http://s17.postimg.org/lf828k8jj/logo.png" />
                </div>
            </li>    
            <li><a href="portfolio.html"><img src="http://s17.postimg.org/7hpw39agr/gallery_button1.gif" /></a>
            </li>
            <li><a href="contact.html"><img src="http://s17.postimg.org/pn2uhb9yz/contact_button1.gif" /></a>
            </li>
        </ul>

Fiddle

OTHER TIPS

Seeing as you aren't linking to anywhere with the logo image you could set it as the UL background-image with "no-repeat top center"; scrap the logo div and img. then increase the margin-right on the about link to half of the width of the logo and margin left on the gallery link to half the width of the logo. You might have to play with the padding on the UL too.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top