Synexus
08 Feb 2010, 05:46 PM
Currently, I am developing a page at <a href="http://www.rockwallrobotics.com">Rockwall Robotics</a> for a club. I've searched extensively throughout the image mapping posts, but it appears that the issue is not the same with other users.
I've designed the website where I wanted the background itself to serve as the nav bar by use of image mapping; clicking each button on the image map would then target a DIV nested inside of a certain part of the image to load pages into. However, if you go to the page itself and edit the background values, you can see that there are large margins beyond the image itself to the left and the right; I assume it's because the page has centered the image inside of itself.
I am curious as to whether it's possible to compress the page to where only the image itself is on the page, without the extra space on the sides.
Thank you.
The code is as follows (excuse the random comment insertions, boredom is a terrible burden):
<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Rockwall Robotics</title>
<link rel=stylesheet href="main.css" TYPE="text/css">
</head>
<body bgcolor="#4D493D">
<div id="rrbmain">
<iframe name="rrb" id="rrb" src="http://www.my.calendars.net/1296" width="825px" height="1125" scrolling="yes" marginwidth="0" marginheight="0" frameborder="0"></iframe>
</div>
<div style="text-align:center; width:825px; margin-left:auto; margin-right:auto;">
<img id="RockwallR2" src="wb1.jpg" usemap="#RockwallR" border="0" width="1000" height="1615" alt="" >
<map id="RockwallR" name="RockwallR">
<area shape="rect" coords="142,214,295,264" href="http://www.my.calendars.net/1296" alt="Home" title="Home" target="rrb" >
<area shape="rect" coords="334,214,487,264" href="http://www.rockwallrobotics.com/FIRST.html" alt="First" title="First" target="rrb" >
<area shape="rect" coords="525,215,678,265" href="http://www.rockwallrobotics.com/robots.html" alt="Robots" title="Robots" target="rrb" >
<area shape="rect" coords="713,216,866,266" href="http://www.rockwallrobotics.com/forum" alt="Forum" title="Forum" target="rrb" >
<area shape="rect" coords="144,271,297,321" href="http://www.rockwallrobotics.com/reserved.html" alt="Bios" title="Bios" target="rrb" >
<area shape="rect" coords="334,274,487,324" href="http://www.rockwallrobotics.com/reserved.html" alt="Photos" title="Photos" target="rrb" >
<area shape="rect" coords="524,277,677,327" href="http://www.rockwallrobotics.com/contact.php" alt="Contact" title="Contact" target="rrb" >
<area shape="rect" coords="712,274,865,324" href="http://www.rockwallrobotics.com/links.html" alt="Links" title="Links" target="rrb" >
<!-- BOTTOM BANNERS IMO -->
<area shape="rect" coords="71,1468,210,1518" href="http://www.usfirst.org/roboticsprograms/frc/content.aspx?id=440" alt="" title="" >
<area shape="rect" coords="217,1467,356,1517" href="http://www.usfirst.org/roboticsprograms/frc/content.aspx?id=440" alt="" title="" >
<area shape="rect" coords="363,1469,502,1519" href="http://www.usfirst.org/roboticsprograms/frc/content.aspx?id=440" alt="" title="" >
<area shape="rect" coords="508,1470,647,1520" href="http://www.rockwallisd.com/" alt="" title="" >
<area shape="rect" coords="652,1470,791,1520" href="http://www.usfirst.org/" alt="" title="" >
<area shape="rect" coords="798,1471,937,1521" href="http://www.spmfg.com/" alt="" title="" >
<!-- BOTTOM LINKS END RIGHT HERE -->
</map>
<!-- Regular TEXT links @ bottom; If you do not wish to have text links under your image map, you can move or delete this DIV -->
<div style="text-align:center; font-size:12px; font-family:verdana; margin-left:auto; margin-right:auto; width:1200px;">
<a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.my.calendars.net/1296" title="Home">Home</a>
| <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.rockwallrobotics.com/FIRST.html" title="First">First</a>
| <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.rockwallrobotics.com/robots.html" title="Robots">Robots</a>
| <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.rockwallrobotics.com/forum" title="Forum">Forum</a>
| <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.rockwallrobotics.com/reserved.html" title="Bios">Bios</a>
| <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.rockwallrobotics.com/reserved.html" title="Photos">Photos</a>
| <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.rockwallrobotics.com/contact.html" title="Contact">Contact</a>
| <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.rockwallrobotics.com/links.html" title="Links">Links</a>
<!-- BEGIN RANDOM #UE*(ERU*(U*( -->
</div>
<!-- Image map text links - End - -->
</div>
</body>
</html>
</code>
CSS:
<code>
/* CSS Document */
#rrbmain {
text-align:center;
position:absolute;
top:340px;
left:50%;
height:1000px;
width:825px;
margin-left:-325px;
}
</code>
I've designed the website where I wanted the background itself to serve as the nav bar by use of image mapping; clicking each button on the image map would then target a DIV nested inside of a certain part of the image to load pages into. However, if you go to the page itself and edit the background values, you can see that there are large margins beyond the image itself to the left and the right; I assume it's because the page has centered the image inside of itself.
I am curious as to whether it's possible to compress the page to where only the image itself is on the page, without the extra space on the sides.
Thank you.
The code is as follows (excuse the random comment insertions, boredom is a terrible burden):
<code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Rockwall Robotics</title>
<link rel=stylesheet href="main.css" TYPE="text/css">
</head>
<body bgcolor="#4D493D">
<div id="rrbmain">
<iframe name="rrb" id="rrb" src="http://www.my.calendars.net/1296" width="825px" height="1125" scrolling="yes" marginwidth="0" marginheight="0" frameborder="0"></iframe>
</div>
<div style="text-align:center; width:825px; margin-left:auto; margin-right:auto;">
<img id="RockwallR2" src="wb1.jpg" usemap="#RockwallR" border="0" width="1000" height="1615" alt="" >
<map id="RockwallR" name="RockwallR">
<area shape="rect" coords="142,214,295,264" href="http://www.my.calendars.net/1296" alt="Home" title="Home" target="rrb" >
<area shape="rect" coords="334,214,487,264" href="http://www.rockwallrobotics.com/FIRST.html" alt="First" title="First" target="rrb" >
<area shape="rect" coords="525,215,678,265" href="http://www.rockwallrobotics.com/robots.html" alt="Robots" title="Robots" target="rrb" >
<area shape="rect" coords="713,216,866,266" href="http://www.rockwallrobotics.com/forum" alt="Forum" title="Forum" target="rrb" >
<area shape="rect" coords="144,271,297,321" href="http://www.rockwallrobotics.com/reserved.html" alt="Bios" title="Bios" target="rrb" >
<area shape="rect" coords="334,274,487,324" href="http://www.rockwallrobotics.com/reserved.html" alt="Photos" title="Photos" target="rrb" >
<area shape="rect" coords="524,277,677,327" href="http://www.rockwallrobotics.com/contact.php" alt="Contact" title="Contact" target="rrb" >
<area shape="rect" coords="712,274,865,324" href="http://www.rockwallrobotics.com/links.html" alt="Links" title="Links" target="rrb" >
<!-- BOTTOM BANNERS IMO -->
<area shape="rect" coords="71,1468,210,1518" href="http://www.usfirst.org/roboticsprograms/frc/content.aspx?id=440" alt="" title="" >
<area shape="rect" coords="217,1467,356,1517" href="http://www.usfirst.org/roboticsprograms/frc/content.aspx?id=440" alt="" title="" >
<area shape="rect" coords="363,1469,502,1519" href="http://www.usfirst.org/roboticsprograms/frc/content.aspx?id=440" alt="" title="" >
<area shape="rect" coords="508,1470,647,1520" href="http://www.rockwallisd.com/" alt="" title="" >
<area shape="rect" coords="652,1470,791,1520" href="http://www.usfirst.org/" alt="" title="" >
<area shape="rect" coords="798,1471,937,1521" href="http://www.spmfg.com/" alt="" title="" >
<!-- BOTTOM LINKS END RIGHT HERE -->
</map>
<!-- Regular TEXT links @ bottom; If you do not wish to have text links under your image map, you can move or delete this DIV -->
<div style="text-align:center; font-size:12px; font-family:verdana; margin-left:auto; margin-right:auto; width:1200px;">
<a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.my.calendars.net/1296" title="Home">Home</a>
| <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.rockwallrobotics.com/FIRST.html" title="First">First</a>
| <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.rockwallrobotics.com/robots.html" title="Robots">Robots</a>
| <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.rockwallrobotics.com/forum" title="Forum">Forum</a>
| <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.rockwallrobotics.com/reserved.html" title="Bios">Bios</a>
| <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.rockwallrobotics.com/reserved.html" title="Photos">Photos</a>
| <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.rockwallrobotics.com/contact.html" title="Contact">Contact</a>
| <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.rockwallrobotics.com/links.html" title="Links">Links</a>
<!-- BEGIN RANDOM #UE*(ERU*(U*( -->
</div>
<!-- Image map text links - End - -->
</div>
</body>
</html>
</code>
CSS:
<code>
/* CSS Document */
#rrbmain {
text-align:center;
position:absolute;
top:340px;
left:50%;
height:1000px;
width:825px;
margin-left:-325px;
}
</code>