Connecting Tech Pros Worldwide Forums | Help | Site Map

CSS Problem on div and link

dafodil's Avatar
Needs Regular Fix
 
Join Date: Jul 2007
Location: Philippines
Posts: 393
#1: Feb 6 '09
I have a problem on divs and links. I have a particular <div> before a link. I want that div to change its background image when the link is active. Is that possible on css?

I'm not really into designing web apps cause I'm really into programming. Please help me with this one. Thanks.

Dormilich's Avatar
Moderator
 
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,678
#2: Feb 6 '09

re: CSS Problem on div and link


I'm not completely sure, but I think that you can't style ancestor elements with CSS.

regards
dafodil's Avatar
Needs Regular Fix
 
Join Date: Jul 2007
Location: Philippines
Posts: 393
#3: Feb 6 '09

re: CSS Problem on div and link


Sorry for not making it clear. I am making a menu button.
I created one of its button using
Expand|Select|Wrap|Line Numbers
  1. <div style="background-image: url('../a.gif')"> </div> <a href="" style="background-image: url('../a.gif')">link</a> <div style="background-image: url('../a.gif')"> </div> 
As you can see I used the first and last divs not to position the image but to hold images. so I can have a round end for my menus.

I used a.active on css to change the background of my link whenever clicked or visited. My problem now is that I can't change the left and right divs background image on click of the link. Any ideas? Thanks
Dormilich's Avatar
Moderator
 
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,678
#4: Feb 6 '09

re: CSS Problem on div and link


you don't have left and right divs. unless you changed the display or float properties, your divs are above and below.

what exactly is a "round end"?

maybe a transparent (transparency containing) gif will do?

or maybe that
Expand|Select|Wrap|Line Numbers
  1. <a href="..." style="background..."><img src="left_side.gif">link_text<img src="right_side.gif"></a>
dafodil's Avatar
Needs Regular Fix
 
Join Date: Jul 2007
Location: Philippines
Posts: 393
#5: Feb 6 '09

re: CSS Problem on div and link


I am using a gif for the background. I can't load all the images for my menu buttos because my links have different sizes. It will cost much memory space. any suggestions?
Dormilich's Avatar
Moderator
 
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,678
#6: Feb 6 '09

re: CSS Problem on div and link


images are not loaded twice, and they are cached on the browser (except when the expires header or the browser cache is set to 0). further, you can stretch an image simply by changing its height/width attributes.
dafodil's Avatar
Needs Regular Fix
 
Join Date: Jul 2007
Location: Philippines
Posts: 393
#7: Feb 6 '09

re: CSS Problem on div and link


I tried the code you had given but I can't use it because I got an image that has link in it. and the center top of my background doesen't have a link. Still sir I'm curious if it is possible to change my div after activating a link?
Dormilich's Avatar
Moderator
 
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,678
#8: Feb 6 '09

re: CSS Problem on div and link


I'd need a link to the page to give better advice (currently I don't have a clear picture what the page looks like)
dafodil's Avatar
Needs Regular Fix
 
Join Date: Jul 2007
Location: Philippines
Posts: 393
#9: Feb 6 '09

re: CSS Problem on div and link


How can I upload images here?
Dormilich's Avatar
Moderator
 
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,678
#10: Feb 6 '09

re: CSS Problem on div and link


post a reply, then push the "edit" button, there you have (further down, under options) a button "manage attachments".

alternatively link to an image on a server using the [img] tags
dafodil's Avatar
Needs Regular Fix
 
Join Date: Jul 2007
Location: Philippines
Posts: 393
#11: Feb 6 '09

re: CSS Problem on div and link


Heres the attached image of my menu.

Youll notice the menu buttons above the blue bar.
I used the same html code stated on my previous post. One button contains 3 elements. a left div, a link and a right div. If I click the link I can change the background picture of the link but I also want to change the divs in it.
Attached Thumbnails
menubar.jpg  
Dormilich's Avatar
Moderator
 
Join Date: Aug 2008
Location: Leipzig, Germany
Posts: 3,678
#12: Feb 6 '09

re: CSS Problem on div and link


something like that?
http://www.alistapart.com/articles/slidingdoors/
http://www.alistapart.com/articles/slidingdoors2/
drhowarddrfine's Avatar
Expert
 
Join Date: Sep 2006
Posts: 5,580
#13: Feb 6 '09

re: CSS Problem on div and link


You can't do it the way you have it. If you can place the images without using the divs then wrap the anchors around the images. Then you can use CSS selectors to change the background.
dafodil's Avatar
Needs Regular Fix
 
Join Date: Jul 2007
Location: Philippines
Posts: 393
#14: Feb 6 '09

re: CSS Problem on div and link


Dormilich, thats what I needed. Thanks a lot.

drhowarddrfine, Your right. Thanks for the advice.
Reply


Similar HTML / CSS bytes