images overlay [Archive] - Dynamic Drive Forums

benosullivan

04-19-2005, 03:14 PM

Dear all,

MWINTER gave me the following CSS code to overlay hyperlink images onto a background - can someone see which attributes define the position of the overlayed images?

Thanks
Ben

<head>


<style type="text/css">
#container {
background: url(http://www.example.com/background.jpeg) #000000 no-repeat;
color: #ffffff;
position: relative;
height: <nn>px;
width: <mm>px;
}
#container a {
position: absolute;
}
#container a img {
border-style: none;
}

#blah {
top: <y>px;
left: <x>px;
}
</style>
</head>

<body>
<div id="container">
<a id="blah" href="..."><img alt="text equivalent of image" src="..."></a>
</div>
</body>

jscheuer1

04-20-2005, 06:48 AM

The way I understand it you use 'blah'. Like:

......
#blah {
top: 120px;
left: 200px;
}
</style>
</head>

<body>
<div id="container">
<a id="blah" href="..."><img alt="text equivalent of image" src="..."></a>
</div>the next image's anchor tag could have any id, say 'bleh'.

......
#blah {
top: 120px;
left: 200px;
}

#bleh {
top: 170px;
left: 260px;
}

</style>
</head>

<body>
<div id="container">
<a id="blah" href="..."><img alt="text equivalent of image" src="..."></a>
<a id="bleh" href="..."><img alt="text equivalent of image" src="..."></a>
</div>and so on.

benosullivan

04-22-2005, 09:37 AM

thanks Mike - I'll have a look,

Ben