我的CSS样式表仅影响了我4页中的3页。 如何更新第4页？
[英]My CSS style sheet only affected 3 out of my 4 pages. How do I update that 4th page?
问题描述
My main problem here is that I have one .css stylesheet hooked up to 3 page because this really is just forming a template for the time being until I can decide how I want each page to look individually. 
我的主要问题是，我有一个.css样式表连接至3个页面，因为这实际上只是暂时形成一个模板，直到我可以决定我希望每个页面如何显示为止。
I preformed some div positioning on the website and I think it looks nice and centered on most of the pages...most. 我在网站上进行了一些div定位，我认为它看起来不错，并集中在大多数页面上。 I have one page that is hooked up to the correct style sheet and will change anything I add to the style sheet, except where some divs won't shift on this one page. 我有一页连接到正确的样式表，并且将更改我添加到样式表的任何内容，除非有些div不会在这一页上移动。 Here is a screenshot of a page that works: 这是一个有效页面的屏幕截图：
And one that doesn't: 还有一个没有： Click here
点击这里
If you look closely, you are can see that my links are shifted more to the upper-right corner and so are my main content sections. 如果仔细看，您会发现我的链接移到了右上角，主要内容部分也移到了右上角。 The other two links that are used in this website look the same as the working page, by the way. 顺便说一下，本网站中使用的其他两个链接与工作页相同。
CODING (Warning, there may be a tad unnecessary code there, but the coding is exactly the same on all websites except for the img src attributes, so there is no reason that all page wouldn't look the same): 编码（警告，那里可能有一些不必要的代码，但是除了img src属性之外，所有网站上的编码都完全相同，因此没有理由使所有页面看起来都不一样）：
Page that works: 起作用的页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teens For Antarctica Preservation</title>
<link href="template.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
</div>
<div>
<p><a id="firstlink" href="index.html">TAP</a>
<a id="rollover" href="whatis.html">Who is TAP</a>
<a id="rollover" href="why.html">Why we do it</a>
<a id="rollover" href="resources.html">Resources</a></p>
<p> </p>
</div>
<p> </p>
<p> </p>
<img id="image" src="images/14_Seal2.jpg" /> <!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="main="Main" content="Content"" --><p id="main">Main Content</p>
<div id="footer"><p id="pfoot" style="vertical-align:bottom;">Teenspace and Teens For Antartica Preservation Inc. <br />Web Desinger: Mathew Crogan</p></div>
</body>
</html>
This is the code for the website that doesn't work: 这是无效的网站代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Who is TAP?</title>
<link href="template.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
<div>
<p><a id="firstlink" href="index.html">TAP</a>
<a id="rollover" href="whatis.html">Who is TAP</a>
<a id="rollover" href="why.html">Why we do it</a>
<a id="rollover" href="resources.html">Resources</a></p>
<p> </p>
</div>
<p> </p>
<p> </p>
<img src="images/14_Teens.jpg" id="image"/><!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="main="Main" content="Content"" --><p id="main">Main Content</p>
<div id="footer"><p id="pfoot" style="vertical-align:bottom;">Teenspace and Teens For Antartica Preservation Inc. <br />Web Desinger: Mathew Crogan</p></div>
</body>
</html>
And here is my CSS stylesheet: 这是我的CSS样式表：
@charset "utf-8";
/* CSS Document */
.header
{
height: 150px;
width: 100%;
margin-left: 25px;
margin-right: 50px;
position:relative;
left:0px;
top:0px;
}
html
{
width: 1000px;
height: 650px;
background-color:#D7D7FF;
}
a#rollover:link, a#rollover:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#B8B8B8;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
border:1px solid #000;
float:left;
margin-top:30px;
}
a#rollover:hover, a#rollover:active
{
background-color:#A7A7A7;
}
a#firstlink:link, a#firstlink:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#B8B8B8;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
border:1px solid #000;
float:left;
margin-top:30px;
margin-left:265px;
}
a#firstlink:hover, a#firstlink:active
{
background-color:#A7A7A7;
}
#image
{
height:230px;
width:300px;
float:left;
border: 3px solid #B5B5B5;
margin-left:150px;
margin-top:10px;
border-radius:25px;
box-shadow:10px 10px 6px #A3A3A3;
}
#main
{
height:250px;
width:450px;
border:3px solid #B5B5B5;
margin-left:500px;
margin-top:15px;
border-radius:25px;
box-shadow:10px 10px 6px #A3A3A3;
padding-left:10px;
padding-top: 6px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight:400;
background-color:#FFF;
}
#footer
{
height:100px;
bottom:0px;
text-align:center;
width:100%;
padding-top:100px;
padding-left:25px;
}
#pfoot
{
margin-left:50px;
}
Please provide any insite on how to fix this problem. 请提供有关如何解决此问题的任何现场信息。
2 个解决方案
解决方案1
4 2014-01-08 16:04:49
Working 工作
<div class="header">
<div style="margin-left:200px;">
<img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
</div>
Not working 不工作
<div class="header">
<div style="margin-left:200px;">
<img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
On the not working version, you've missed out the closing div for 'header' 在不工作的版本上，您错过了“标头”的结尾div
解决方案2
0 2014-01-08 16:09:34
I see, your html code is not the same. 我知道，您的html代码不一样。
1st document 第一份文件
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
</div>
<div>
and the second document: 第二份文件：
<body>
<div class="header"><div style="margin-left:200px;"> <img src="images/logo_2.jpg" width="600" style="padding-top:12.5px;" />
</div>
<div>
the second document is not correct, as you forgot to close the second div . 第二个文档不正确，因为您忘记了关闭第二个div 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.