logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Dreamweaver General
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 01-02-2011, 08:28 AM   #1
chome4
 
Join Date: Jan 2011
Posts: 5
Default MouseOver on Text: Rectangular Box

I can do Flash Text but how do you get a rectangular box to appear around text when hovering the mouse like on this site:

http://www.guardian.co.uk/

Under the heading guardian.co.uk the line of text on two levels has mouseovers that affect the background of the text as if it's in box.

How is this done?

Thanks in advance.
chome4 is offline   Reply With Quote
Old 01-02-2011, 08:47 AM   #2
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

It is done using the psuedo link styles in CSS. Something like (change to suit)...

Code:
a:link {padding: 5px 8px; display: block;}
a:visited {padding: 5px 8px;  display: block;}
a:hover {padding: 5px 8px; background-color: #f00;  display: block;}
a:active {padding: 5px 8px; background-color: #f00;  display: block;}
That is a very basic example but the theory is that the padding round the link and the display block rule creates the 'box' effect and the background colour on hover will make it coloured.

Last edited by Corrosive; 01-02-2011 at 08:48 AM.. Reason: added display rule
Corrosive is offline   Reply With Quote
Old 01-02-2011, 11:02 AM   #3
chome4
 
Join Date: Jan 2011
Posts: 5
Default

Thanks for that.
chome4 is offline   Reply With Quote
Old 01-02-2011, 11:16 AM   #4
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Quote:
Originally Posted by Corrosive View Post
It is done using the psuedo link styles in CSS. Something like (change to suit)...

Code:
a:link {padding: 5px 8px; display: block;}
a:visited {padding: 5px 8px;  display: block;}
a:hover {padding: 5px 8px; background-color: #f00;  display: block;}
a:active {padding: 5px 8px; background-color: #f00;  display: block;}
May I simplify this rule, Corrosive?
Code:
a {display: block; padding: 5px 8px}
a:hover, a:active {background-color: #f00}
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 01-03-2011, 12:12 AM   #5
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,200
Default

good to show both IMO, corrosives example is clearer to understand for some beginners but of course gentleone's example is neet clean code
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is online now   Reply With Quote
Old 01-03-2011, 09:01 AM   #6
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Quote:
Originally Posted by edbr View Post
good to show both IMO, corrosives example is clearer to understand for some beginners but of course gentleone's example is neet clean code
Yep, got it in one. I remember being totally baffled by shorthand when I started so I wanted the simplest example to help get the concept then shorthand is absolutely the way to go to keep pages light 'n' healthy
Corrosive is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:12 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com