私は現在、基本的な Web サイトを設計していますが、CSS をほぼ完成させた後、別のコンピューターで Web ページを開くと、Web ブラウザーによって異なる方法で異なるように見えるだけでなく、異なるように見えることがわかりました。
したがって、ブラウザまたは解像度の互換性に問題があるかどうかわからないので、私の質問は、問題がどの分野にあるのか (両方である可能性があります) を誰かに教えてもらえないでしょうか。
以下は、解像度が 1600x900 の私のラップトップと、解像度が 1440x900 のファミリー コンピューターの 4 つの「メイン」ブラウザーで実行された Web ページのスクリーンショットのオンライン アルバムへのリンクです。また、ページのサイズを変更したり拡大したりすると、物事が動き始めます。
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;
}