0

我目前正在设计一个基本网站，然而，在几乎完成了我的 CSS 之后，我发现当我在另一台计算机上打开网页时，它看起来不同，而且不仅取决于网络浏览器，它在不同方面看起来也不同。

因此，我不确定这是否是浏览器或分辨率兼容性的问题，所以我的问题是谁能告诉我问题出在哪个领域（可能两者都有），也许可以就我可以解决问题的方向提出建议。

以下是在我的笔记本电脑（分辨率为 1600x900）和家庭电脑（分辨率为 1440x900）的四个“主要”浏览器上运行的网页截图在线相册的链接。此外，如果页面被调整大小或放大，那么事情就会开始移动。

预先感谢您的任何帮助或建议，如果您希望我提供任何进一步的信息，请说出您希望看到的内容。

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

0 回答 0