一些东西固定

Question

这个问题实际上已被问过很多次，但我找到的答案都没有对我有用。也许我做错了。无论如何，我使用CSS divs创建了一个站点，并愚蠢地使用浏览器窗口来确保所有内容都正确对齐。当我完成并缩小时，所有图像和其他div元素都移动并移动而不是像预期的那样被固定。我隐约知道问题与缺少包装div和/或我使用相对和绝对定位很多的事实有关，只是为了使它工作。任何帮助表示赞赏，我是CSS新手，这是我用它制作的第一个网站。谢谢！ -zac

以下是按要求打开网站的链接： http://wctadm.org/

无法嵌入屏幕截图，这里有一个链接：http://imgur.com/MmmGceb 正如我在一台显示器上看到的那样显示正确的对齐方式，以及缩小后的混乱版本。

HTML文件：

    <!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>
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,800,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<style>

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Default Page</title>
</head>

<body>
<div id="container">
<div id="content" class="clearfix">
<!-- Content //--->
</div>

<div id="header">
<!-- NAVBAR     <img src="DM-logo.png" alt="DM Logo" height="81" width="130">  //--->

<ul id="menu" style="position: relative; z-index: 100;">
  <li><a href="">Gallery</a></li>
  <li><a href="">Contact</a></li>
  <li><a href="">FAQ</a></li>
  <li><a href="">Teachers</a>
    <ul>
    <li><a href="">Mrs. Rosarita Olvina</a></li>
    <li><a href="">Mrs. Christine Pavesich</a></li>
    <li><a href="">Mr. Francisco Virella</a></li>
    </ul>
  </li>
  <li><a href="">Courses</a>
    <ul>
    <li><a href="">Graphic Design</a></li>
    <li><a href="">Photography</a></li>
    <li><a href="">Video Production</a></li>
    <li><a href="">Animation</a></li>
    <li><a href="">Art</a></li>
    </ul>
  </li>
  <li><a href="">About</a>
    <ul>
    <li><a href="">What We Do</a></li>
    <li><a href="">Where We Go</a></li>
    </ul>
  </li>
  <li><a href="">Home</a></li>
</ul>


<ul id="logo">
<ul>
<li><img src="dm-button.png" style="position: absolute; top: 0px; left: -120px; z-index: 1;" height="120" width="120"/></li>
</ul>

<ul id="welcome"> 
<ul>
<li><p style="position: absolute; top: 140px; left: 75px; z-index: 2;">Welcome to Digital Media at WCTA</p></li>
</ul>

<ul id="banner">
<ul>
<li><img src="bannerbackgroundDMwithshadow.png" style="position: absolute; top: 81px; left: -120px; z-index: 0;" height="400" width="859"/></li>
</ul>
   </div>
  </div> 
 </div>
</div>

<div id="quicklinks">
    <div id="links1">
        <img src="courses-icon2.png" style="position: relative; top: 0px; left: 40px; z-index: 100;" height="97.75" width="139"/>
        <p style="text-align: center; position: relative; top: -10px; left: 0px; z-index: 100; font-size: 22px; font-weight: bold;">Explore courses</p>
        <p style="text-align: center; position: relative; top: -30px; left: 0px; z-index: 100; font-size: 12px;">Our courses teach advanced digital media in a wide range of subjects.</p>
        <a href="courses.html" style="text-decoration: none"><img src="more.png" style="position: relative; top: -24px; left: 60px; z-index: 101;" height="33.6" width="98.5"/></a>
    </div>

    <div id="links2">
        <img src="gallery-icon.png" style="position: relative; top: 0px; left: 40px; z-index: 100;" height="97.75" width="139"/>
        <p style="text-align: center; position: relative; top: -10px; left: 0px; z-index: 100; font-size: 22px; font-weight: bold;">View the gallery</p>
        <p style="text-align: center; position: relative; top: -30px; left: 0px; z-index: 100; font-size: 12px;">Gallery of our student's finest work in a variety of mediums.</p>
        <a href="gallery.html" style="text-decoration: none"><img src="more.png" style="position: relative; top: -24px; left: 60px; z-index: 101;" height="33.6" width="98.5"/></a>
    </div>

    <div id="links3">
        <img src="contact-icon2.png" style="position: relative; top: 0px; left: 40px; z-index: 100;" height="97.75" width="139"/>
        <p style="text-align: center; position: relative; top: -10px; left: 0px; z-index: 100; font-size: 22px; font-weight: bold;">Contact us</p>
        <p style="text-align: center; position: relative; top: -30px; left: 0px; z-index: 100; font-size: 12px;">Drop us a line if you have any questions or concerns regarding our program.</p>
        <a href="contact.html" style="text-decoration: none"><img src="more.png" style="position: relative; top: -24px; left: 60px; z-index: 101;" height="33.6" width="98.5"/></a>
    </div>
</div>



<!---------- BLURB //------------------->
<div id="blurb">
    <div id="blurbpic">
        <img src="placeholder.png" style="position: relative; top: 0px; left: 0px; z-index: 100;" height="250px" width="250px"/>
    </div>

    <div id="blurbtext">
        <p style="text-align: left; position: relative; top: -10px; left: 0px; z-index: 100; font-size: 50px; color:white; font-family:'Open Sans Condensed', sans serif;">Dedicated to excellence</p>
        <p style="text-align: left; position: relative; top: -50px; left: 10px; z-index: 99; font-size: 14px; color:white;">Members of WCTA's Digital Media program are expected to work hard, strive high, and have fun while doing it. With courses in areas ranging from Digital Media to Photography, joining the Digital media program is the best choice you could make to start the journey of your career in technology. Digital Media students not only get access to multiple computer labs and software, but they also get to go out in the field regularly to gain real life experience. </p>
    </div>
</div>

<!---------- FOOTER //------------------->   
<div id="footer">

<ul id="footerpic">
<ul>
<li><img src="footerbackground.png" style="position: relative; top: 0px; left: -194px; z-index: 150;" height="173px" width="859px"/></li>
</ul>    

<ul id="footerlogo">
<ul>
<li><img src="DM-logowhite.png" style="position: relative; top: 80px; left: 270px; z-index: 151;" height="58.5" width="88.3"/></li>
</ul>

<ul id="footertext1">
<ul>
<li><p style="position: relative; top: 10px; left: 89px; z-index: 151; font-size: 12px; color:white;">©2013 Zac Clark - Digital Media</p></li>
</ul>       
</div> 

<ul id="footertext2">
<ul>
<li><p style="position: relative; top: -30px; left: 720px; z-index: 151; font-size: 12px; color:white;">About • Contact • FAQ • Find Us</p></li>
</ul>       
</div> 



</div> <!-- Wrapper Div //-->
</body>
</html>

CSS文件：

@charset "utf-8";
/* Zac Clark - 2013 */


/* --- Primary Content boxes --*/
body {
background: #F7F7F7;
font-family: 'Open Sans', arial, sans-serif;
color: #000000;
font-size: 12px;
/* margin: 0px; */
}

div#container {
width: 859px;
margin: 0px auto;
background: #FFFFFF;
padding: 0px;
}

div#content {
width: 859px;
padding-top: 473px;
background: black;
float: left;
}

div#header {
margin-left:0px; /* 161px */
margin-right:0px;
width: 859px;
height: 481px;
background: #757575;
position: absolute;
top: 0px;
float: left;
}

#wrapper {
    margin-left:auto;
    margin-right:auto;
    width:859px;
}
/*  --- Quick Links ---  */

div#quicklinks {
width: 859px;
margin: 0px auto;
background: white;
top: 286.3px;
height: 286.3px;
}
div#links1 {
width: 286.3px;
float: left;
margin: 0px auto;
background: #F5F5F5;
height: 286.3px;
padding: 30px;

box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
width: 286.3px;
}
div#links2 {
width: 286.3px;
float: left;
margin: 0px auto;
background: white;
height: 286.3px;
padding: 30px;

box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
width: 286.3px;
}
div#links3 {
width: 286.3px;
float: right;
margin: 0px auto;
background: #F5F5F5;
height: 286.3px;
padding: 30px;

box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
width: 286.3px;
}

/* --- Blurb & Image --- */

div#blurb {
width: 859px;
margin: 0px auto;
background: #333333;
top: 300px;
height: 300px;
}
div#blurbpic {
width: 300px;
float: left;
margin: 0px auto;
background: #333333;
height: 300px;
padding: 30px;

box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
width: 300px;
}
div#blurbtext {
width: 559px;
float: right;
margin: 0px auto;
background: #333333;
height: 300px;
padding: 10px;

box-sizing: border-box;
ms-box-sizing: border-box;
webkit-box-sizing: border-box;
moz-box-sizing: border-box;
width: 559px;
}

/* --- Clearfix (Ignore) --- */
.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}



/* --- General Elements --*/
#logo ul li { display: inline; }
#banner ul li { display: inline; }
#welcome ul li { 
  font-family: 'Open Sans Condensed', sans serif;
  font-size: 40px;
  display: inline;
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 0px;
  padding: 0px 0px 0px 0px;
  background: transparent;
  margin-left: 0px;
  white-space: nowrap;
}
#footerlogo ul li { display: inline; }
#footerpic ul li { display: inline; }
#footertext1 ul li { display: inline; }
#footertext2 ul li { display: inline; }

/* --- NAVBAR --- */
ul {
  font-family: 'Open Sans', Times;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
ul li {
  display: block;
  position: relative;
  float: right;
}
li ul { display: none; }
ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 7px solid #CC4D4D;
  padding: 25px 30px 30px 30px;
  background: #333333;
  margin-left: 0px;
  white-space: nowrap;
}
ul li a:hover { background: #757575; }
li:hover ul {
  display: block;
  position: absolute;
}
li:hover li {
  float: none;
  font-size: 11px;
}
li:hover a { background: #757575; }
li:hover li a:hover { background: #757575; }

<!---------- FOOTER ------------//>

div#footer {
margin-left:0px; /* 161px */
margin-right:0px;
width: 859px;
height: 173px;
background: #757575;
position: absolute;
top: 0px;
}

Answer 1

使用：

style="position: relative;overflow:auto;"

Answer 2

删除页脚上的绝对定位。

div#footer {
    width: 859px;
    height: 173px;
    background: #757575;
    margin: 0 auto;
}

看起来您在<img>上使用了一些内联样式作为背景。我不认为它会把它推到你想要的地方。您需要允许容器将页脚元素居中。

<img src="footerbackground.png" height="173px" width="859px"/>

删除该标记上的内联样式并尝试完全避免它们。

Answer 3

好的，所以我修复了你的代码并修复了一些问题，但还有很长的路要走..

一些东西固定

首先，删除

<!---------- FOOTER ------------//>

div#footer {
margin-left:0px; /* 161px */
margin-right:0px;
width: 859px;
height: 173px;
background: #757575;
position: absolute;
top: 0px;
}

你没有使用它，所以不需要保留它，并且html注释对我的语法高亮显示奇怪的事情。

接下来，在</div>之前找到结束<div id="quicklinks">代码，然后将其删除在结束</div>代码之前放置一个结束</body>代码。
为什么？？因为</div>关闭了您的container div ..您希望所有内容都包含在其中..

然后找

<li><img height="173px" src="footerbackground.png" style="position: relative; top: 0px; left: -194px; z-index: 150;" width="859px"></li>

并删除position: relative;。

此时，您的主页脚图像应位于正确的位置。

还有很长的路要走..

现在的问题是将其余图像和文本放在此图像内。对于初学者，你会想要摆脱position: relative; s ..

以下是我的建议：

不要使用内联样式（例如style="as: df;"）。它使得跟踪事物变得太难以变得非常混乱。
不要不必要地使用<ul>和<li>。仅仅因为你将它们用于你的菜单并不意味着你应该将它们用于一切。如果您考虑它，您的菜单实际上是一个嵌套列表。这些随机图像不是。
不使用<img>元素作为图像，而是将其作为div的背景;这样你就可以轻松地将内容定位在内部。
使用像photoshop这样的东西将DM-logowhite.png和footerbackground.png组合成一个图像。它会为你节省很多痛苦和像素推动。它将使下一步成为最后一步..
将段落放入div中的div，页脚图像作为背景。向左漂浮一个，向右漂浮另一个。瞧，你已经完成了：）

显然我不能为你做这一切，但请试试我的建议，让我知道它是如何为你工作的，或者如果你有任何问题：）

调整页面大小时，Div会移动

3 个答案:

一些东西固定

还有很长的路要走..