使用 CSS 创建页面偏移量

发布于 2025-01-07 09:20:07 字数 6242 浏览 0 评论 0原文

因此，我尝试将此 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 : [email protected] <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>

原文

So, I'm attempting to offset this html by 300 pixels, from the top and the left. None of the things I've tried so far have worked, but if you know of a page that could help me, I'd be very interested to read it...I've already got three frames in that I want to keep here, and I'm trying to create an offset with "pagediv", but no dice.

I've stolen the frame layout (pirate pride), as I have limited CSS experience. Again, I've been fiddling with it to try and make it appear 300 pixels down and to the right of the top left corner of the window.

But it won't budge! How would you do it? Please keep in mind that I can only insert html into my host's editor--it's quite a bad one. I can't manage my own files on the server. Oh! yes. And ideally, the frames that I'm using to offset would be clear--because the place where I'm putting this HTML already has all kinds of menus and crazy business to the left and above that I don't want to cover up.

   <!--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 : [email protected] <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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

静赏你的温柔 2025-01-14 09:20:07

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

请参阅 6.6 部分。选择定位方案：'position'属性：

绝对：框的位置（可能还有大小）由“top”、“right”、“bottom”和“left”属性指定。这些属性指定相对于盒子的包含块的偏移量。绝对定位的盒子被从正常流程中取出。这意味着它们对后来的兄弟姐妹的布局没有影响。尽管绝对定位的框可能有边距，但这些边距不会与任何其他边距折叠。
已修复：
盒子的位置是根据“绝对”模型计算的，但此外，盒子相对于某些参考是固定的。与“绝对”模型一样，框的边距不会与任何其他边距折叠。对于手持、投影、屏幕、tty 和电视媒体类型，该框相对于视口是固定的，并且在滚动时不会移动。

所以一个新的块根本不会帮助你，因为 position:absolute 不关心它。您必须将一个块设置为 position:relative 并给它一个边距，尽管这不会修复您的 position:fixed 因为“该框相对于视口并且滚动时不会移动”。下面的 CSS 代码将修复您的错误，但是，您的 HTML 代码是邪恶事物的可怕混合物，请对其进行整形和润色。不要盗版复制不良代码。学习语言。闪耀。并使用 [X]HTML 验证器。

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%; 
}

You're using position:absolute and position:fixed.

See the section 6.6. Choosing a positioning scheme: ‘position’ property:

absolute: The box's position (and possibly size) is specified with the ‘top’, ‘right’, ‘bottom’, and ‘left’ properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Though absolutely positioned boxes may have margins, those margins do not collapse with any other margins.
fixed:
The box's position is calculated according to the "absolute" model, but in addition, the box is fixed with respect to some reference. As with the "absolute" model, the box's margins do not collapse with any other margins. In the case of handheld, projection, screen, tty, and tv media types, the box is fixed with respect to the viewport and does not move when scrolled.

So a new block won't help you at all, since position:absolute doesn't care about it. You have to set a block to position:relative and give it a margin, although this won't fix your position:fixed as "the box is fixed with respect to the viewport and does not move when scrolled". The following CSS code will fix your errors, however, your HTML code is a horrid mixture of evil things, shape and polish it. Don't pirate copy bad code. Learn the language. Shine. And use a [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%; 
}

回复收藏 0 原文