I have a demo of a program I am working on at http://www.supfrt.com/globworld/index3.htm
The left and right bottoms "globworld" and and "kids blog"are css rollover buttons that need to enlarge on a mouseover but should enlarge without overlapping the green bordered background that contains the swf file and without shifting any of the other elements on the page. How do I do this?
Here is the html code:
<body>
<div id="container">
<div id="header">
<img style="position:relative; float:left; top:10px; width:136px; height:57px" src="./images/glob-world.png">
<img style="position:relative; top:0px; left:120px; width:493px; height:124px" src="./images/top-header.png">
</div>
<div id="content-container">
<div id="content">
<a href="some.html" onmouseover="document.but1.src='./images/globworld1.png'" onmouseout="document.but1.src='./images/globworld2.png'" >
<img style="position:relative; float:left; top:10px; left:-10px;" src="./images/globworld2.png" name="but1" width="93" height="130" border="0" alt="...">
</a>
<a href="some.html" onmouseover="document.but.src='./images/kids_blog1.png'" onmouseout="document.but.src='./images/kids_blog2.png'" >
<img style="position:relative; float:left; top:15px; left:824px;" src="./images/kids_blog2.png" name="but" width="103" height="115" border="0" alt="...">
</a>
<p style="position:relative; float:top; top:-138px; left:94px; width:810px; height:610px"><script language="JavaScript" type="text/javascript">
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0',
'width', '810',
'height', '610',
'src', 'fashion_zombies',
'quality', 'high',
'pluginspage', 'http://www.adobe.com/go/getflashplayer',
'valign', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'showall',
'wmode', 'window',
'devicefont', 'false',
'id', 'fashion_zombies',
'bgcolor', '#ffffff',
'name', 'fashion_zombies',
'menu', 'true',
'allowFullScreen', 'false',
'allowScriptAccess','always',
'movie', 'fashion_zombies',
'salign', 'center'
); //end AC code
</script></p>
</div>
<div id='footer'>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style" align=center>
<a href="http://www.addthis.com/bookmark.php?v=250&username=xa-4c8c38e749a1ddc3" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c8c38e749a1ddc3"></script>
<!-- AddThis Button END -->
</div>
</div>
</div>
</body>
And here is the CSS code:
#navigation li a
{
display: block;
float: left;
padding: 5px 10px;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
}
#navigation li a:hover { background: #383; }
#content-container
{
float: left;
width: 1000px;
}
#section-navigation
{
float: left;
width: 1000px;
padding: 0px 0;
margin: 0 0px;
display: inline;
}
#section-navigation ul
{
margin: 0;
padding: 0;
}
#section-navigation ul li
{
margin: 0 0 1em;
padding: 0;
list-style-type: none;
}
#content2
{
float: left;
width: 1000px;
top:50px;
left:900px;
padding: 20px 0;
margin: 0 0 0 30px;
background: url(../images/kids_blog1.png) no-repeat right top;
}
#content
{
float: left;
width: 1000px;
height: 650px;
padding: 20px 0;
margin: 0 0 0 30px;
background: url(../images/fashionzombie_main.png) no-repeat center top;
z-index: 2;
}
#content h2 { margin: 0; z-index: 1; }
#aside
{
position:center;
width: 1000px;
}
#aside h3 { margin: 0; }
#footer
{
float:right;
width: 550px;
padding: 20px 0;
}