On 5 Feb 2005 10:23:14 -0800, Benjamin Esham <bd*****@gmail.com> wrote:
I have a very wide image that I want positioned in the extreme top left
of the page. If the browser window is too narrow to contain the whole
thing, that's fine-- the image should just be cut off, with no
horizontal scrollbar. If the browser window is wider than the image,
then I'd like a gray region to the right of the image. (The right side
of the image fades to gray, so the image will look okay even if the
browser window is wider than the image.)
So far, so good. I have a solution for this that uses an absolutely-
positioned div with the image and gray as its background. The only
problem is that I would like to make this image into a link.
I tried nesting the image inside an absolutely-positioned h1, but the
wide image caused a horizontal scrollbar to appear. I set "width:
100%" on the image, but that just distorted it. In addition, this
approach does not accomplish the fade-to-gray I mentioned.
Can anyone think of a way to accomplish the visual things described
above while having the image be a link? Thanks for the help!
You could simulate the image be a link: Position a div over the div containing
the image. Put an anchor on a transparant image in the first div.
<div class="img-container"> </div>
<div class="link-container"><a href="foo.html"><img src="transparant.png" alt="
"></a></div>
..img-container, .link-container {
position:absolute;
width:100%;
height:100%;
padding:0;
border:0;
margin:0;
top:0;
left:0; }
..img-container {
z-index:1;
background:gray url(foo/bar.gif) top left no-repeat fixed; }
..link-container img {
width:100%;
height:100%; }
Ugly as hell, but might do the trick.
Not tested.
--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog |
http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp |
http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen |
http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'
