gpt4 book ai didi

html - 分辨率和浏览器兼容性

转载 作者:行者123 更新时间:2023-11-28 12:28:19 28 4
gpt4 key购买 nike

我目前正在设计一个基本网站,但是,在接近完成我的 CSS 之后,我发现当我在另一台计算机上打开该网页时,它看起来有所不同,而不仅仅是它看起来有所不同,具体取决于网络浏览器。

因此我不确定这是否是浏览器或分辨率兼容性的问题所以我的问题是任何人都可以告诉我问题出在哪个领域(可能是两个),也许是关于我可以去解决的方向的建议问题。

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

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

最佳答案

您最大的问题是您设置了 left: 25%width: 800px。你得到的正是你所要求的。该 div 的左侧占整个页面的 25%,宽度为 800 像素。虽然这可能适用于特定分辨率,但在其他人看来肯定会偏离中心。

保留你的宽度并设置 margin: 0 auto;这会为左/右设置一个 auto 边距,这将有效地将您的 div 在页面上居中。

关于html - 分辨率和浏览器兼容性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18401673/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com