0

私は現在、基本的な Web サイトを設計しており、左側のナビゲーション バーの動作を変更したいと考えています。そのままの位置に固定したいのですが、固定したままスクロールできるようにしたいのです。

私の質問は、移動せずに位置を固定に変更し、他のすべてを正しく配置する作業を台無しにする方法はありますか? Web サイトの画像にリンクし、HTML と CSS を含めます。

追加の質問として、HTML を別のブラウザーで実行すると Web サイトが異なって見える理由を教えてください。現在 Google chrome を使用しています。px 値を使用すると、この問題が解消されると思いました。

EDIT 2
これは、2 つの異なる画面上の異なるブラウザーのスクリーンショットです。この Web ページは、解像度が 1600x900 のラップトップの Google Chrome 用に設計されています。比較しているコンピューターの解像度は 1440x900 です。ウィンドウを調整すると問題が発生します。ズームすることはありません。このリンクは、8 つの画像を含むギャラリーに移動します。http://postimg.org/gallery/908tlytw/

HTML コード

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso10646"/>
    <meta http-equiv="content-language" content="en-GB"/>
    <meta name="author" content="###########"/>
    <meta name="designer" content="##########"/>
    <meta name="description" content="The official website of ##########, promoting her humanist services."/>
    <!--<meta name="keywords" content="##########, humanist"/>-->
    <meta name="language" content="english"/>
    <meta name="robots" content="index, follow"/>
    <meta name="googlebot" content="index, follow"/>
    <link type="text/css" rel="stylesheet" href="stylesheet lego.css"/>
    <title>Home Page</title>
</head>

<body>
    <div id="page">

        <div class="toparea">
            <img src="Client's Logo.png" id="logo"/>
            <h1 id="title">Significant Ceremonies by ##########</h1>
            <ul>
                <li>Tel: ############</li>
                <li>E-mail: #######################</li>
            </ul>
        </div>

        <div class="sidearea">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">About Me</a></li>
                <li><a href="">Humanism</a></li>
                <li><a href="">Planning</a></li>
                <li><a href="">Specialist Areas</a></li>
                <li><a href="">Testimonials</a></li>
                <li><a href="">Contact Me</a></li>
            </ul>
        </div>

        <div class="mainarea">
            <h2 id="subtitle">Home</h2>
            <p>"I would rather live a life based on honesty, compassion and humanity through my own free will instead of it coming from the fear of
                divine beings." - ###########</p>
            <p>Welcome to my web site, here you can find information about the services I perform and about Humanism itself. Please feel free to 
                navigate around my site and if you have any questions you can either contact me directly or use the form on the 'Contact Me' page.</p>
        </div>

        <div class="bottomarea">
            <ul>
                <li>Tel: ############</li>
                <li>E-mail: #######################</li>
            </ul>
            <img src="BHA logo.jpg" id="bhalogo"/>
        </div>

    </div>
</body>
</html>

CSSコード

body
{
    background-color: #CCCCCC;
}

#page
{
    position: absolute;
    left: 25%;
    height: 100%;
    width: 800px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    background-color: #E6F5E6;
    font-family: vijaya, sakkal majalla, narkisim, monotype corsiva, jasmineupc, gabriola, french script mt, footlight mt light, calisto mt, papyrus;
}

.toparea
{
    float: left;
    width: 800px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}

#logo
{
    float: left;
    width: 200px;
    height: 220px;
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: 10px;
}

#title
{
    float: left;
    width: 250px;
    height: 160px;
    margin-top: 70px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: 80px;
    text-align: center;
    font-size: 32px;
    color: #002E00;
}

.toparea ul
{
    float: left;
    width: 180px;
    height: 220px;
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: 40px;
    list-style: none;
}

.sidearea
{
    clear: both;
    float: left;
    width: 200px;
    margin-top: 60px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
}

.sidearea ul
{
    list-style-type: none;
}

.sidearea ul li
{
    margin-top: 0;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 0;
    text-align: center;
    border-style: solid;
    border-radius: 5px 5px 5px 5px;
    background-color: #4DB84D;
    border-color: #002E00;
    font-size: 25px;
}

.sidearea ul li a
{
    text-decoration: none;
    color: black;
}

#subtitle
{
    color: #002E00;
}

.mainarea
{
    float: left;
    width: 560px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: 20px;
    padding-right: 10px;
    padding-left: 10px;
    /*background-color: #EEF8EE;*/
}

.bottomarea
{
    clear: both;
    float: left;
    width: 800px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}

.bottomarea ul
{
    position: fixed;
    bottom: 0;
    left: 360px;
    width: 610px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: 10px;
    list-style-type: none;
}

#bhalogo
{
    position: fixed;
    right: 388px;
    bottom: 0;
    width: 150px;
    height: 100px;
    margin-top: 0;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: auto;
}
4

2 に答える 2

0

あなたはこれを試すことができます position:fixed;top:10%;left:4%;...例:: FIDDLE

top: の値と left は単なる例です。必要に応じて変更してください。

于 2013-08-12T18:18:51.723 に答える
0

私の理解が正しければ、html にあまり多くの変更を加えずに左側のメニューを「フローティング」したいと考えています。これを行うには、あなたと同じスタイル.sidearea(幅、高さなど) を持つが、それ以外はコンテンツを持たない別の div をプレースホルダーとして追加し、 のスタイル.sideareaを sayに変更しますposition:fixed

ブラウザーの問題はより微妙です。カスタム フォントの可用性、ブラウザーが使用するデフォルトの CSS などによって異なります。通常、問題ごとに違いを確認することで解決されます。

于 2013-08-12T18:25:49.213 に答える