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 : 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>
You’re using
position:absoluteandposition:fixed.See the section 6.6. Choosing a positioning scheme: ‘position’ property:
So a new block won’t help you at all, since
position:absolutedoesn’t care about it. You have to set a block toposition:relativeand give it a margin, although this won’t fix yourposition:fixedas “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.