PDA

View Full Version : images overlay



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