1

ナビゲーション ボタンをロゴのどちらかの側に移動するための助けが必要です。私は Web デザインと 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;
    }

そして最後に、私が使用した画像へのリンクと、リンクをどのように見せたいかというレイアウト自体がそこにあるはずです! 誰かが私のコードでヘリを飛ばすことができれば、それは非常にありがたいです! 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 に答える