Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Adding bottom links with click-over feature? Help please!


  • Please log in to reply
98 replies to this topic

#1 Panarchy

Panarchy

    CC Addict

  • Just Joined
  • PipPipPipPipPip
  • 247 posts

Posted 31 July 2008 - 04:12 AM

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
  • 0

#2 Xav

Xav

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 8356 posts

Posted 31 July 2008 - 04:22 AM

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
  • 0
If you enjoy reading this discussion and are thinking about commenting, why not click here to register and start participating in under a minute?

#3 Panarchy

Panarchy

    CC Addict

  • Just Joined
  • PipPipPipPipPip
  • 247 posts

Posted 02 August 2008 - 05:23 AM

Can you help me with the implementation of it?
  • 0

#4 Panarchy

Panarchy

    CC Addict

  • Just Joined
  • PipPipPipPipPip
  • 247 posts

Posted 02 August 2008 - 09:32 PM

Thanks in advance,

Panarchy
  • 0

#5 Xav

Xav

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 8356 posts

Posted 04 August 2008 - 08:23 AM

Read the code ın the example, ıt shows you how to do ıt. ;)
  • 0
If you enjoy reading this discussion and are thinking about commenting, why not click here to register and start participating in under a minute?

#6 Panarchy

Panarchy

    CC Addict

  • Just Joined
  • PipPipPipPipPip
  • 247 posts

Posted 04 August 2008 - 02:30 PM

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

#7 Xav

Xav

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 8356 posts

Posted 07 August 2008 - 09:28 AM

Content ın the HTML fıle, appearance ın the CSS.
  • 0
If you enjoy reading this discussion and are thinking about commenting, why not click here to register and start participating in under a minute?

#8 Panarchy

Panarchy

    CC Addict

  • Just Joined
  • PipPipPipPipPip
  • 247 posts

Posted 07 August 2008 - 02:13 PM

Sorry, I don't understand.

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

#9 Xav

Xav

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 8356 posts

Posted 08 August 2008 - 09:27 AM

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.
  • 0
If you enjoy reading this discussion and are thinking about commenting, why not click here to register and start participating in under a minute?

#10 Panarchy

Panarchy

    CC Addict

  • Just Joined
  • PipPipPipPipPip
  • 247 posts

Posted 08 August 2008 - 02:57 PM

^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
  • 0

#11 Xav

Xav

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 8356 posts

Posted 09 August 2008 - 09:31 AM

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:

#nav li:link, #nav li:visited
{
color: white;
background-color: black;
}
#nav li:hover
{
color: yellow;
background-color: orange;
}

Untested, does ıt work?
  • 0
If you enjoy reading this discussion and are thinking about commenting, why not click here to register and start participating in under a minute?

#12 TcM

TcM

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 7563 posts

Posted 10 August 2008 - 01:12 AM

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.
  • 0




Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download