1

几乎我需要一些帮助将我的导航按钮移动到徽标的任一侧。我对网页设计和 css 还很陌生，我正在努力尝试，但无法做到这一点。所以基本上我需要我的家，大约在徽标的左侧，彼此相距 16 像素，在徽标的右侧，我需要画廊并与彼此相距 16 像素。

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>

代码：

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

最后一个链接到我使用的图像和布局本身应该在那里我希望链接看起来像！如果有人可以使用我的代码，将不胜感激！ http://www.flickr.com/photos/79239963@N07/sets/72157633896526590/

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

4

2 回答 2

1

好吧，只需在两者之间创建另一个 li 并将您的图像放在那里

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

小提琴

于 2013-06-03T14:02:55.437 回答
0

看到您没有使用徽标图像链接到任何地方，您可以将其设置为具有“无重复顶部中心”的 UL 背景图像；报废标志 div 和 img。然后将about链接上的margin-right增加到logo宽度的一半，将gallery链接上的margin left增加到logo宽度的一半。您可能也必须使用 UL 上的填充。

于 2013-06-03T12:55:30.033 回答