0

これは私のヘッダーです：

<head>
<link href="/css/header.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="background"><img src="/multi/background.jpg" width="100%" height="100%" alt=""></div>

<div id="content">

<div align="center" class="headtable">
    <table width="980" border="0" height="40">
        <tr>
            <td width="503" rowspan="2" height="35" align="left" valign="middle"><a href="/index.php"><img src="/multi/header.png" width="344" height="32" hspace="0" border="0"/></a></td>

            <td width="424" align="right" valign="top">
                <a href="/index.php" class="headlink">Italiano</a>  
                <span class="headlink">|</span>   
                <a href="/ger/index.php" class="headlink">Deutsch</a>  
                <span class="headlink">|</span>   
                <a href="/fra/index.php" class="headlink">Français</a>  
                <span class="headlink">|</span>   
                <a href="/index.php" class="headlink">Home</a>
                <span class="headlink">|</span>   
                <a href="#" onClick="window.print();" class="headlink">Stampa Pagina</a>
      </tr>
    </table>
</div>

<div class="buttontable">
<table width="1080" border="0" cellpadding="0" align="center">
    <tr>
        <td height="20" align="center"> 

        <a class="button" href="/o.php">o</a>
        <a class="button" href="/p.php">p</a>
        <a class="button" href="/a.php">a</a>
        <a class="button" href="/s.php">s</a>
        <a class="button" href="/st.php">st</a>
        <a class="button" href="/p.php">p</a>
        <a class="button" href="/t.php">t</a>
        <a class="button" href="/c.php">c</a>
       </td>
    </tr>
</table>
</div>
</div>
</body>

そしてcssファイル：

/* pushes the page to the full capacity of the viewing area */
html {
    height:100%;
}
body {
    height:100%;
    margin:0;
    padding:0;
}
/* prepares the background image to full capacity of the viewing area */
#background {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
/* places the content ontop of the background image */
#content {
    position:relative; z-index:1;
}

/* not apply if IE6 or lower */
* html {
  background-color: #6f6;
}
* body {
    height:100%;
    margin:0;
    padding:0;
}
* #background {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
* #content {
    position:relative; z-index:1;
}
/* END not apply if IE6 or lower */

.headtable {
    background-color:#02346F;
}

.headlink {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#d8dfea;
}

.buttontable {
    background-color:#F00;
}

a.button {
    display:inline-block;
    color:#FFF;
    font-family:Calibri;
    font-size:18px;
    font-weight:bold;
    padding:2px 16px;
    text-decoration:none;
    font-variant:small-caps;
}a.button:hover {
    background-color:#F00;
    color:#02346F;
    padding:2px 16px;
    font-size:18px;
    font-weight:bolder;
}

a.buttonselect {
    background-color:#ffffff;
    display:inline-block;
    color:#02346F;
    font-family:Calibri;
    font-size:18px;
    font-weight:bold;
    padding:2px 16px;
    text-decoration:none;
    font-variant:small-caps;
}

ウィンドウサイズがページ（header.php）よりも狭い場合、テーブルは背景になります（私が何を意味するのか理解できるかどうかはわかりませんが、それを説明することはできません...）

私が得た最初の解決策は、CSSの本文の幅のサイズをたとえば1000pxに設定することでしたが、その後、すべてのページを左揃えにしました。

どうすればこの問題を解決できますか？問題は背景画像に起因するものではありません。bgなしでもすべてテストしたからです...

4

2 に答える 2

1

これは、テーブルが固定幅であり、コンテナーが可変幅であるためです。ビューポートが固定幅より狭い場合、テーブルはジャンプします。また、divをテーブルの中央に配置する場合は、インラインスタイルの代わりにCSSを使用します。

.headtable
{
background-color:#02346F;
width:65% /* arbitrary width, use your own discretion */
margin: 0 auto;
}

これらのテーブルをナビゲーションに使用しているので、代わりに順序なしリストを使用することをお勧めします。

これが私がメニューを始めるための基礎として使っているサイトです。固定幅のテーブルよりも、CSSを使用して制御する方が、セマンティック的に優れており、CSSを使用して制御する方がはるかに簡単です。

http://css.maxdesign.com.au/listamatic/index.htm

于 2013-01-22T18:08:23.390 に答える
0

可能であれば、あなたのコードに関するいくつかの建設的な意見。

  • レイアウトにテーブルを使用しないでください。セマンティックに正しいhtmlタグを使用してみてください。あなたのナビゲーションはリンクのリストなので、<ul>
  • コンテンツとスタイリングを別々に保つようにしてください。このようにして、コードを最新の状態に保つことがはるかに簡単になります。また、別のスタイルシートをロードするだけで、サイトの外観を完全に変えることができます。そしてそれは物事を変えることをはるかに簡単にします、あなたがそれらをどこで探すべきかを常に知っているからです。

コメントを付けるだけでも簡単なので、HTMLを作成する必要がある場合のHTMLの例を示します。

<body>

  <div id="wrapper">

    <div id="header">

       <a id="logo" href="/index.php" alt="company logo"><img src="/multi/header.png"/></a>

       <ul id="main-nav">
           <li><a href="/index.php">Italiano</a></li>    
           <li><a href="/ger/index.php" class="headlink">Deutsch</a></li>  
           ...    
       </ul>

       <div class="clear"></div>

    </div>
  </div>
  ...

比較のために、フィドルのコードは次のとおりです。http: //jsfiddle.net/ERghQ/
フィドルのコードは次のとおりです。http：//jsfiddle.net/JChZT/

また、例で使用したスタイルを模倣するために、いくつかのクイックcssを追加したことに注意してください。テーブルと固定幅の代わりにfloatとdivを使用しているため、幅の問題が解決されたことに注意してください。ウィンドウのサイズを試してみると、コンテンツが適応することがわかります。

繰り返しになりますが、私はあなたの仕事を分解するつもりはありません。私はただ助けて、今日の物事がどのように行われているのかをあなたに示すようにしています。最初は慣れるのに少し時間がかかるかもしれませんが、すぐに利点がわかります。コードについてさらに説明が必要な場合はお知らせください。私があなたを正しい方向に向けるのを手伝ってくれたことを願っています！

編集：
クラス の空divは.clear、clearfix問題として知られているものを解決するために使用されます。ほとんどのブラウザはヘッダーに高さを与えないため、直接の子はすべてフローティングであるため、ヘッダーは非表示になります。（フィドルでそれを削除すると、私が何を意味するかがわかります。）これを解決する方法はたくさんあります。私が使用した方法はおそらく最善ではありません。レイアウトのためだけにコンテンツに空のdivを追加する必要があるためです。これは、コンテンツとスタイルを常に分離しておく必要があるという私自身の主張に反しますが、これはすばやく簡単な方法です。 。適切な.clearfixクラスをグーグルで検索し、そのクラスをヘッダー（およびクリアが必要なその他のコンテナー）に適用することをお勧めします。

于 2013-01-22T18:44:26.717 に答える