Question

我需要帮助将导航按钮移动到徽标的任一侧。我对网页设计和css都很陌生，而且我正在努力尝试，但却无法实现这一目标。所以基本上我需要我的家和徽标的左侧相距16px，并且在徽标的右侧我需要画廊并且彼此间隔16px。

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

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/

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

Fiddle

Answer 2

看到你没有链接到任何带有徽标图像的地方，你可以将它设置为UL背景图像，带有“无重复顶部中心”;废弃徽标div和img。然后将about链接上的margin-right增加到徽标宽度的一半，并将画廊链接上留下的边距增加到徽标宽度的一半。您也可能必须使用UL上的填充。

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

2 个答案: