[thelist] css positioning...within <td></td>

[McAtee, Malcolm]

I am trying to integrate this css positioned elements within an existing
table-based layout
I have tried creating a continer <div> to hold these as seperate elements w/
mixed results any suggestions...


TIA Malcolm

//---------------//
Malcolm J. Mcatee
Web Designer
Philadelphia Museum of Art
215-684-7748
mmcatee at philamuseum.org
//---------------//

-----Original Message-----
From: Gerenday, Perry (P.) [mailto:pgerenda at visteon.com]
Sent: Thursday, October 25, 2001 8:17 AM
To: 'thelist at lists.evolt.org'
Subject: RE: [thelist] css positioning


-----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



---------------------------------------
For unsubscribe and other options, including
the Tip Harvester and archive of TheList go to:
http://lists.evolt.org Workers of the Web, evolt !