[Tutorial] Basic CSS Hover Effects (Backgrounds, borders, ect.) - Page 2

JdS · #11 03-Feb-2004, 15:21

Quote:

Originally Posted by cs2

...

Actually, no. The 'cs2' is just a company pseudonym -- I'm Bob, but next time it might be Candi or Maryann posting.

You have the "split-personality" issues too huh? Try giving Bob and Maryann some really strong medication; might just work! Candi... can post here anytime

Sorry Bobby, I will split this thread soon..

erniegerdie · #12 26-Feb-2004, 05:19

Personally as your doing multiple links in one line I would do this:

HTML Code:


<html>
<head>
<style>
body {
  font-family: verdana;
  font-size: 10px;
  color: #6983B3;
  text-align: center;
}

.blah {
  padding-left: 10px;
  padding-right: 10px;
}

a {
  text-decoration: none;
  border: solid 1px #D1D1E1;
  background-color: #F5F5FF;
  padding-left: 5px;
  padding-right: 5px;
  color: #6983B3;
}

a:hover{
  border: solid 1px #6983B3;
  background-color: #E1E4F2;
  color: #22229C;
}
</style>
</head>
<body>
	<span class="blah">|</span>

	<a href="http://www.domain.com">Name</a>
	<a href="http://www.domain.com">Name</a>
	<a href="http://www.domain.com">Name</a>
	
	<span class="blah">|</span>
	
	<a href="http://www.domain.com">Name</a>
	<a href="http://www.domain.com">Name</a>
	<a href="http://www.domain.com">Name</a>
	
	<span class="blah">|</span>
	
	<a href="http://www.domain.com">Link 2</a>

	<span class="blah">|</span>
</body>
</html>

This removes the need for all those classes, and gets rid of all those horrible spaces, and font tags, (why use css and then put in <font> tags???)

Also you don't need to state twice:
font-family: verdana;
font-size: 10px;

Once is good enough here.

Actually I would probably put this in an unordered list, for more control.

Does it work in NS4 , dunno don't have it. I know it works in IE6 and Firefox. Good enough for me.

BobbyDouglas · #13 26-Feb-2004, 09:18

Thanks for the input.

This is an example of what you would add to your current site. Which is why I included:

HTML Code:

  text-align: center;
  font-family: verdana;
  font-size: 10px;

twice.

Since it is a seperate class for links, you should always specifiy it so users will not have to use the default body attributes.

The padding that CS2 also pointed out is a nice idea, but it is preference to me.

I will change and add <span class="blah">|</span> because it should be using it.
Thanks

erniegerdie · #14 26-Feb-2004, 11:51

I see your idea , although inheritance is an important part of css because it means you don't have to rewrite lines of code.

Although good ideas on the tutorials, i'll be keeping my beady eye open for the next one or maybe write one up myself so that you can have a go at me.

WaltP · #15 26-Feb-2004, 14:25

Just food for thought....

I understand the reluctance to write for NS4, but just keep in mind there's a segment of the 'puter population that do not have access to the newer computers where NS6 and beyond will work, so many are stuck in NS4 and below (shudder!!! makes your skin crawl, doesn't it?)

Granted it's a population segment you may not need to target (3rd world populations for example) but the segment is there.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread: