Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
Thread Tools Display Modes
Share |
  #1  
Old 05-11-2011, 10:09 AM
Phil in Abbeville Phil in Abbeville is offline
Contributing Member
 
Join Date: 07-05-08
Location: Lafayette, LA
Posts: 237
iTrader: 0 / 0%
Positioning a Disjointed CSS Rollover

Could I get some help?

I'm trying to make a disjointed CSS rollover using a background image.

http://www.pressdat.com/mtw2/Mercs/Irish_Kerns.html
and
http://www.pressdat.com/mtw2/Mercs/Mercenary_Crossbowmen.html.

The problem I'm running into is positioning the span once it's activated.
If you visit the links you'll see what I mean.

If I understand correctly, the position is inherited from the containing block, when in this case, seems to change with each list item.

Can I make the positioning relevant to something else, like the <ul>?

Anyway here's the CSS code for that.

Code:
/********************* Merc Pages **********************/ #navlist { padding: 0 1px 1px; margin-left: 0; font: bold 12px Verdana, sans-serif; height: 300px; float: left; } #navlist li { list-style: none; margin: 0 0 0 30px; display: block; } #navlist li a { font: 1.4em/1.3em Arial, Helvetica, sans-serif; background: #fff; text-decoration: none; } #navlist li a:link { color: #000; } #navlist li a:visited { color: red; } #navlist li a:hover, #navlist li a:active, #navlist li a:focus { color: #000; visibility: visible; } #navlist li a span { visibility:hidden; display:block; position: absolute; color:#000; width: 411px; height: 250px; } #defaultImage { visibility:visible; display:block; position: absolute; margin: 0 0 0 200px; width: 415px; height: 250px; background-image:url(../Mercs/images/regions/map1.jpg) ; } #navlist li a:hover span, #navlist li a:active span, #navlist li a:focus span { visibility:visible; background-image:url(../Mercs/images/regions/map1.jpg) ; margin: 0 0 0 200px; } #navlist li a:hover span#scot { background-position: 0 250px; } #navlist li a:hover span#ire { background-position: 0 500px; }
I'll take any advice you can give me.
 
Reply With Quote

Advertisement

Advertisement

Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
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

Similar Threads
Thread Thread Starter Forum Replies Last Post
image rollover???? ball420 Web Design Lobby 2 03-02-2007 05:48 PM
Rollover with no title JM Rosón Coding Forum 3 08-24-2006 02:30 AM
Css - TD Rollover Pimpen 2010 Coding Forum 12 03-30-2005 10:50 PM
Rollover Effect DOS Coding Forum 14 01-07-2005 12:31 AM
CSS positioning vs. table positioning downtroden Coding Forum 2 07-19-2004 11:40 AM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 10:15 AM.
Powered by vBulletin
Copyright © 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC