Html 使用CSS创建页面偏移量
因此，我试图将这个html从顶部和左侧偏移300像素。到目前为止，我尝试过的所有东西都不起作用，但是如果你知道一个页面可以帮助我，我会非常感兴趣地阅读它…我已经有三个框架，我想保留在这里，我正在尝试创建一个带有“pagediv”的偏移量，但没有骰子 我偷了框架布局（海盗骄傲），因为我的CSS经验有限。同样，我一直在摆弄它，试图让它在窗口左上角的右下角显示300像素 但它不会移动！你会怎么做？请记住，我只能在主机的编辑器中插入html——这是一个相当糟糕的编辑器。我无法在服务器上管理自己的文件。哦对理想情况下，我用来偏移的框架应该是清晰的——因为我放置这个HTML的地方已经有了各种各样的菜单和疯狂的业务，我不想掩盖它们Html 使用CSS创建页面偏移量,html,css,frame,offset,Html,Css,Frame,Offset,因此，我试图将这个html从顶部和左侧偏移300像素。到目前为止，我尝试过的所有东西都不起作用，但是如果你知道一个页面可以帮助我，我会非常感兴趣地阅读它…我已经有三个框架，我想保留在这里，我正在尝试创建一个带有“pagediv”的偏移量，但没有骰子 我偷了框架布局（海盗骄傲），因为我的CSS经验有限。同样，我一直在摆弄它，试图让它在窗口左上角的右下角显示300像素 但它不会移动！你会怎么做？请记住，我只能在主机的编辑器中插入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&source=s_q&hl=en&geocode=&q=2110+Pine+St.+Abilene,+TX+79601&aq=&sll=37.0625,-95.677068&sspn=77.57349,131.132813&ie=UTF8&hq=&hnear=2110+Pine+St,+Abilene,+Texas+79601&t=m&z=14&ll=32.473249,-99.731684&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=2110+Pine+St.+Abilene,+TX+79601&aq=&sll=37.0625,-95.677068&sspn=77.57349,131.132813&ie=UTF8&hq=&hnear=2110+Pine+St,+Abilene,+Texas+79601&t=m&z=14&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>
动态驱动器：CSS左、右框架布局
身体{
顶部填充：200px；左侧填充：200px；
填充：0；
边界：0；
溢出：隐藏；
身高：100%；
最大高度：100%；
}
#佩格迪夫{
填充顶部：300px；
左侧填充：300px；
}
#framecontentLeft，#framecontentRight{
位置：绝对位置；
排名：0；
左：0；
宽度：300px；/*左框div的宽度*/
身高：100%；
溢出：隐藏；/*禁用滚动条。设置为“滚动”可启用*/
背景色：白色；
颜色：黑色；
}
#框架内容权{
左：自动；
右：0；
宽度：250px；/*右框div的宽度*/
溢出：隐藏；/*禁用滚动条。设置为“滚动”可启用*/
背景色：白色；
颜色：黑色；
}
#主要内容{
位置：固定；
排名：0；
left:250px；/*将left值设置为leftframediv的宽度*/
右：300px；/*将右值设置为RightFrameDiv的宽度*/
底部：0；
溢出：自动；
背景：#fff；
}
内管{
边距：15px；/*每个分区内部分区的边距（提供填充）*/
}
*html正文{/*IE6 hack*/
填充：0 150px 0 200px；/*将值设置为（0 WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv）*/
}
*html#maincontent{/*IE6 hack*/
身高：100%；
宽度：100%；
}
/***临时文本填充函数。部署模板时删除***/
var gibberish=[“这是健身房的测试页面”，“我们完全相信力量的艺术”，“Ipso liptum事实上的怪物。”]
函数填充文本（单词）{
对于（var i=0；i一般来说，您应该有一个DIV来包装所有内容。然后您将边距顶部
和边距左侧
应用到该DIV。您正在使用和
见以下章节：
绝对值：框的位置（可能还有大小）使用“顶部”、“右侧”、“底部”和“左侧”属性指定。这些属性指定相对于长方体包含块的偏移。绝对定位的长方体从正常流中取出。这意味着它们对以后同级的布局没有影响。尽管绝对定位的长方体可能有边距，但这些保证金不会与任何其他保证金一起崩溃
已修复：
长方体的位置是根据“绝对”模型计算的，但除此之外，长方体相对于某些参考是固定的模型中，框的边距不会与任何其他边距一起折叠。对于手持、投影、屏幕、tty和电视媒体类型，框相对于视口是固定的，滚动时不会移动
因此，新块对您毫无帮助，因为position:absolute
不关心它。您必须将块设置为position:relative
并给它一个边距，尽管这不会将position:fixed
固定为“框相对于视口是固定的，滚动时不会移动”。下面的CSS代码将修复您的错误，但是，您的HTML代码是邪恶事物的可怕混合物，请对其进行塑造和润色。不要盗版坏代码。学习语言。闪亮。并使用
嗯……我得研究一下div是如何工作的，因为现在我不知道如何在不破坏框架布局的情况下做到这一点。不过，很高兴知道！等等，你说的似乎没有道理。如果你每页只使用一个div，为什么它们会制作一个标签，允许你表示不同的部分？@user1222151：他是帮助一个，而不仅仅是一个。所以只需创建另一个div，它包含站点的其余部分；）。Ohhhh。好的。我下一步会试试。谢谢！嗯……我添加了35; pagediv{padding top:300px；padding left:300px；}到CSS样式，并在HTML中添加了一个带有该ID的额外div，但没有骰子。我将更新原始代码，以便您可以看到我所做的…我可能做了一些明显愚蠢的事情。感谢您继续提供帮助，您尝试了body{padding top:300px；padding left:300px；}
或body{margin top:300px；margin left:300px；}
而不是零值？如果你的意思是只将其添加到CSS的主体部分，那么是的，我刚刚尝试过——第一个会使所有内容向左对齐，去掉框架。第二个似乎不会影响任何内容……对不起。在代码的底部，大约175行之后，出现了一个错误的啊，超现实主义，谢谢你提供的信息。我已经修正了怪癖模式是IE模式-它意味着它以自己的方式呈现事物，而不是标准的方式。我总是试图远离它。CSS是你的样式标记，可以改变页面的外观。这个想法是用HTML构建页面，让它看起来像你想要的CSS。啊！你是一个迪蒂。谢谢你的h我明白问题所在——我也同意我的盗版代码是丑陋代码的症状，而不是原因。我将来会更闪亮。这是你的[像素自行车]（）
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%;
}