使用 CSS 创建页面偏移量答案

【问题标题】：Creating a page offset with CSS使用 CSS 创建页面偏移量
【发布时间】：2012-02-21 18:40:15
【问题描述】：

所以，我试图从顶部和左侧将这个 html 偏移 300 像素。到目前为止我尝试过的所有事情都没有奏效，但如果你知道一个可以帮助我的页面，我会非常有兴趣阅读它......我已经有了三个我想保留的框架在这里，我正在尝试使用“pagediv”创建偏移量，但没有骰子。

我盗用了框架布局（海盗的骄傲），因为我的 CSS 经验有限。再一次，我一直在摆弄它，试图让它在窗口左上角的右下方和右侧显示 300 像素。

但它不会让步！你会怎么做？请记住，我只能将 html 插入到主机的编辑器中——这很糟糕。我无法在服务器上管理自己的文件。哦！是的。理想情况下，我用来抵消的框架会很清晰——因为我放置这个 HTML 的地方已经有各种各样的菜单和疯狂的业务在左边和上面我不想掩盖.

   <!--Force IE6 into quirks mode with this comment tag-->
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Left and Right Frames Layout</title>
<style type="text/css">



body{
padding-top:200px;padding-left:200px;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

#pagediv{
padding-top:300px;
padding-left:300px;
}

#framecontentLeft, #framecontentRight{
position: absolute; 
top: 0; 
left: 0; 
width: 300px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: white;
color: black;
}

#framecontentRight{
left: auto;
right: 0; 
width: 250px; /*Width of right frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: white;
color: black;
}

#maincontent{
position: fixed; 
top: 0;
left: 250px; /*Set left value to WidthOfLeftFrameDiv*/
right: 300px; /*Set right value to WidthOfRightFrameDiv*/
bottom: 0;
overflow: auto; 
background: #fff;
}


innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 0 150px 0 200px; /*Set value to (0 WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}


</style>



<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is a test page for a gym", "We wholly believe in the art of strength", "Ipso liptum facto freako."]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>


</head>

<body>

<Font face = "helvetica">

<div id = "pagediv">
<div class = "innertube">

<div id="framecontentLeft">
<div class="innertube">

<table width="100%" height="100%" cellpadding="3" cellspacing="0" border="0">
<tr><td align="left" valign="top">

<h1>Videos</h1>


</td></tr>
<tr><td align="left" valign="top">

<img src="video sample.png" width="200" height="200" />


</td></tr>

<tr><td align="left" valign="top">

<img src="video sample.png" width="200" height="200" />


</td></tr>

<tr><td align="left" valign="top">

<img src="video sample.png" width="200" height="200" />


</td></tr>
</table>

</div>
</div>

<div id="framecontentRight">
<div class="innertube">


<table width="100%" height="100%" cellpadding="3" cellspacing="0" border="0">
<tr><td align="left" valign="top"><h1><b> Location: </b></h1> <br />

<iframe width="200" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=2110+Pine+St.+Abilene,+TX+79601&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=77.57349,131.132813&amp;ie=UTF8&amp;hq=&amp;hnear=2110+Pine+St,+Abilene,+Texas+79601&amp;t=m&amp;z=14&amp;ll=32.473249,-99.731684&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=2110+Pine+St.+Abilene,+TX+79601&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=77.57349,131.132813&amp;ie=UTF8&amp;hq=&amp;hnear=2110+Pine+St,+Abilene,+Texas+79601&amp;t=m&amp;z=14&amp;ll=32.473249,-99.731684" style="color:#0000FF;text-align:left">View Larger Map</a></small> <br />
Art of Strength Abilene @ Hendrick Heatlh Club <br />
2110 Pine St. Abilene, TX 79601 <br />
(325) 670-7682
 </td></tr>
<tr><td align="left" valign="top">


<h1> Contact </h1>
Phone : 1 390 232 2323 <br />
Email : abeline@aos.com <br />
Website : Link

</td></tr>
<tr><td align="left" valign="top">

<img src="advertisement1.jpg" width="150" height="250" />


</td></tr>
<tr><td align="left" valign="top">

<img src="advertisement1.jpg" width="200" height="200" />


</td></tr>
<tr><td align="left" valign="top">

<img src="advertisement1.jpg" width="175" height="100" />


</td></tr>





</table>

<

</div>
</div>


<div id="maincontent">
<div class="innertube">
<table width="100%" height="100%" cellpadding="3" cellspacing="0" border="0">
<tr><td align="left" valign="top">

<h1>About AOS Abeline, Texas </h1>
<p><script type="text/javascript">filltext(25)</script></p>


</td></tr>
<tr><td align="left" valign="top">

<h1>Our Training</h1>
<p><script type="text/javascript">filltext(300)</script></p>
<img src="../../Documents/punch/new aos site/Screen shot 2011-12-07 at 10.12.27 AM.png" width="307" height="243" />


</td></tr><tr><td align="left" valign="top">

<h1>Staff</h1>
<p><script type="text/javascript">filltext(10)</script></p>


</td></tr>
</table>

</div>
</div>

</div>
</div>

</FONT>
</body>
</html>

【问题讨论】：

你试过body{padding-top:300px;padding-left:300px;}或body{margin-top:300px;margin-left:300px;}而不是零值吗？
如果你的意思只是将它添加到 CSS 的正文部分，那么是的，我刚刚尝试过——第一个导致所有内容都向左对齐，摆脱了框架.第二个似乎没有影响任何东西......对不起。
在代码的底部，大约 175 行之后，有一个流浪的 <。此外，您有一个字体标签。不要使用字体标签，使用 CSS 应用字体。这不是你的定位问题——只是已经过时了。最后...你想要怪癖模式吗？这是我尽量避免的。
啊，超现实主义，感谢您提供的信息。我已经修复了 <. quirks css>
Quirks 模式是一种 IE 模式 - 这意味着它以自己的方式呈现事物，而不是标准方式。我总是试图远离它。 CSS 是用于改变页面外观的样式标记。我们的想法是使用 HTML 构建页面，并使用 CSS 使其看起来像您想要的那样。

标签： html css frame offset

【解决方案1】：

您正在使用position:absolute 和position:fixed。

见6.6. Choosing a positioning scheme: ‘position’ property部分：

absolute：框的位置（可能还有大小）由“top”、“right”、“bottom”和“left”属性指定。这些属性指定相对于盒子的包含块的偏移量。绝对定位的盒子从正常流程中取出。这意味着它们对后面的兄弟姐妹的布局没有影响。尽管绝对定位的框可能有边距，但这些边距不会与任何其他边距一起折叠。

固定：盒子的位置是根据“绝对”模型计算的，但除此之外，盒子相对于一些参考是固定的。与“绝对”模型一样，框的边距不会与任何其他边距一起折叠。对于手持、投影、屏幕、tty 和 tv 媒体类型，框相对于视口是固定的，并且在滚动时不会移动。

所以一个新块根本不会帮助你，因为position:absolute 不关心它。您必须将一个块设置为position:relative 并给它一个边距，尽管这不会修复您的position:fixed，因为“框相对于视口是固定的，并且在滚动时不会移动”。下面的 CSS 代码将修复你的错误，然而，你的 HTML 代码是邪恶的东西的可怕混合物，塑造和打磨它。不要盗版复制不良代码。学习语言。闪耀。并使用[X]HTML validator。

body{
    margin-top:200px;
    margin-left:200px;
    position:absolute;

    top:0; left:0; bottom:0;right:0;

    font-family:Helvetica;
    overflow: hidden;
}

#framecontentLeft, #framecontentRight, #maincontent{
    position:absolute;
    top:0;
    height:100%;
}
#framecontentLeft,#framecontentRight{
    overflow:hidden;
}
#framecontentLeft{
    left: 0; 
    width: 300px; /*Width of left frame div*/
}

#framecontentRight{
    right: 0; 
    width: 250px; /*Width of right frame div*/  
}

#maincontent{
    left: 250px; /*Set left value to WidthOfLeftFrameDiv*/
    right: 300px; /*Set right value to WidthOfRightFrameDiv*/
    bottom: 0;
}

.innertube{
    margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
    padding: 0 150px 0 200px; /*Set value to (0 WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
    height: 100%; 
    width: 100%; 
}

【讨论】：

啊！你是个节食者。谢谢您的帮助。我理解问题所在——并且我同意我的盗版代码是丑陋代码的症状，而不是原因。未来的我会更加闪亮。这是你的 [像素自行车] (imgur.com/bVpPG)

【解决方案2】：

一般来说，您应该有一个包含所有内容的 DIV。然后将margin-top 和margin-left 应用于该DIV。

【讨论】：

嗯...我将不得不研究 DIV 的工作原理，因为现在我不确定如何在不破坏框架布局的情况下做到这一点。不过很高兴知道！
等等，你说的似乎没有道理。如果每页只使用其中一个，他们为什么要制作一个允许您表示不同部分的标签？
@user1222151：他说的是一个，而不是只有一个。因此，只需创建 另一个 div，其中包含您网站的其余部分；）。
OHHHHH。好的。我下次试试。谢谢！
嗯...我添加了#pagediv{ padding-top:300px;填充左：300px； } 添加到 CSS 样式中，并将具有该 ID 的额外 div 添加到 HTML 中，但没有骰子。我将更新原始代码，以便您可以看到我做了什么……我可能做了一些明显愚蠢的事情。感谢您继续提供帮助