[thelist] css positioning...within <td></td>
McAtee, Malcolm
MMcAtee at philamuseum.org
Thu Oct 25 15:05:44 CDT 2001
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 !
More information about the thelist
mailing list