非常抱歉,这似乎是一个重复的问题,但是没有解决我的问题。
所有的边距、边框和内边距设置都为0像素。主页面div的margin-left和margin-right在两侧都设置为15px。至少我没有看到我忘记将其中之一设置为0px。
由于某种原因,页面顶部的div不会与页面顶部对齐。
如果我在标签和
标签之间放置任何文本,那么它将紧贴着屏幕顶部,但是
标签或
标签中的任何文本都将距离屏幕顶部约15px。
header.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或Google Chrome中不是。在我的本地计算机上,任何浏览器都无法呈现我想要的效果。
.header
和.main
元素的HTML部分吗?给出的部分并不是很有帮助。--我猜这只是你的标题将主要内容向下推。 - Smamatti<?php header
命令在那个位置不起作用,但我认为这并不是问题的原因。 - Mr Lister