抱歉,这似乎是一个重复的问题,但没有一个解决了我的问题。
所有边距、边框和填充设置都设置为 0px。主页 div 的 margin-left 和 margin-right 两边设置为 15px。至少我看不到任何我忘记将其中之一设置为 0px 的地方。
由于某种原因,页面的顶部 div 不会与页面顶部对齐。
如果我在 <body>
标签和 <div class="main">
--- 标签之间放置任何文本,那将很难显示在屏幕顶部,但是 div“main”标签或div “header” 标签距离屏幕顶部大约有 15px 的边距。
标头.php:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php header('Content-Type: text/html; charset=utf-8'); ?>
<title><?php echo $title; ?></title>
<link href='css/main.css' rel='stylesheet' type='text/css' />
</head>
<body>
<div class='main'>
<div class="header">
<img src="images/header1.png" id="header" />
</div>
<p class='heading_1'>Welcome to D T Hourn Photography</p>
<p class='bodycontent'>
Introduction blob
</p>
<p class='bodycontent'>
Albums:
</p>
CSS.main:
html
{
border:0px;
padding:0px;
margin:0px;
}
body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
background-image: url('../images/bg1.png');
background-attachment:fixed;
padding:0px;
margin:0px;
border:0px;
}
.main
{
top:0px;
margin-top:0px;
margin-right:15px;
margin-left:15px;
margin-bottom:0px;
border-top:0xp;
border-left: 2px outset #445566;
border-right: 2px outset #445566;
width:93%;
max-width:1400px;
background: rgb(222, 222, 222);
background-color:rgba(255, 255, 255, 0.6);
}
.header
{
border-bottom: 2px groove red;
margin:0px;
background-image:url('../images/header1.png');
background-size:100% 100%;
height:200px;
}
img#header
{
width:100%;
height:200px;
vertical-align: bottom;
border:0px;
padding:0px;
margin:0px;
}
.heading_1
{
font-family: Verdana, Arial, Helvetica, sans-serif;
height:1.5em;
font-weight: bold;
color: #000000;
}
.heading_2
{
font-weight: bold;
}
table
{
border:1px solid #0000ff;
padding:0px;
border-collapse:collapse;
background-color:#ffffff;
}
.tables_heading
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
background-color: #99ccff;
border-bottom:1px solid #0000ff;
}
编辑:从 header.php 文件添加了额外的代码。如前所述,如果我将纯文本放在 <body>
和 <div class="main">
之间,那么该文本很难显示在浏览器的顶部。但 div 之间的任何内容都有约 15 像素的边框。
实际站点(我到目前为止所做的)可以在 http://dthourn.com/photography 上看到
实时版本在 firefox(至少在我的计算机上)中按我想要的方式呈现,但在 IE 或谷歌浏览器中不呈现。它不会在我本地计算机上的任何浏览器中呈现我想要的样子。
原文由 user1245135 发布,翻译遵循 CC BY-SA 4.0 许可协议
将这个简单地添加到您的 css 文件中:
希望这能解决您的问题。