13 replies [Last post]
lostgrrl
lostgrrl's picture
Offline
newbie
Last seen: 11 years 23 weeks ago
Timezone: GMT-7
Joined: 2010-05-07
Posts: 9
Points: 10

I have a site where I have an absolute positioned background .png image of vines positioned over a repeating background image so that the pages will extend properly with the content. However, any links that appear over the vines.png image don't work. My client really wants the .png image so does anyone know how I can code the CSS so the links work?

The Container division contains the basic repeating image for the pages (middle.jpg). The Vines division is for the vines.png image that is causing the problem. The actual vines.png image is listed in each page.

div#container {
	margin: 0 auto;
 	background: transparent url(../images/middle.jpg) repeat-y;
	width: 980px;
}
 
#vines {
	position: relative;
}
 
 
#vines img {
	position: absolute;
	top: 0;
	left: 10px;
}

lostgrrl
lostgrrl's picture
Offline
newbie
Last seen: 11 years 23 weeks ago
Timezone: GMT-7
Joined: 2010-05-07
Posts: 9
Points: 10

oops forgot the HTML

oops forgot the HTML code

<img src="images/vines.png" width="972" height="448" alt="Vines Watermark" />

Vade
Vade's picture
Offline
Enthusiast
Ireland
Last seen: 10 years 47 weeks ago
Ireland
Joined: 2007-08-13
Posts: 315
Points: 276

I'm just gonna go ahead and

I'm just gonna go ahead and assume theres a huge amount of html code left out here. We'd need to see everything. Ideally a live link.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Most likely something with

Most likely something with z-index.
Please provide a link.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

lostgrrl
lostgrrl's picture
Offline
newbie
Last seen: 11 years 23 weeks ago
Timezone: GMT-7
Joined: 2010-05-07
Posts: 9
Points: 10

Sorry guys...I wasn't sure if

Sorry guys...I wasn't sure if live links were allowed...on some forums they are not. The site is at www.drkdesign.com/ks/specials.php (That's the page with the link problem.)

I saw something on another forum where it was suggested the z-index be removed and it worked for them. So I did that but its not working for me.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Don't remove it add it! Give

Don't remove it add it!

Give prominence in the stacking order to the links elements which I presume is the element named #vines which already has position relative initiated so add a z-index that will pull the element above the absolute positioned one.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

lostgrrl
lostgrrl's picture
Offline
newbie
Last seen: 11 years 23 weeks ago
Timezone: GMT-7
Joined: 2010-05-07
Posts: 9
Points: 10

Okay so I've been googling an

Okay so I've been googling an answer on this for hours today and finally happened upon this fix...I have no idea why it works but it does. I just added a {position:relative;} to the code.

#container {
	margin: 0 auto;
 	background: transparent url(../images/middle.jpg) repeat-y;
	width: 980px;
}
 
#vines {
	position: relative;
}
 
 
#vines img {
	position: absolute;
	top: 0;
	left: 10px;
}
 
a { 
	position: relative;
}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Go read up on the stacking

Go read up on the stacking context of elements at the W3C then you will have an idea why, rather than simply wondering for ever more Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

lostgrrl
lostgrrl's picture
Offline
newbie
Last seen: 11 years 23 weeks ago
Timezone: GMT-7
Joined: 2010-05-07
Posts: 9
Points: 10

Hugo, I saw your response

Hugo, I saw your response only after I added mine, so I tried your fix, but no go...am sticking with the a { position: relative; } code. Thanks though!

lostgrrl
lostgrrl's picture
Offline
newbie
Last seen: 11 years 23 weeks ago
Timezone: GMT-7
Joined: 2010-05-07
Posts: 9
Points: 10

Hugo, I saw your response

Hugo, I saw your response only after I added mine, so I tried your fix, but no go...am sticking with the a { position: relative; } code. Thanks though!

lostgrrl
lostgrrl's picture
Offline
newbie
Last seen: 11 years 23 weeks ago
Timezone: GMT-7
Joined: 2010-05-07
Posts: 9
Points: 10

oops sorry about the double

oops sorry about the double post...am not sure why that happened.

lostgrrl
lostgrrl's picture
Offline
newbie
Last seen: 11 years 23 weeks ago
Timezone: GMT-7
Joined: 2010-05-07
Posts: 9
Points: 10

Thanks Hugo...I understand

Thanks Hugo...I understand the stacking principle but never would have thought of stacking a link.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

No what I suggested doesn't

No what I suggested doesn't work but I was having to guess slightly based on insufficient detail from the initial post Smile

I have just looked at your site and you are creating your own problems by disrupting the natural flow of elements for no real reason you must make a few fundamental changes to your layout.

Firstly and most importantly you should not be setting decorative images as inline foreground ones, site decoration is placed as background to elements.

#vines should in reality be a parent element to your #content and #sidebar - rename it and set your background to it, you now have preserved the natural flow and are not disrupting the natural stacking order and the issue of the links doesn't arise. The heading strip thing do in a similar manner set a graphic as a background.

I spotted that you have used #vines twice (although one was empty) - an ID must only be used once per page.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

lostgrrl
lostgrrl's picture
Offline
newbie
Last seen: 11 years 23 weeks ago
Timezone: GMT-7
Joined: 2010-05-07
Posts: 9
Points: 10

Thank you Hugo...I don't know

Thank you Hugo...I don't know why I didn't think of doing it this way...it makes perfect sense. I have set up a #wrapper2 for the content and sidebar using vines.jpg as a background image.

I didn't do this with the page headers though because I didn't want the text falling out of the header strips when text is enlarged in the browser..so I made those strictly images.

And I guess you must have posted before I found the double id for #vines.

Thanks for all your help!