Jump to content


Photo
- - - - -

[CSS] - [Rollovers] - [CLawes]


  • Please log in to reply
No replies to this topic

#1 CLawes

CLawes

    Young Padawan

  • Members
  • Pip
  • 25 posts
  • Location:UK

Posted 14 October 2004 - 10:30 AM

This tutorial will show u how to make Image free, rollover box with text!

Example:

HERE

Code:

.main a {
background-color : #6385E7;
color : White;
font: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
display: block;
border: 1px solid Black;
padding-top: 3px;
padding-bottom: 3px;
text-decoration: none;
padding-right: 3px;
padding-left: 3px;
width: 60px;
font-weight: bolder;
text-align: center;
}

.main a:hover {
letter-spacing: 4px;
background-color: #4B72E3;
color: Black;
display: block;
}


Copy the code into your style sheet, then in dreamweaver apply the style "main" to the text you wont to have this effect.

a and a:hover
a = a link
a:hover = the link when the mouse is over it.

More in a then a:hover
there is more information in .main a then .main a:hover because the extra information has been cared on to the hover link so you only need to change the things you wont to change.

Problem?
-Your text will not change in till it is a link.
-Preview it (it will look a bit diff rent in dreamweaver)

BY FUZZUK :D




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users