[thelist] css positioning

Gerenday, Perry (P.) pgerenda at visteon.com
Thu Oct 25 10:21:33 CDT 2001


-----Original Message-----
From: McAtee, Malcolm [mailto:MMcAtee at philamuseum.org]


 > http://www.philamuseum.org/global/menu/menu2_template.html
 > 
 > 
 > Any thoughts on how to remove the spaces between each image....
 > 
 > .menuLabel 
 > 
 > <div id='menuLabel1' class='menuLabel'>
 > <a href="javascript://" onmouseover="menuShow(event,1)"><img 
 >    src="/images/menu/1/exhibitions.gif" width=130 height=20 border=0 
 >    alt="" name="exhibitions"></a></div>
 > 
 > <div id='menuLabel2' class='menuLabel'>
 > <a class='ml' href="javascript://" 
 > onmouseover="menuShow(event,2)"><img 
 >    src="/images/menu/1/events.gif" width=130 height=20 border=0 
 >    alt="" name="events"></a></div>
 > 
 > etc....
 
Hi Malcolm,

After looking at your page source I see that you are using the same CSS
class for each of your DIVs and although you have defined them as
"position:absolute" you have not given them any "top" or "left" positioning.
The DIVs are just falling into place "in-line" just as you have typed them
in you HTML. Try this:

<style>

#menuLabel1 {position:absolute; top:100px; left:0px; visibility:hidden; 
		   width:130px; height:20px; margin:0px; padding:0px;}
#menuLabel2 {position:absolute; top:120px; left:0px; visibility:hidden; 
		   width:130px; height:20px; margin:0px; padding:0px;}
</style>

Each DIV is positioned directly under the one above it.
Apply these in your HTML like this:

<div id='menuLabel1'>
<a href="javascript://" onmouseover="menuShow(event,1)">
	<img src="/images/menu/1/exhibitions.gif" width=130 height=20
border=0 
    alt="" name="exhibitions"></a>
</div>
 
 <div id='menuLabel2'>
 <a class='ml' href="javascript://"onmouseover="menuShow(event,2)">
	<img src="/images/menu/1/events.gif" width=130 height=20 border=0 
    alt="" name="events"></a>
</div>

HTH

Perry Gerenday, Visual Communications Artist
www.virtually-artistic.com






More information about the thelist mailing list