0

これは簡単に修正できると確信しており、経験が豊富すぎて理解できません。WP を使用してサイトを構築していますが、ホームページは垂直ナビゲーション メニューを備えた単なる背景画像です。メニューをすべてのブラウザとウィンドウで同じ場所にとどめる方法がわかりません。私の画面では見栄えが良かったのですが、夫のモニターではナビ ペインがまったく別の場所にあることがわかりました。私はそれが位置と表示とマージンに関係していると信じていますが、これらを読んでいるとさらに迷子になり、誰かにコードを教えてもらいたいだけです.

このページはwww.sydneyjanebaily.comにあります。

これまでのところ、ページ全体のコードは次のとおりです。

本文 { background-image:url(http://www.sydneyjanebaily.com/wp-content/themes/twentyeleven/images/open-book.png); バックグラウンドリピート:リピートなし; 背景添付ファイル:固定; 背景位置:中央;

} メニュー { 表示: ブロック; }

アクセス div { 表示: ブロック; margin-left:890px; マージン右:自動; マージントップ:200px; 幅: 235px; }

/ * ** * ** * ** * ** *ナビゲーション* ** * ** * ** * / nav#access ul, nav#access li.pagenav { 表示: ブロック; リストスタイル: なし; }

nav#access ul li a span, nav#access ul li.page_item a span { position: absolute; 右: 100%; 上: 2px; 幅: 15px; 高さ: 100%; 背景画像: url(../images/nav-shadow.png); background-position: 右上。background-repeat: 繰り返し-y; }

nav#access ul li a, nav#access ul li a:visited, nav#access ul li.page_item a, nav#access ul li.page_item a:visited {表示: ブロック; パディング: 8px 10px 8px 30px; 色: 白; フォント: 150% "EBGaramondSC", "Palatino", "Palatino Linotype","Book Antiqua", Georgia, serif; テキスト装飾: なし; /*背景色:

aba000; */ マージン: 5px 0 7px 0; 位置: 相対; 幅: 235px; / font-variant: small-caps; /}

nav#access ul li a:hover, nav#access ul li a:focus, nav#access ul li.page_item a:hover, nav#access ul li.page_item a:focus{ color:

FF0000; }

nav#access li a:hover span { background-color: #666; } nav#access ul li a em { font-size: 87.50%; } nav#access ul li:nth-child(5n-4) a, nav#access ul li:nth-child(5n-4) a span { ; } } nav#access ul li:nth-child(5n-3) a, nav#access ul li:nth-child(5n-3) a span { ; } } nav#access ul li:nth-child(5n-2) a, nav#access ul li:nth-child(5n-2) a span { ; } } nav#access ul li:nth-child(5n-1) a, nav#access ul li:nth-child(5n-1) a span { ; } nav#access ul li:nth-child(5n-5) a, nav#access ul li:nth-child(5n-5) a span {; } } -->

nav#access ul li ul li span { 位置: 絶対; 右: 100%; 上: 0; 幅: 20px; 高さ: 100%; 左: 2px; マージン右: 15px; オーバーフロー: 可視; } nav#access ul li ul li:nth-child(奇数) a { background: none; 色: #EEE8AA; font-size: 小さい; マージン: 3px 20px 5px 20px; 最小高さ: 20px; 幅: 210px; パディング: 2px 0 2px 20px; } nav#access ul li ul li:nth-child(odd) a:hover, nav#access ul li ul li:nth-child(odd) a:focus { background: none; } 色: #ADFF2F; font-size: 小さい; 左: 15px; パディング: 2px 30px 2px 25px; } nav#access ul li ul li:nth-child(odd) a span { background: url(../images/sub-menu2.png) -5px 0px no-repeat; 幅: 30px; }

nav#access ul li ul li:nth-child(even) a { background: none; 色：

3B3C1D; font-size: 小さい; マージン: 3px 20px 5px 20px; 最小高さ: 20px; 幅: 210px; パディング: 2px 0 2px 20px; } nav#access ul li ul

li:nth-child(even) a:hover, nav#access ul li ul li:nth-child(even) a:focus { background: none; カラー: #FF4500; font-size: 小さい; 左: 15px; パディング: 2px 30px 2px 25px; } nav#access ul li ul li:nth-child(even) a span { background: url(../images/sub-menu2.png) -5px 0px no-repeat; 幅: 30px; }

nav#access ul li ul li ul li:nth-child(奇数) a { background: none; カラー: #FFD700; font-size: 小さい; マージン: 3px 20px 5px 30px; 最小高さ: 20px; 幅: 200px; パディング: 2px 0 2px 20px; } nav#access ul li ul li ul li:nth-child(odd) a:hover, nav#access ul li ul li ul li:nth-child(odd) a:focus { background: none; } 色: #EEE8AA; font-size: 小さい; 左: 25px; パディング: 2px 30px 2px 25px; } nav#access ul li ul li ul li:nth-child(odd) a span { background: url(../images/sub-menu.png) -10px 0px no-repeat; 幅: 30px; }

nav#access ul li ul li ul li:nth-child(even) a { background: none; 色: #3B3C1D; font-size: 小さい; マージン: 3px 20px 5px 30px; 最小高さ: 20px; 幅: 200px; パディング: 2px 0 2px 20px; } nav#access ul li ul li ul li:nth-child(even) a:hover, nav#access ul li ul li ul li:nth-child(even) a:focus { background: none; } カラー: #7FFFD4; font-size: 小さい; 左: 25px; パディング: 2px 30px 2px 25px; } nav#access ul li ul li ul li:nth-child(even) a span { background: url(../images/sub-menu.png) -10px 0px no-repeat; 幅: 30px; }

nav#access ul li a:hover:active, nav#access ul li ul li a:hover:active, nav#access ul li ul li ul li a:hover:active, nav#access ul li a:focus:active, nav#access ul li ul li a:focus:active, nav#access ul li ul li ul li a:focus:active { color:

00CCFF; 左: 1px; 上: 1px;}

/* 単数ナビゲーション */

nav-single { float: 右; 位置: 相対; 上: -0.3em; テキスト整列: 右; Z インデックス: 1; }

nav-single .nav-前、

nav-single .nav-next { float: なし; 幅: 自動; }

nav-single .nav-next { パディング左: .5em; }

    img.book {  
        /* Set rules to fill background */  
        min-height: 100%;  
        min-width: 1000px;  

        /* Set up proportionate scaling */  

        height: auto;  

        /* Set up positioning */  

        top: 0;  
        left: 0;  

      display: block;   
      margin-left: auto;  
      margin-right: auto; 
      text-align: center;
    } 

    </style>  

  <!-- <img class="book"src="<?php bloginfo('template_directory');?>/images/open-book.png" alt="xxx"

width="880" height="xxx" /> --> 

          <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
          <!-- <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content',

'トゥエンティイレブン' ); ?>"> "> --> 'プライマリ' ) ); ?>

Firefox 開発者ツールを使用して要素を検査すると、ブロックとしてマークしたもののインライン要素がまだ表示されることに困惑しています。

基本的に、px を使用してナビ ペインを配置できますが、画面上でしか正しく表示されません。パーセンテージが必要だと思いますが、それは私を超えています。助けてください。

ありがとう、シドニー

4

1 に答える 1

2

これを置き換えてみてください：

#access div {
    display: block;
    margin-left:890px;
    margin-right:auto;
    margin-top:200px;
    width: 235px;  
    }

これとともに：

#access div {
   position: absolute;
   top: 20%;
   left: 50%;
}

画面をどのように押しつぶしたり伸ばしたりしても、私のモニターではうまく機能し、あなたにもうまくいくはずです. 幸運を！

于 2012-05-22T18:38:05.340 に答える