Slightly advanced CSS...

compuXP · 03-08-2006, 12:16 AM

Hey all,

I need to know how to set certain things for certain... thanks

1. I need to have a background color (on hover) and 2px padding (always) on TEXT links. ONLY text links.

2. I need to NOT have any border or background color (even on hover) for any images and inputs.

Basically, I'm trying to restrict the padding and background color (on hover) to ONLY text links with CSS.

Any bright ideas?

Thanks ^_^

-Matt

rohan2kool · 03-08-2006, 09:30 AM

i hope this helps:

Code:

<style type="text/css">

a span {
   padding: 2px;
}

a span:hover {
   background-color: #FCFCC8;
}

input {
   background: none;
   border: none;
}

img {
   background: none;
   border: none;
}

</style>

At the same time you are required to have text links within <span></span> tags or extend it to further tags. The fact that you can use images within span tags is a problem but there's no workaround to it as CSS doesn't distinguish between text, images and lists as such.

compuXP · 03-09-2006, 02:41 AM

Ah thanks, I'll definately try that. I can't now but will ASAP And let you know if it worked. Rep added

compuXP · 03-12-2006, 09:25 PM

I can't get it to work

Is there like a way to say:

a img { whatever }

So that it only affects images in anchors?

rohan2kool · 03-13-2006, 02:14 PM

yep.. you can do that.

compuXP · 03-13-2006, 09:18 PM

Then how come it doesn't work?

rohan2kool · 03-14-2006, 11:13 AM

Please post the complete code here. Maybe I can catch the glitch in there. I really don't know why it's not working...

Zack · 03-15-2006, 09:34 PM

No a img {, will not work. Try the following -

HTML Code:

img { border: 0; }
a, a:visited, a:active {
color: your color;
text-decoration: underline;
}
a:hover {
color: your color;
background: your background;
text-decoration: underline;

If the img isn't working, put this in your image tags:

HTML Code:

<img src="picture.png" border="0" />

HTMLGuy

compuXP · 03-21-2006, 02:48 AM

Hm, didn't work

Thanks though!

Zack · 05-27-2006, 01:07 PM

Oh, here comes a long post but it will help you a lot! Okay in CSS there is a thing called classes. You can create classes so only certain things are changed. Classes basically seperates normal tags (the ones you do not want to change) and the tags you want to change. In this case you want to change the look of images that have a hyperlink attached to them. You don't want other images to look any different. So let's create a css class! Here is what you want, I will explain it for you (put this in your stylesheet).

Code:

img.aimg {
border: 0;
/*any other tags*/
}

Okay this sets up the image class aimg. Basically all I did was take out the border, you can add other explanations (i just said tags there). Now, to apply a class to an image, you go to it's code and add the following.

Code:

<a href="#" target="_blank"><img src="images/image.png" class="aimg" /></a>

That should work, and you can change all of their class styles at any time you want, so it is really effective and should help you a bunch. Sorry it took me so long to remember this.
HTMLGuy

compuXP · 05-27-2006, 01:49 PM

Thanks for this; I already know how to use classes

But other members will find it useful, I'm sure.

Albert Tai · 05-28-2006, 02:09 PM

uh i knew that a long time. Hey compuxp what are you going to do with that script. What website are you going to put on? I want to see and rate it...please

compuXP · 05-28-2006, 10:06 PM

Me? With what script?

Zack · 05-28-2006, 10:11 PM

I think he means, what are you building, and in compuXP's defense, you can't ask him.
HTMLGuy

compuXP · 05-28-2006, 10:15 PM

Actually I haven't released the project yet :-/ Going to have to wait until it's out.

03-08-2006, 12:16 AM	#1
compuXP Retired Member Join Date: Dec 2005 Posts: 139	Slightly advanced CSS... Hey all, I need to know how to set certain things for certain... thanks 1. I need to have a background color (on hover) and 2px padding (always) on TEXT links. ONLY text links. 2. I need to NOT have any border or background color (even on hover) for any images and inputs. Basically, I'm trying to restrict the padding and background color (on hover) to ONLY text links with CSS. Any bright ideas? Thanks ^_^ -Matt __________________ Retired Moderator/Member/Friend/Helper - it was great working with all of you!

03-08-2006, 09:30 AM	#2
rohan2kool Member Join Date: Dec 2005 Posts: 132	Re: Slightly advanced CSS... i hope this helps: Code: <style type="text/css"> a span { padding: 2px; } a span:hover { background-color: #FCFCC8; } input { background: none; border: none; } img { background: none; border: none; } </style> At the same time you are required to have text links within <span></span> tags or extend it to further tags. The fact that you can use images within span tags is a problem but there's no workaround to it as CSS doesn't distinguish between text, images and lists as such. __________________ Eat healthy, Stay Fit, Die Anyway. --==-- If there is a man who knows everything about women, there is a Windows distribution without bugs.

03-09-2006, 02:41 AM	#3
compuXP Retired Member Join Date: Dec 2005 Posts: 139	Re: Slightly advanced CSS... Ah thanks, I'll definately try that. I can't now but will ASAP And let you know if it worked. Rep added __________________ Retired Moderator/Member/Friend/Helper - it was great working with all of you!

03-12-2006, 09:25 PM	#4
compuXP Retired Member Join Date: Dec 2005 Posts: 139	Re: Slightly advanced CSS... I can't get it to work Is there like a way to say: a img { whatever } So that it only affects images in anchors? __________________ Retired Moderator/Member/Friend/Helper - it was great working with all of you!

03-13-2006, 02:14 PM	#5
rohan2kool Member Join Date: Dec 2005 Posts: 132	Re: Slightly advanced CSS... yep.. you can do that. __________________ Eat healthy, Stay Fit, Die Anyway. --==-- If there is a man who knows everything about women, there is a Windows distribution without bugs.

03-13-2006, 09:18 PM	#6
compuXP Retired Member Join Date: Dec 2005 Posts: 139	Re: Slightly advanced CSS... Then how come it doesn't work? __________________ Retired Moderator/Member/Friend/Helper - it was great working with all of you!

03-14-2006, 11:13 AM	#7
rohan2kool Member Join Date: Dec 2005 Posts: 132	Re: Slightly advanced CSS... Please post the complete code here. Maybe I can catch the glitch in there. I really don't know why it's not working... __________________ Eat healthy, Stay Fit, Die Anyway. --==-- If there is a man who knows everything about women, there is a Windows distribution without bugs.

03-15-2006, 09:34 PM	#8
Zack Junior Guru Join Date: Dec 2005 Location: North Carolina Posts: 759	Re: Slightly advanced CSS... No a img {, will not work. Try the following - HTML Code: img { border: 0; } a, a:visited, a:active { color: your color; text-decoration: underline; } a:hover { color: your color; background: your background; text-decoration: underline; If the img isn't working, put this in your image tags: HTML Code: <img src="picture.png" border="0" /> HTMLGuy __________________ yaxal releases '07

03-21-2006, 02:48 AM	#9
compuXP Retired Member Join Date: Dec 2005 Posts: 139	Re: Slightly advanced CSS... Hm, didn't work Thanks though! __________________ Retired Moderator/Member/Friend/Helper - it was great working with all of you!

05-27-2006, 01:07 PM	#10
Zack Junior Guru Join Date: Dec 2005 Location: North Carolina Posts: 759	Re: Slightly advanced CSS... Oh, here comes a long post but it will help you a lot! Okay in CSS there is a thing called classes. You can create classes so only certain things are changed. Classes basically seperates normal tags (the ones you do not want to change) and the tags you want to change. In this case you want to change the look of images that have a hyperlink attached to them. You don't want other images to look any different. So let's create a css class! Here is what you want, I will explain it for you (put this in your stylesheet). Code: img.aimg { border: 0; /any other tags/ } Okay this sets up the image class aimg. Basically all I did was take out the border, you can add other explanations (i just said tags there). Now, to apply a class to an image, you go to it's code and add the following. Code: <a href="#" target="_blank"><img src="images/image.png" class="aimg" /></a> That should work, and you can change all of their class styles at any time you want, so it is really effective and should help you a bunch. Sorry it took me so long to remember this. HTMLGuy __________________ yaxal releases '07

05-27-2006, 01:49 PM	#11
compuXP Retired Member Join Date: Dec 2005 Posts: 139	Re: Slightly advanced CSS... Thanks for this; I already know how to use classes But other members will find it useful, I'm sure. __________________ Retired Moderator/Member/Friend/Helper - it was great working with all of you!

05-28-2006, 02:09 PM	#12
Albert Tai Permanently Banned Contributor Join Date: Apr 2006 Location: Ontario, Canada Posts: 1,010	Re: Slightly advanced CSS... uh i knew that a long time. Hey compuxp what are you going to do with that script. What website are you going to put on? I want to see and rate it...please __________________ Albert Tai Submit your links to Webz.in Rep people on this forum if they helped you

05-28-2006, 10:06 PM	#13
compuXP Retired Member Join Date: Dec 2005 Posts: 139	Re: Slightly advanced CSS... Me? With what script? __________________ Retired Moderator/Member/Friend/Helper - it was great working with all of you!

05-28-2006, 10:11 PM	#14
Zack Junior Guru Join Date: Dec 2005 Location: North Carolina Posts: 759	Re: Slightly advanced CSS... I think he means, what are you building, and in compuXP's defense, you can't ask him. HTMLGuy __________________ yaxal releases '07

05-28-2006, 10:15 PM	#15
compuXP Retired Member Join Date: Dec 2005 Posts: 139	Re: Slightly advanced CSS... Actually I haven't released the project yet :-/ Going to have to wait until it's out. __________________ Retired Moderator/Member/Friend/Helper - it was great working with all of you!

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Advanced CSS	Zack	CSS	1	10-25-2006 11:56 PM
advanced ebay mail scam	UnKnown	General Talk	8	10-07-2006 10:58 AM
Needed, a fairly advanced programmer	Zack	Want to Buy	4	12-29-2005 11:57 PM