PDA

View Full Version : CSS text rollover links


laylalafontaine
10-04-2005, 06:13 PM
Hello everybody!

It's amazing how a small problem can destroy a days worth of work... Well, I am hoping you can help.

On this page I set up in CSS a link, hover, and active properties this way:

a:link
a:visited
a:hover

.bottom a:link
.bottom a:visited
.bottom a:hover

I also made a plain CSS for links called link-current-pg

Now, if I create ANY links on the page they will only use the 1st CSS properties eventhough I may have the second or third selected. I want to be able to create different link properties in CSS and atribute them wherever I want.

Here is the site page, it was down, but should be up shortly:

http://www.pivotpictures.com/index2.htm ('http://www.pivotpictures.com/index2.htm')

thanks in advance.

domedia
10-04-2005, 07:32 PM
Page not up yet. In the mean time you could just paste your html and CSS here.

Bear in mind that this style .bottom a:link
.bottom a:visited
.bottom a:hover
Only will work for links inside an element with a class named bottom, as in <div class="bottom">This is my link (file.html)</div>

laylalafontaine
10-04-2005, 07:48 PM
Well, I believe I follow what you mean. When I created those values, a CSS was created called bottom. But when I apply that CSS it is not applying.

Perhaps for the plain link I need to create one called:

.plain a:link ?

It seems to be very buggy...

thanks!

domedia
10-04-2005, 07:53 PM
Actually, I have no idea what you're saying :)
Please code html and css, or give url.

laylalafontaine
10-05-2005, 02:39 AM
http://www.pivotpictures.com/index2.htm ('http://www.pivotpictures.com/index2.htm')

this is the link above.

Basically, I want to set up in CSS some link text rollovers on the same page. The HOME link is supposed to be plain black but as you see even though a different CSS is selected for that link it has the properties of the CSS found on the above nav bar.

As well you can see on the below links that some of them expand slightly in size when you roll over and the bottom right pivot is supposed to have the bottom CSS link properties but has the same as above.

Help is good :D

Creative Insanity
10-05-2005, 07:15 AM
That is because once in a browser the css file that is going to take preference over the others is <link href="css/custom-links-film.css" rel="stylesheet" type="text/css">, the last one.

You cannot use 2 css files on the one page.

domedia
10-05-2005, 12:54 PM
You cannot use 2 css files on the one page.
Actually, you can link to as many css files as you want, nothing wrong with it as long as you have control ;)

domedia
10-05-2005, 01:01 PM
Currently you have .link-current-pg-film-production applied to both the div surrounding the link, AND on the link itself. You should pick just one, as it it easier to figure out how you want your CSS rule applied. I'm going to assume you only want it on the link, and that you will remove it from the DIV.

You've specified style for .link-current-pg-film-production , but not for when .link-current-pg-film-production is used in a link. Modify you CSS file like this:
.link-current-pg-film-production {
font-family: Arial;
font-size: 10px;
text-decoration: none;
}
a.link-current-pg-film-production:link {
color: #000000;
background-color: #99CCFF;
}
a.link-current-pg-film-production:visited {
color: #000000;
background-color: #99CCFF;
}
a.link-current-pg-film-production:hover {
color: #99CCFF;
background-color: #000000;
}
a.link-current-pg-film-production:active {
color: #000000;
background-color: #99CCFF;
}


The colors used for hover is just an exmaple, you can set them to anything you want of course :)

laylalafontaine
10-05-2005, 05:49 PM
hmmm - you speak that crazy computer talk I have oft heard of when visiting these forums... (I am not so versed in HTML)

Thanks!

I will try to do as you say and hopefully it will work! agh, I looked and already it seems daunting, I get the gist, now I need to find where to make the adjustments... I'll let you know how it goes.

laylalafontaine
10-05-2005, 05:55 PM
ok, I came close, but this may be easier another way...

let's suppose that I taught myself how to use this software, and let's suppose that I understand some basics but am not fluent in CSS-ese... :lol:

where exactly / what do I need to open to edit those changes - or do I erase all of my css links and retype them out?

As well, how do I make sure that they each work in their own links?

You are very helpful, and I appreciate your replies!

thanks

domedia
10-05-2005, 08:20 PM
You can leave your links alone, just make sure you paste the lines I gave you above in your CSS file. Just open the CSS file as text and paste it in.

Now.. you really need to learn some of this stuff.. fast :)
Start with the manual, and then start with going through online tutorials. We have some on this site and Google will give you plenty.

Creative Insanity
10-05-2005, 08:23 PM
You cannot use 2 css files on the one page.
Actually, you can link to as many css files as you want, nothing wrong with it as long as you have control ;)
I would prefer to just have one and name the tags better, other wise I can see things getting messy.

laylalafontaine
10-06-2005, 02:22 AM
ohhh that is working so well, I will write in all of the changes I make... but if you check out the link above entitled "pivot" at the bottom of the page:

it still has the properties of the css links at the top of the page eventhough I assigned "middle" css to it.

Is this just s glitch - grrr I hate glitches... I am learning fast and it helps a lot when you help with those small probs that tutorials etc just don't address - thanks again!

laylalafontaine
10-06-2005, 10:38 PM
it is soooo close now, I link it but I have one prob. I took the code and edited the css that was cool. Now if you go to the link everything is working well but I wanted to do one more thing... on the left nav I wanted whatever page was current to be highlighted in blue, that is working fine.

Under it are the sub pages and I wanted the text "our story" to be the plain black text over white, with a slight blue gradation to fill the cell as a background when in hover. I think that this code aught to be working but it isn't, can you see something I have missed, as well the font size goes kinda wonky...

thanks!

http://www.pivotpictures.com/index2.htm ('http://www.pivotpictures.com/index2.htm')

this is what I have:

.link-lft-bar-links-film-independent {
font-family: Arial;
font-size: 10px;
text-decoration: none;
}
a.link-lft-bar-links-film-independent:link {
color: #000000;
}
a.link-lft-bar-links-film-independent:visited {
color: #000000;
background-color: #FFFFFF;
}
a.link-lft-bar-links-film-independent:hover {
color: #99CCFF;
background-image: url(../images-film-production/buttons-feature-films/rollover-left-feature-independent.gif);
}
a.link-lft-bar-links-film-independent:active {
color: #000000;
background-color: #FFFFFF;

laylalafontaine
10-07-2005, 02:34 AM
ok, I hope you are still with me... I managed to get most of it woking except one thing... when I hover over the link "our story" the background image only appears around the text. How can I have it fill the entire cell the link is in?

domedia
10-07-2005, 02:48 AM
A is an inline element, to fill the whole block , the easy fix is adding display: block and turn it into a block element on :hover
Now after this you *really* need to read a little up on css ;)

.a.link-lft-bar-links-film-independent:hover {
color: #99CCFF;
background-image: url(../images-film-production/buttons-feature-films/rollover-left-feature-independent.gif);
background-repeat: repeat-x;
display: block;
}

laylalafontaine
10-07-2005, 04:10 PM
hear that? that's me doing the domedia shuffle... left-step-kick-ball-chain-shakey-shakey and magic fingers!

tu est formidable!