98 replies to this topic

[Panarchy]

Hello!

My website which I recently purchased: Samuel the ITtechnician

Needs a lot of work... :lol:

No, but seriously, what I would like to do is add bottom links to the bottom of my header. I want the bottom links to be click-over (like the ones on this site!).

What I need it to look like;

White text, black background

When cursor is put over link, link needs to change to an orange box (or circle or something) with a different coloured text.

Please help me make this work!

Thanks in advance,

Panarchy

[Xav]

This is simple enough. Simply use a CSS style to set the a:link and a:visited rules to what you want. Then use a:hover to change the appearance.
CSS Image Rollovers | Design Meme

[Panarchy]

Can you help me with the implementation of it?

[Panarchy]

Thanks in advance,

Panarchy

[Xav]

Read the code ın the example, ıt shows you how to do ıt. ;)

[Panarchy]

Do I type it into the html file or the css file?

[Xav]

Content ın the HTML fıle, appearance ın the CSS.

[Panarchy]

Sorry, I don't understand.

If I give you the files, could you give me an example of how to make it work?

[Xav]

What you do ıs create a <nav> tag, and fıll ıt wıth ıtems. Then, you gıve ıt an ID. In the CSS code you refer to that ID, and wrıte ındıvıdual appearances for dıfferent statuses, eg normal, hover etc.

[Panarchy]

^Hmm... thanks, but I'm still confused! :???

(I sent you a PM with my site files, please show me how it's done!)

Thanks in advance,

Panarchy

[Xav]

OK then. Here we go:

<ul id="nav">

<li>Item 1</li>

<li>Item 2</li>

<li>Item 3</li>

</ul>

That's the HTML, and then the CSS:

[HIGHLIGHT=css]#nav li:link, #nav li:visited
{
color: white;
background-color: black;
}
#nav li:hover
{
color: yellow;
background-color: orange;
}
[/HIGHLIGHT]
Untested, does ıt work?

[TcM]

Don't forget to add

<link rel="stylesheet" type="text/css" href="style.css">

in the HTML file, and replace 'style.css' with the name of your CSS file.