Hover?!

[Danzig]

I want this effect on a couple of links on my page but not all. How is this done?

<STYLE TYPE="text/css"> <!--
A:hover {
color : Black;
background : #FDFAED;
}



-->
</STYLE>

I have searched the forum but the only thing I got from that was a huge headache, because this is really way over my head!!!

Hope there is a solution!:)

[keith]

try this, haven't tried it myself though:
<STYLE TYPE="text/css">
<!--
#nav:hover {
color : Black;
background : #FDFAED;
}
-->
</STYLE>then on the links you want the css to work with, have them read out like this:
<a href="/asdf/" id="nav">doesn't have to be "nav", could be anything.

[megapuzik]

Or a class :


<style>
.bla
{
color : Black;
}
</style>

and then


<a href="asdfsdf" class=bla>sadf</a>

[Danzig]

Originally posted by keith
try this, haven't tried it myself though:
<STYLE TYPE="text/css">
<!--
#nav:hover {
color : Black;
background : #FDFAED;
}
-->
</STYLE>then on the links you want the css to work with, have them read out like this:
<a href="/asdf/" id="nav">doesn't have to be "nav", could be anything.

Great!! Thanks!! Now, can I do several links at the time? I got a bunch of links on a row! And can I make it Strikethrough?

[Danzig]

Originally posted by megapuzik
Or a class :


<style>
.bla
{
color : Black;
}
</style>


Shouldn't "hover" be there too? Text just turned black! :confused:

[megapuzik]

Originally posted by Danzig


Shouldn't "hover" be there too? Text just turned black! :confused:
Its an example :o you ca put there wahtever you want :)

[Danzig]

Originally posted by megapuzik

Its an example :o you ca put there wahtever you want :)

Well I am quite daft, I don't understand much of this techie stuff so you will probably have to spell it out for me! :D

What is the difference with what you suggested and what Keith suggested?

[megapuzik]

Originally posted by Danzig


Well I am quite daft, I don't understand much of this techie stuff so you will probably have to spell it out for me! :D

What is the difference with what you suggested and what Keith suggested?
No difference :D

[WebEx]

To make all of the links go black when the mouse goes over:

<style>
<!--
A:HOVER { color : black; }
-->
</style>



To make certain links go black:

<style>
<!--
A:HOVER.link { color : black; }
-->
Then to make the link:

<a href="yourlink" class="link">Your Link</a>

[Danzig]

Originally posted by WebEx
To make all of the links go black when the mouse goes over:

<style>
<!--
A:HOVER { color : black; }
-->
</style>



To make certain links go black:

<style>
<!--
A:HOVER.link { color : black; }
-->
Then to make the link:

<a href="yourlink" class="link">Your Link</a>

Great!! But can I something like:

<class="link">a wagon load of different links </class>

[WebEx]

Hmmm. :rolleyes: ... I don't think so... But is adding that little extra class="link" so hard?

[Danzig]

No it is not, just wondering if life could get even better at this point:)

[meow]

This gets the hover state under _some_ different circumstances.

a:hover
all links

a.thisclass:hover
all links of the class hover

a#thisid:hover
One single instance of a link with the id thisid (id is a unique identifier and can occur once in a document)

.thiscontainer a:hover
any link contained in another element of the class thiscontainer

.thiscontainer a:thisclass:hover
any link of the class thisclass contained in another element of the class thiscontainer

And then some :p

[Danzig]

Thanks but sadly that was way way way over my head.:confused: I admit, I am daft:o and has only started writing html. I prolly have to do some doc reading first!

[meow]

Oki. Then keep to classes if you want to single out some.

[Danzig]

Ok done! I have done some damn doc reading now! I have got a link in the header to a separate style sheet. Lovely! All is well....exept, I can't figure out how to use the hover command properly. everything else is working but I don't want the links in the navigation bar to turn black when I move my mouse over them( the background is black there) only the links out side the nav bar. I am not using frames.

This is the code I have done



H1 {
font-family : "Times New Roman", "Bookman Old Style", serif;
font-size: medium;
text-align: center;
text-decoration: none;
font: bolder;
}

H2 {
font-size: 32pt;
font-family: "Times New Roman", Times, serif;
font-style: bold;
text-align: center;
}

H3 {
font-size: 15pt;
font: bold;
font-family: "Times New Roman", Times, serif;
text-align: center;
}

H4 {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font : bolder;
text-align: center;
}

A {
color: #ff9900;
}

A:Hover {
color: black;
}


H1 is for the nav bar
H4 is the link collection

Is anything looking odd in the code?

[meow]

Having fun? :p


a gets all links. Simplest way to get only some is to give them a class:

<a href="" class="effect">

a.effect:hover {...}

If you're saying you have the links you want the effect on in h4 (seems odd?) like so:
<h4>
<a.....>
<a.....>
</h4>

You can also write the CSS like so:

h4 a:hover {....}
...all a contained in a h4....

[Danzig]

Originally posted by meow
Having fun? :p

Yes!:D I am having loads of fun, I just can't belive it was this easy, it looked so so so tricky at first. But after reading the posts in this thread and http://www.bradsoft.com/topstyle/css_basics/index.asp it started to make some sense. Really great, thanks alot!!!



h4 a:hover {....}
...all a contained in a h4....

This did the trick!!!:)

Now all I have to is transform the spaghetti html of netscape composer into a more manageble form:( Sadly this will take quite some time... so far I have well over 30 pages done with the composer*sigh*

[meow]

Glad you are enjoying yourself. :p

Just a tip if you are going to clean up code. The simpler and more structured the html is the easier it is to apply CSS. Especially when you get into CSS2 (*urrrrk*). Headings, paragraphs, lists a.s.o. are your friends.

[Danzig]

Originally posted by meow
CSS2

OH NO what's that?!:nervous:

[meow]

Here. Knock yourself out. :D
http://www.w3.org/TR/REC-CSS2/
Easier to get in through the back door :p
http://www.w3.org/TR/REC-CSS2/propidx.html

Basically CSS1 is simple text formatting, background colors, a border here and there. CSS2 introduces positioning and the browser bugs are mag-nifi-cent! Give me another year and I may be half good at it. CSS3 is around the corner too. :book:

A guy named Chris Casciano has promised to make a new layout for one of his sites every day in February. Take a look. View source. The content and the HTML are the same all the time, only linked to different Style Sheets - that's CSS2. :birthday:
http://www.neuralust.com/~cac6982/

[Danzig]

Originally posted by meow
Here. Knock yourself out. :D
http://www.w3.org/TR/REC-CSS2/
Easier to get in through the back door :p
http://www.w3.org/TR/REC-CSS2/propidx.html

Checked it out!! Found a way out and quickly escaped!!! I looked around abit at the syntaxes and the only thing I got from that was a good old head ache! :chicken: I am definetly going to learn html and css properly first :)
QUOTE]
A guy named Chris Casciano has promised to make a new layout for one of his sites every day in February. Take a look. View source. The content and the HTML are the same all the time, only linked to different Style Sheets - that's CSS2. :birthday:
http://www.neuralust.com/~cac6982/ [/QUOTE]
Really impressive this!:) I can't figure this out, really awesome! Does this make tables obsolete or what?

Headings, paragraphs, lists a.s.o. are your friends.
Those are tags, I take it!? I have seen paragraphs but I haven't really figured out its purpose. The 2 other are unfamiliar. Care to share some wisdom?

[meow]

Yes, tables for layout are out (but ack so much more easy in todays browsers).

Those tags? You've used them- :)
h1, h2, h3, h4, h5, h6: headings, make - headings!
p: paragraph, makes a paragraph :p

With CSS a h1 doesn't need to be gigantic. One can make it look however one wants but it's still a h1. The purpose of it all this is that HTML is meant for structure (and always was) and CSS handles the presentation, how it looks. The good thing is that the same HTML document can be made too look one way in a graphical browser, another way when printed on paper and still be _structured_ enough to work well in any application (like a text reader or whatever).

Don't know if this makes sense to you, but if you go back to ~cac6982 and choose "No style" you'll see a very simple, structured page with Headings and paragraphs and a couple of lists. That's all the HTML there is there. The rest is CSS. Colors, sizes, where it's displayed in the browser window...

CSS is cool. :cool:

[Danzig]

Oki understand what the p, li and h is now:) Didn't try no style before, that cleared some of the fog. Thanks!:)

I know I should probably get out before my brain starts boiling but what does the ol tag do?

Strange thing here, Netscape Composer has done some strange things while generating the code for my site. It has randomly(it seems) added the tag blockquote and I can't figure out what that tag is supposed to do?? If I remove them from a page it still looks the same!? What is that all about? It is really hard to clean up the code when there are tags that I have never seen :confused:

[meow]

Having LOTS of fun today, huh? :biggrin2:

OL is an Ordered List. OL in itself is sort of a "wrapper element", telling the browser what type of list to expect. Each list item is marked up with LI (List Item).

<ol>
<li>cats</li>
<li>dogs</li>
<li>pigs</li>
</ol>

You can control if you want numbers or letters in front of each list item and a lot more both with HTML and CSS. Default is what you see if you paste the above into a HTML document - 1,2,3... :)

Compare to an Unordered List (bulleted list). Just substitute OL with UL in the example above.

BLOCKQUOTE is for larger quotations (like from a book). It's very common that bad editors (sorry! :p) use them for margins since most graphical browsers happen to display them with an equal left and right indent.