Fatal编程技术网
  • html/
  • Html 分辨率和浏览器兼容性

Html 分辨率和浏览器兼容性

html css browser

Html 分辨率和浏览器兼容性,html,css,browser,resolution,Html,Css,Browser,Resolution,我目前正在设计一个基本的网站，但是，在我几乎完成CSS之后，我发现当我在不同的计算机上打开网页时，它看起来是不同的，不仅仅是它看起来不同，取决于网络浏览器的不同方式 因此，我不确定这是否是浏览器或分辨率兼容性的问题，因此我的问题是，是否有人能告诉我问题出在哪个领域（可能两者都有），以及我解决问题的方向 下面是一个链接，该网页的屏幕截图在我的笔记本电脑的四个“主要”浏览器上运行，分辨率为1600x900，家庭电脑的分辨率为1440x900。此外，如果页面被调整大小或放大，那么事情就会开始移动 提

我目前正在设计一个基本的网站，但是，在我几乎完成CSS之后，我发现当我在不同的计算机上打开网页时，它看起来是不同的，不仅仅是它看起来不同，取决于网络浏览器的不同方式

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

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

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

HTML

您最大的问题是设置
左：25%
和
宽度：800px
。你得到的正是你想要的。该div的左侧是整个页面的25%，宽度为800像素宽。虽然这可能适用于特定的解决方案，但在其他人看来，它肯定会偏离中心

保留宽度设置并设置
边距：0自动
；这将设置左/右的
自动
边距，这将有效地将div置于页面的中心。
您的图像链接不工作？我还可以看到您的
src
和
href
引用可能不正确。例如，样式表引用应该是，例如
href=“lego.css”
，具体取决于文件位置。（与图像问题类似）。听起来你需要调查和。@YaMo我将在下一次上计算机时对图像链接进行排序，src和href都很好，我只是把文件命名得非常好。@Spudley谢谢你的建议，我将开始研究它们。谢谢你的回答，然而，当我尝试你的建议，并摆脱了左：25%，它导致了页面有一个文本左对齐，而不是居中。@Spudious，
left
与文本对齐无关。您的CSS中还有其他错误。对不起，这不是文本对齐。整个页面div向左移动。

<!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>



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;
}