私は現在、基本的な 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;
}