Solved

CSS div problem

Posted on 2009-05-20
16
299 Views
Last Modified: 2012-05-07
Hey,

i have a page made of tables, however I need to place a circle over the top of the corner of a table, I have my CSS in place, and its kinda working...

Basically my table is set to align=center however the image moves dependng on the screen res of the person viewing it...

my code is below, but I dont know how to make it always in the corner of the page centred via the table, rather than always at the same location....
#introduce {
	position: absolute;
	top: 586px;
	left: 1159px;
	height: 165px;
	width:166px;
	z-index:2;
	color: #FFFFFF;
}

Open in new window

0
Comment
Question by:Wicked-Websites
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 3
  • +2
16 Comments
 
LVL 16

Expert Comment

by:s8web
ID: 24430278
Would it be possible for you to post a link to the page so we can take a look at what else is going on?
0
 

Author Comment

by:Wicked-Websites
ID: 24430286
0
 
LVL 6

Expert Comment

by:mudbuggle
ID: 24430333
We can come up with a solution but I will the css for the table as well.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 6

Expert Comment

by:mudbuggle
ID: 24430373
Set your position for left: 1159px to something like right: 18%. You'll have to adjust it for the appropriate positioning
0
 

Author Comment

by:Wicked-Websites
ID: 24430437
problem is when it is viewed on different sized screens,

I've done the change, however it moves depending on the screen size, i need it to be exactly the same on each resolution
0
 
LVL 6

Expert Comment

by:mudbuggle
ID: 24430523
try position: relative and play around with % and px... to see if that gets it to stay the same. Also post css if that doesn't work.
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 250 total points
ID: 24431031
See if this may help:
I did wrap everything in a #wrapper, however the main problem that is coming into play is that you are wanting to place an absolutely positioned DIV over a piece of the table.  I did wrap everything so that the #introduce element would have something to base itself off of other than the pure screen resolution.  You will still be affected by different resolutions regardless of where you place it.   But this may get you pointed in the right direction for now.  You may wish to convert your tables into DIVs later on for better placement and layout functionality.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Anglia Skips, Skip hire</title>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style> 
#introduce {
	height: 165px;
	width:166px;
	z-index:2;
	color: #FFFFFF;
	position: absolute;
	left: 75%;
	top: 56%;
}
#wrapper {
	width: 100%;
	margin-top: auto;
	margin-right: 0px;
	margin-bottom: auto;
	margin-left: 0px;
	position: relative;
	clear: both;
	height: 932px;
}
#flash {
	position:absolute;
	top: 16px;
	left: 779px;
	height: 158px;
	width: 231px;
	z-index:3;
	color: #FFFFFF;
	background-color: #FFE880;
}
.header, .header a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #8DB873;
	text-decoration: none;
}
.main {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
}
.main a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: underline;
}
.sadmain {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #8DB873;
	text-decoration: none;
}
</style>
</head>
 
<body>
<div id="wrapper">
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="156" align="center" bgcolor="#8DB873"><script type="text/javascript"> 
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','215','height','156','src','flv/skippy','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flv/skippy' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="215" height="156">
<param name="movie" value="http://skips.wicked-websites.co.uk/flv/skippy.swf" />
      <param name="quality" value="high" />
      <embed src="http://skips.wicked-websites.co.uk/flv/skippy.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="215" height="156"></embed>
    </object></noscript><img src="http://skips.wicked-websites.co.uk/images/header.jpg" width="544" height="156" />
      <script type="text/javascript"> 
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','215','height','156','src','flv/skippy','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flv/skippy' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="215" height="156">
<param name="movie" value="http://skips.wicked-websites.co.uk/flv/skippy.swf" />
      <param name="quality" value="high" />
      <embed src="http://skips.wicked-websites.co.uk/flv/skippy.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="215" height="156"></embed>
    </object></noscript></td>
  </tr>
  <tr>
    <td><table width="1000" border="0" align="center" cellpadding="0" cellspacing="10">
      <tr>
        <td width="142"><a href="index.php"><img src="http://skips.wicked-websites.co.uk/images/buttons/home.gif" title="Anglia Skips - Home Page" width="142" height="33" border="0" /></a></td>
        <td width="142"><a href="contact.php"><img src="http://skips.wicked-websites.co.uk/images/buttons/contact_us.gif" title="Anglia Skips - Contact Us" width="142" height="33" border="0" /></a></td>
        <td width="142"><a href="our_skips.php"><img src="http://skips.wicked-websites.co.uk/images/buttons/our_skips.gif" title="Anglia Skips - About Our Skips" width="142" height="33" border="0" /></a></td>
        <td width="142"><a href="use_skips.php"><img src="http://skips.wicked-websites.co.uk/images/buttons/using_skips.gif" title="Anglia Skips - How to use our skips" width="142" height="33" border="0" /></a></td>
        <td width="372"><a href="contact.php"><img src="http://skips.wicked-websites.co.uk/images/buttons/tel.gif" title="Anglia Skips - Contact Us" width="372" height="33" border="0" /></a></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><table width="1000" border="0" cellspacing="0" cellpadding="10">
      <tr>
        <td background="http://skips.wicked-websites.co.uk/images/green_back.jpg"><table width="980" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
          <tr>
            <td height="304" colspan="3" valign="bottom"><img src="http://skips.wicked-websites.co.uk/images/skip_pic.jpg" width="576" height="289" hspace="15" /></td>
            <td align="center" valign="bottom"><table width="344" border="0" cellpadding="0" cellspacing="10" background="http://skips.wicked-websites.co.uk/images/yell_back.gif" height="289">
              <tr>
                <td><table width="324" border="0" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF" height="269">
                    <tr>
                      <td align="left" valign="middle"><p class="header">Welcome to Anglia Skips Ltd</p>
                          <p class="main">Sizes of skips range from a small 2 yarder up to the
                            large 8 yarder and these are available for hire at very
                            competitive rates.</p>
                        <p class="main"> Make Robbie smile by putting him on your driveway or
                          outside your house and fill him up to the top.</p>
                        <p class="sadmain">Dont make him sad by leaving him in our yard!</p>
                        <p class="header"><a href="terms.pdf" target="_blank" title="Anglia Skips - Terms and Conditions">SKIP HIRE IS SUBJECT TO OUR<br />
                          TERMS AND CONDITIONS<img src="http://skips.wicked-websites.co.uk/images/arrows.gif" title="Anglia Skips - Skip Hire, Suffolk" width="25" height="15" border="0" /></a></p></td>
                    </tr>
                </table></td>
              </tr>
            </table></td>
          </tr>
          <tr>
      <td width="202" align="center"><a href="our_skips.php"><img src="http://skips.wicked-websites.co.uk/images/mini_ad.jpg" title="Mini Skip Hire from Anglia Skips, Eye" width="172" height="146" hspace="15" vspace="15" border="0" /></a></td>
      <td width="202" align="center"><a href="our_skips.php"><img src="http://skips.wicked-websites.co.uk/images/midi_ad.jpg" title="Mini Skip Hire from Anglia Skips, Eye" width="172" height="146" border="0" /></a></td>
      <td width="202" align="center"><a href="our_skips.php"><img src="http://skips.wicked-websites.co.uk/images/max_ad.jpg" title="Mini Skip Hire from Anglia Skips, Eye" width="172" height="146" border="0" /></a></td>
      <td width="374" align="right"><a href="contact.php"><img src="http://skips.wicked-websites.co.uk/images/call_ad.jpg" title="Mini Skip Hire from Anglia Skips, Eye" width="344" height="146" hspace="15" border="0" /></a></td>
          </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
</table>
<table width="1000" border="0" align="center" cellpadding="5" cellspacing="0" class="main">
  <tr>
    <td width="500">Anglia Skips Ltd, Building 4, 
      Airfield Industrial Estate, 
      Eye, Suffolk   IP23 7HN</td>
    <td align="right"><a href="http://www.wicked-websites.co.uk" target="_blank">Website designed and hosted by Wicked Websites</a></td>
    <td width="100">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2" align="center">
    <a href="index.php" title="Anglia Skips - Home Page" >Home</a> | 
    <a href="our_skips.php" title="Anglia Skips - About our skips" >Our Skips</a> | 
    <a href="use_skips.php" title="Anglia Skips - How to use our skips">How to use a skip</a> | 
    <a href="contact.php" title="Anglia Skips - Contact Us" >Contact Us</a> | 
  <a href="terms.pdf" target="_blank" title="Anglia Skips - Terms and Conditions" >Terms and Conditions</a></td></tr></table>
<div id="introduce">
<img src="http://skips.wicked-websites.co.uk/images/introducing.gif" width="165" height="166" alt="Anglia Skips" /></div>
</div>
</body>
</html>

Open in new window

0
 
LVL 30

Expert Comment

by:IanTh
ID: 24431506
the browser sets the position of images etc so all you can do is use a div as a wrapper and in css set the margins to auto for left , right, top and bottom so that your page will appear at the centre like this
http://www.up2youmobiles.co.uk/
it uses css for a overall background div with div's set for all the other images and page layout
I would say using div's is better than using tables these days
0
 

Author Comment

by:Wicked-Websites
ID: 24434964
Hi,

My code is now attached, but it still moves about with the screen resolutions... its not right on a large screen, however on a smaller screen its ok?

Any other thoughts?

#introduce {
	height: 165px;
	width:166px;
	z-index:2;
	color: #FFFFFF;
	position: absolute;
	left: 75%;
	top: 56%;
}
#wrapper {
	width: 100%;
	margin-top: auto;
	margin-right: 0px;
	margin-bottom: auto;
	margin-left: 0px;
	position: relative;
	clear: both;
	height: 932px;
}
#flash {
	position:absolute;
	top: 16px;
	left: 779px;
	height: 158px;
	width: 231px;
	z-index:3;
	color: #FFFFFF;
	background-color: #FFE880;
}
.header, .header a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #8DB873;
	text-decoration: none;
}
.main {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
}
.main a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: underline;
}
.sadmain {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #8DB873;
	text-decoration: none;
}
 
 
 
----
 
 
 
<body><div id="wrapper">
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="156" align="center" bgcolor="#8DB873"><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','215','height','156','src','flv/skippy','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flv/skippy' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="215" height="156">
<param name="movie" value="flv/skippy.swf" />
      <param name="quality" value="high" />
      <embed src="flv/skippy.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="215" height="156"></embed>
    </object></noscript><img src="images/header.jpg" width="544" height="156" />
      <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','215','height','156','src','flv/skippy','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flv/skippy' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="215" height="156">
<param name="movie" value="flv/skippy.swf" />
      <param name="quality" value="high" />
      <embed src="flv/skippy.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="215" height="156"></embed>
    </object></noscript></td>
  </tr>
  <tr>
    <td><table width="1000" border="0" align="center" cellpadding="0" cellspacing="10">
      <tr>
        <td width="142"><a href="index.php"><img src="images/buttons/home.gif" title="Anglia Skips - Home Page" width="142" height="33" border="0" /></a></td>
        <td width="142"><a href="contact.php"><img src="images/buttons/contact_us.gif" title="Anglia Skips - Contact Us" width="142" height="33" border="0" /></a></td>
        <td width="142"><a href="our_skips.php"><img src="images/buttons/our_skips.gif" title="Anglia Skips - About Our Skips" width="142" height="33" border="0" /></a></td>
        <td width="142"><a href="use_skips.php"><img src="images/buttons/using_skips.gif" title="Anglia Skips - How to use our skips" width="142" height="33" border="0" /></a></td>
        <td width="372"><a href="contact.php"><img src="images/buttons/tel.gif" title="Anglia Skips - Contact Us" width="372" height="33" border="0" /></a></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><table width="1000" border="0" cellspacing="0" cellpadding="10">
      <tr>
        <td background="images/green_back.jpg"><table width="980" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
          <tr>
            <td height="304" colspan="3" valign="bottom"><img src="images/skip_pic.jpg" width="576" height="289" hspace="15" /></td>
            <td align="center" valign="bottom"><table width="344" border="0" cellpadding="0" cellspacing="10" background="images/yell_back.gif" height="289">
              <tr>
                <td><table width="324" border="0" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF" height="269">
                    <tr>
                      <td align="left" valign="middle"><p class="header">Welcome to Anglia Skips Ltd</p>
                          <p class="main">Sizes of skips range from a small 2 yarder up to the
                            large 8 yarder and these are available for hire at very
                            competitive rates.</p>
                        <p class="main"> Make Robbie smile by putting him on your driveway or
                          outside your house and fill him up to the top.</p>
                        <p class="sadmain">Dont make him sad by leaving him in our yard!</p>
                        <p class="header"><a href="terms.pdf" target="_blank" title="Anglia Skips - Terms and Conditions">SKIP HIRE IS SUBJECT TO OUR<br />
                          TERMS AND CONDITIONS<img src="images/arrows.gif" title="Anglia Skips - Skip Hire, Suffolk" width="25" height="15" border="0" /></a></p></td>
                    </tr>
                </table></td>
              </tr>
            </table></td>
          </tr>
          <tr>
      <td width="202" align="center"><a href="our_skips.php"><img src="images/mini_ad.jpg" title="Mini Skip Hire from Anglia Skips, Eye" width="172" height="146" hspace="15" vspace="15" border="0" /></a></td>
      <td width="202" align="center"><a href="our_skips.php"><img src="images/midi_ad.jpg" title="Mini Skip Hire from Anglia Skips, Eye" width="172" height="146" border="0" /></a></td>
      <td width="202" align="center"><a href="our_skips.php"><img src="images/max_ad.jpg" title="Mini Skip Hire from Anglia Skips, Eye" width="172" height="146" border="0" /></a></td>
      <td width="374" align="right"><a href="contact.php"><img src="images/call_ad.jpg" title="Mini Skip Hire from Anglia Skips, Eye" width="344" height="146" hspace="15" border="0" /></a></td>
          </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
</table>
<table width="1000" border="0" align="center" cellpadding="5" cellspacing="0" class="main">
  <tr>
    <td width="500">Anglia Skips Ltd, Building 4, 
      Airfield Industrial Estate, 
      Eye, Suffolk   IP23 7HN</td>
    <td align="right"><a href="http://www.wicked-websites.co.uk" target="_blank">Website designed and hosted by Wicked Websites</a></td>
    <td width="100">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2" align="center">
    <a href="index.php" title="Anglia Skips - Home Page" >Home</a> | 
    <a href="our_skips.php" title="Anglia Skips - About our skips" >Our Skips</a> | 
    <a href="use_skips.php" title="Anglia Skips - How to use our skips">How to use a skip</a> | 
    <a href="contact.php" title="Anglia Skips - Contact Us" >Contact Us</a> | 
    <a href="terms.pdf" target="_blank" title="Anglia Skips - Terms and Conditions" >Terms and Conditions</a>
    </td>
    <td>&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
<div id="introduce"><img src="images/introducing.gif" width="165" height="166" alt="Anglia Skips" /></div>
</div>
</body>
</html>

Open in new window

0
 
LVL 30

Expert Comment

by:IanTh
ID: 24440007
it will in my opinion as browsers set the screen positions so the only real absolutes are left side , right side, bottom and top.
0
 
LVL 30

Expert Comment

by:IanTh
ID: 24440024
like I said don't use tables use div's instead but it still will not get your desired effect nothing will
0
 
LVL 6

Expert Comment

by:mudbuggle
ID: 24443403
I disagree. Worst case scenario we have to use javascript and some sort of mathematics to achieve the desired result. Unfortunately, I won't be able to play around with the code until this weekend.
0
 
LVL 30

Expert Comment

by:IanTh
ID: 24453331
i am wondering how this would work I am looking forward to your post
0
 
LVL 30

Expert Comment

by:LZ1
ID: 24453393
Or as a last resort you could always make an image of what you want.  
The image you have in there now, you could set it as a background image for that cell.  Then you could place the other image inside of it and either left, center or right align it.  
If that still doesn't work, you may want to make an entire image the exact way you want it to look and then simply place the image in the cell much like you have right now.
0
 
LVL 6

Assisted Solution

by:mudbuggle
mudbuggle earned 250 total points
ID: 24457918
The following javascript works perfectly in ie6. I also added float : right; to the #introduce css. Unfortunately I don't have the capability of testing the javascript in other browsers at the current time. Gotta love IT red tape... However, I will test later and repost the corrections if need be. Test this out to see if it works for you.
If you need to adjust the positioning horizontally alter the following:
var rmw = screenw-1000; // increase the value of 1000 to move the element right and decrease the value to move it left.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Anglia Skips, Skip hire</title>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style> 
#introduce {
	height: 165px;
	width:166px;
	z-index:2;
	color: #FFFFFF;
	position: absolute;
	top: 586px;
	float: right;
 
}
#wrapper {
	width: 100%;
	margin-top: auto;
	margin-right: 0px;
	margin-bottom: auto;
	margin-left: 0px;
	position: relative;
	clear: both;
	height: 932px;
}
#flash {
	position:absolute;
	top: 16px;
	left: 779px;
	height: 158px;
	width: 231px;
	z-index:3;
	color: #FFFFFF;
	background-color: #FFE880;
}
.header, .header a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #8DB873;
	text-decoration: none;
}
.main {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
}
.main a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: underline;
}
.sadmain {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #8DB873;
	text-decoration: none;
}
</style>
 
<script language="javascript">
function pos()
{
	var el = document.getElementById('introduce');
	var screenw = '';
	if(typeof(window.innerWidth)=='number') 
	{
		//Non-IE
		screenw = window.innerWidth;
	} 
	else if(document.body&&(document.body.clientWidth)) 
	{
		//IE	
		screenw = document.body.clientWidth;
	}
	var rmw = screenw-1000; // increase the value of 1000 to move the element right and decrease the value to move it left.
	var rpos = rmw/2;
	el.style.pixelRight = rpos;
	return;
}
</script>
 
</head>
 
<body onload="pos()" onresize="pos()"><div id="wrapper">
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="156" align="center" bgcolor="#8DB873"><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','215','height','156','src','flv/skippy','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flv/skippy' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="215" height="156">
<param name="movie" value="flv/skippy.swf" />
      <param name="quality" value="high" />
      <embed src="flv/skippy.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="215" height="156"></embed>
    </object></noscript><img src="images/header.jpg" width="544" height="156" />
      <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','215','height','156','src','flv/skippy','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flv/skippy' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="215" height="156">
<param name="movie" value="flv/skippy.swf" />
      <param name="quality" value="high" />
      <embed src="flv/skippy.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="215" height="156"></embed>
    </object></noscript></td>
  </tr>
  <tr>
    <td><table width="1000" border="0" align="center" cellpadding="0" cellspacing="10">
      <tr>
        <td width="142"><a href="index.php"><img src="images/buttons/home.gif" title="Anglia Skips - Home Page" width="142" height="33" border="0" /></a></td>
        <td width="142"><a href="contact.php"><img src="images/buttons/contact_us.gif" title="Anglia Skips - Contact Us" width="142" height="33" border="0" /></a></td>
        <td width="142"><a href="our_skips.php"><img src="images/buttons/our_skips.gif" title="Anglia Skips - About Our Skips" width="142" height="33" border="0" /></a></td>
        <td width="142"><a href="use_skips.php"><img src="images/buttons/using_skips.gif" title="Anglia Skips - How to use our skips" width="142" height="33" border="0" /></a></td>
        <td width="372"><a href="contact.php"><img src="images/buttons/tel.gif" title="Anglia Skips - Contact Us" width="372" height="33" border="0" /></a></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><table width="1000" border="0" cellspacing="0" cellpadding="10">
      <tr>
        <td background="images/green_back.jpg"><table width="980" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
          <tr>
            <td height="304" colspan="3" valign="bottom"><img src="images/skip_pic.jpg" width="576" height="289" hspace="15" /></td>
            <td align="center" valign="bottom"><table width="344" border="0" cellpadding="0" cellspacing="10" background="images/yell_back.gif" height="289">
              <tr>
                <td><table width="324" border="0" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF" height="269">
                    <tr>
                      <td align="left" valign="middle"><p class="header">Welcome to Anglia Skips Ltd</p>
                          <p class="main">Sizes of skips range from a small 2 yarder up to the
                            large 8 yarder and these are available for hire at very
                            competitive rates.</p>
                        <p class="main"> Make Robbie smile by putting him on your driveway or
                          outside your house and fill him up to the top.</p>
                        <p class="sadmain">Dont make him sad by leaving him in our yard!</p>
                        <p class="header"><a href="terms.pdf" target="_blank" title="Anglia Skips - Terms and Conditions">SKIP HIRE IS SUBJECT TO OUR<br />
                          TERMS AND CONDITIONS<img src="images/arrows.gif" title="Anglia Skips - Skip Hire, Suffolk" width="25" height="15" border="0" /></a></p></td>
                    </tr>
                </table></td>
              </tr>
            </table></td>
          </tr>
          <tr>
      <td width="202" align="center"><a href="our_skips.php"><img src="images/mini_ad.jpg" title="Mini Skip Hire from Anglia Skips, Eye" width="172" height="146" hspace="15" vspace="15" border="0" /></a></td>
      <td width="202" align="center"><a href="our_skips.php"><img src="images/midi_ad.jpg" title="Mini Skip Hire from Anglia Skips, Eye" width="172" height="146" border="0" /></a></td>
      <td width="202" align="center"><a href="our_skips.php"><img src="images/max_ad.jpg" title="Mini Skip Hire from Anglia Skips, Eye" width="172" height="146" border="0" /></a></td>
      <td width="374" align="right"><a href="contact.php"><img src="images/call_ad.jpg" title="Mini Skip Hire from Anglia Skips, Eye" width="344" height="146" hspace="15" border="0" /></a></td>
          </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
</table>
<table width="1000" border="0" align="center" cellpadding="5" cellspacing="0" class="main">
  <tr>
    <td width="500">Anglia Skips Ltd, Building 4, 
      Airfield Industrial Estate, 
      Eye, Suffolk   IP23 7HN</td>
    <td align="right"><a href="http://www.wicked-websites.co.uk" target="_blank">Website designed and hosted by Wicked Websites</a></td>
    <td width="100">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2" align="center">
    <a href="index.php" title="Anglia Skips - Home Page" >Home</a> | 
    <a href="our_skips.php" title="Anglia Skips - About our skips" >Our Skips</a> | 
    <a href="use_skips.php" title="Anglia Skips - How to use our skips">How to use a skip</a> | 
    <a href="contact.php" title="Anglia Skips - Contact Us" >Contact Us</a> | 
    <a href="terms.pdf" target="_blank" title="Anglia Skips - Terms and Conditions" >Terms and Conditions</a>
    </td>
    <td>&nbsp;</td>
  </tr>
</table>
<p>&nbsp;</p>
<div id="introduce"><img src="images/introducing.gif" width="165" height="166" alt="Anglia Skips" /></div></div>
</body>
</html>

Open in new window

0

Featured Post

[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

624 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question