1

Web サイトのメニューの設定に問題があります。ウェブサイト全体は、margin: auto で集中管理されています。リンク、ボタンを含むdivであるため、何らかの理由でメニューが中央に配置されません。各ボタン リンクには背景画像があります。これは、ボタンの画像の幅が 315px で、オーバーレイ画像が含まれているためです。たとえば、ユーザーがこの画像を保持すると、画像は左に 105 ピクセル移動し、マウスオーバー オプションが表示されます。(コードを見る)

これは .html です: (ボタンの ID 名は気にしないでください。:D を変更する気にはなりませんでした。はい、私はスウェーデン人です)

    <body>
    <!--Banner-->
    <img src="/header/picture.png" />
    <img src="/header/banner.png" />

    <!--Pre-loads the images for menu-->
    <img src="/header/start.png" style="display: none;" />
    <img src="/header/bestall.png" style="display: none;" />
    <img src="/header/priser.png" style="display: none;" />
    <img src="/header/omoss.png" style="display: none;" />
    <img src="/header/support.png" style="display: none;" />
    <img src="/header/filarkiv.png" style="display: none;" />

    <!--Menu-->
    <div id="menu">
    <a href="index.php" id="startknapp"></a>
    <a href="index.php" id="priserknapp"></a>
    <a href="index.php" id="bestallknapp"></a>
    <a href="index.php" id="omossknapp"></a>
    <a href="index.php" id="supportknapp"></a>
    <a href="index.php" id="filarkivknapp"></a>
    <img src="/header/box.png" id="box" />
    </div>

    <div id="content">
    <p>Hi!</p>
    <p>This is one paragraph</p>
    <p>And this is another.</p>
    </div>
    </body>

メニューのCSSでボタンを設定した方法は次のとおりです。

    /*Startknappen*/
    #startknapp
    {
        position: absolute;
        left: 0px;
        width: 105px;
        height: 35px;
        text-decoration: none;
        background-image:url(start.png);
    }

    #startknapp:hover 
    {
        background-position: -105px 0; 
    }

    #startknapp:active 
    {
        text-decoration: none;
    }

    /*Priserknappen*/
    #priserknapp
    {
        position: absolute;
        left: 105px;
        width: 105px;
        height: 35px;
        text-decoration: none;
        background-image:url(priser.png);
    }

    #priserknapp:hover 
    {
        background-position: -105px 0;
    }

    #priserknapp:active 
    {
        text-decoration: none;
    }

    ... and so on for the other buttons...

.css の一部を次に示します。

    #html, body 
    {
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        width: 800px;
        height: 800px;
        margin: auto;
    }

    #menu
    {
        height: 35px;
        width: 800px;
    }

    #content
    {
        position: absolute;
        width: 800px;
        background-color: ;
    }

今の問題は、上に書いたように、メニューが集中しないことです。ただし、 position: absolute; を行う場合は、#menu の場合、集中化します。唯一の問題は、コンテンツがメニューと重なることです。私はそれを望んでいません。メニューの一番下からコンテンツを 0px で開始したい。これがどのように見えるかのいくつかの画像です：

集中しない: http://imageshack.us/photo/my-images/15/leftra.png

位置: 絶対: http://imageshack.us/photo/my-images/443/centerh.png

誰かが私がこれを正しくするのを手伝ってくれることを願っています. 前もって感謝します ：）

4

2 に答える 2

2

body タグを閉じていないのか、それとも単にコピーと貼り付けから切り取っただけなのかはわかりません。

また、絶対位置でメニュー項目を設定している場合は、#menu のスタイルに「position: relative」を含める必要があります。これにより、ページの本文ではなく、メニュー コンテナーに対して相対的に配置されます。

また、このコードが何をするのかわかりません：

#html, body 
    {
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        width: 800px;
        height: 800px;
        margin: auto;
    }

幅で中央に配置しようとしていますが、「上：0;右：0など」という部分で隅々まで伸ばす必要があると言っています

次のようなラッパーがある方がはるかに良いでしょう：

HTML:

<div id="wrapper">
    All content in here
</div>

CSS:

#wrapper { margin: 0 auto; width: 800px; }

編集：また、Ubuntuを使用している他の誰かに会えてうれしいです;）

Edit2 :「位置: 絶対」の代わりにフロートを使用してナビゲーション項目を配置した方がはるかに良いでしょう。詳細については、こちらを参照してください。

ポジショニングの詳細については、こちらを参照してください。

于 2012-07-12T15:23:59.517 に答える
1

Sean Dunwoody が言ったように、div.menu に対して position: を追加する必要があります。position: absolute を使用すると、アイテムは position プロパティが与えられる最後のアイテムに配置されます。メニュー項目以外に div を配置していないため、それらは div の階層を上に移動し、body タグに関連して配置されます。position: relative to div.menu を追加することで、必要な場所 (つまり、他のすべてのものとの相対) を div.menu に伝えると、ボタンは必要な場所を認識します (親の div、div に関して絶対的に配置されます)。 。メニュー）

于 2012-07-12T17:01:56.830 に答える