需要我的导航栏和徽标上的一些帮助

我需要一些帮助将我的导航按钮移动到徽标的任何一侧。我对网页设计和CSS非常陌生，我正在尝试我的硬派，但无法让这一个去。所以基本上我需要我的家和约16px的标志左侧，彼此隔开，在标志的右侧，我需要画廊，并与彼此相距16px。需要我的导航栏和徽标上的一些帮助

HTML代码：

<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代码：

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

，最后一个给我使用的图像和排版本身链接应该是有我要的是什么链接看起来像！如果任何人都可以用我的代码hello将非常感激！ http://www.flickr.com/photos/[email protected]/sets/72157633896526590/

jfiddle链接 http://jsfiddle.net/3X6mE/

来源

2013-06-03 user2445229

您可以创建小提琴？ – Roopendra

是的。请用上面的代码提供一个jsfiddle.net示例，以便我们可以进行测试。 – kleinfreund

确定我现在做一个 – user2445229

那么，就在两者之间创建另一个里，并把你的形象有

<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

来源

2013-06-03 14:02:55

谢谢工作堆很好，只需要使用设置来使主页按钮进入我的标题边缘 – user2445229

看到，因为你不链接到任何地方使用该标志图像，你可以将其设置为“无重复顶部中央的” UL背景图片;报废标识div和img。然后将大约链接上的保证金右侧增加到徽标和图库链接上剩余的一半宽度的徽标和宽度的一半。你也许需要玩UL上的填充。

来源

2013-06-03 12:55:30 dijkstra8x

需要我的导航栏和徽标上的一些帮助

回答

相关问题