1

www.magalidb.0fees.netでポートフォリオWebサイトを作成していますが、いくつかのブラウザーでWebサイトを正しく表示する際に問題が発生しています。問題は、一部のブラウザでは、コンテンツの下半分（コンテナ内にある）のみが表示され、上半分はブラウザウィンドウの上部のリーチより上のどこかにあることです。例を見るには、Firefox、Opera、またはInternetExplorerで自分のWebサイトを開いてみてください。

いくつかの検証エラーがありますが、それらはそれほど緊急ではありません。これらのエラーはいずれも、Webサイトの動作に関連していません。ちなみにこのサイトはHTML5で書かれており、通常のCSSとCSS3の両方を使用しています。

問題は垂直方向のセンタリングにあるようです。コンテナの内容を水平方向と垂直方向の両方で中央に配置します。

コンテナを水平方向に中央揃えにするために、次のCSSを使用しました。

#container {
min-height: 100%; /* To make sure it reaches the bottom of the browser page */
width: 940px;
margin-left: auto; /* Center horizonticallly */
margin-right: auto; /* Center horizontically */
overflow: hidden;
overflow-y: hidden; /* Vertical scrollbar fix for IE */ }

垂直方向のセンタリングには、次のCSSがあります。

#valigner {
width: 720px;
position: absolute;
top: 50%;
bottom: 50%;
height: 500px;
margin-top: -45%;   
margin-bottom: -45%;
margin: -40% 0 0 220px; }

220pxは、コンテンツとヘッダーがサイドバーの後ろにくっつかないようにするためだけのものです。

これは、私のインデックスページの本文にあるコードの一般的なレイアウトです。

<body>
<div id="container">
<div id="sidebar" class="left">
    <?php include('sidebars/sidebar.php'); ?>
    </div>
<div id="valigner">
    <div id="sidebar-bottom" class="left"></div>
    <div id="head" class="right"><h1>Magali&#39;s portfolio</h1></div>
    <div id="main" class="right">
        <div id="content-textbox">
            <div class="intro-left">
                Text comes here.
                            </div>
            <div class="intro-right">
                <img alt="Me!" class="resizeProfile" src="images/magali.jpg">
            </div>
        </div> <!-- Closing of div content-textbox -->
    </div> <!-- Closing of div main -->
    <div id="footer" class="right">
        <?php include('language.php'); ?>
    </div>
</div> <!-- Closing of div valigner -->
</div> <!-- Closing of div container -->
</body>

私のウェブサイト（http://www.magalidb.0fees.net）をチェックしてください。ChromeとSafariでは正しく表示されますが、Firefox、Opera、InternetExplorerでは正しく表示されません。私はこれについて非常に困惑しているので、どんな助けでも大歓迎です。

！！！編集！！！

見つけた！今では完璧に動作します。

コンテナとvalignerの両方のコードを次のように置き換えました。

#container {    
position: absolute; 
top: 50%; 
width: 100%; 
height: 1px; 
overflow: visible;
}

#valigner { 
position: absolute; 
left: 50%; 
width: 940px; 
margin-left: -470px;
height: 540px; 
top: -270px 
}

コードはそれ自体を説明しています、それはとても論理的です。コンテンツを水平方向と垂直方向に中央揃えにする別の方法を探して、これを見つけました。以前この方法を使っていたので今はばかげていますが、時代遅れだと思って無視しました...

とにかく助けてくれてありがとう！よろしくお願いします。;）

PS：自分の投稿に答えることはできません。試しましたが、「評判が10未満のユーザーは、質問後8時間は自分の質問に回答できません。5時間以内に自己回答できます。それまではコメントを使用するか、質問を編集してください。 "。それで、通知が私に示唆したように、私は私の質問を編集しました。その5時間後にもう一度質問を編集し、正しい方法で回答を投稿する予定ですが、それまではこれ以上のことはできません。ごめん！

4

1 に答える 1

1

あなたがあなたの質問に答えたことは知っていますが、あなたがあなたのサイトをどのようにコーディングしたかについて少し戸惑っています。#containerそれには正当な理由があるかもしれません。そうであれば、モデレーターは私のコメントを削除できますが、特に要素と要素の両方で、すべてのポジショニングが必要だとは思いません#valigner。実際、面倒なテクニックなど#containerを使用せずに、要素の2つの属性を使用して実行できると思います。position: absolute;これが私の提案です：

#container {
    width: 940px; // or whatever you want the width to be. I think this is what you specified originally.
    margin: 25px auto; // Centre the design in the middle of the page and put it 25px from the top and bottom of the browser window.
}

それだけだと思います。これを削除#valignerして使用することができます。position: absolute;どこでも、特に最上位の要素を使用し続けると、後ですべてが非常に乱雑になり始めます。

于 2012-09-17T20:44:41.227 に答える