Databases
StackOverflow2013
Postsdbo
PONeed some help on my navigation bar and logo
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PONeed some help on my navigation bar and logo
    text
    copied!<p>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.</p> <p>HTML code:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;title&gt;{Michael Grace} Portfolio website - {Gracey design}&lt;/title&gt; &lt;link href="css/styles.css" rel="stylesheet" type="text/css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt; &lt;div id="logo"&gt; &lt;img src="images/images/logo.png" /&gt; &lt;/div&gt; &lt;ul id="navigation"&gt; &lt;li&gt;&lt;a href="index.html"&gt;&lt;img src="images/images/home_button2.gif" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="about.html"&gt;&lt;img src="images/images/about_button1.gif" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="portfolio.html"&gt;&lt;img src="images/images/gallery_button1.gif" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="contact.html"&gt;&lt;img src="images/images/contact_button1.gif" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="header"&gt; &lt;/div&gt; &lt;div id="line"&gt; &lt;/div&gt; &lt;div id="content"&gt; content &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p></p> <p>CSS CODE:</p> <pre><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; } </code></pre> <p>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! <a href="http://www.flickr.com/photos/79239963@N07/sets/72157633896526590/" rel="nofollow">http://www.flickr.com/photos/79239963@N07/sets/72157633896526590/</a> </p> <p>jfiddle link <a href="http://jsfiddle.net/3X6mE/" rel="nofollow">http://jsfiddle.net/3X6mE/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload