需要我的導航欄和徽標上的一些幫助

我需要一些幫助將我的導航按鈕移動到徽標的任何一側。我對網頁設計和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

需要我的導航欄和徽標上的一些幫助

回答

相關問題