Forum Moderators: not2easy
Doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Here is the CSS code, my rollovers are in my header....
HEADER:
#header{width:775px; margin:0 auto; background:#000 url('../images/jwmain.jpg') no-repeat; height:795px; position:relative}
#header ul {width:775px; height:23px; position:absolute; top:126px; left:46px; background:url('../images/b_buttons.jpg') no-repeat 0 0;}
#header ul li{float:left}
#header ul li.home{width:106px; height:23px; margin-right:34px}
#header ul li.home a{width:106px; height:23px; display:block; background:url('../images/btn_home.jpg') no-repeat 0 0; text-indent:-20000px}
#header ul li.home a:hover{width:106px; height:23px; background:url('../images/btn_home_over.jpg') no-repeat 0 0;}
#header ul li.bio{width:106px; height:23px; margin-right:35px}
#header ul li.bio a{width:106px; height:23px; display:block; background:url('../images/btn_bio.jpg') no-repeat 0 0; text-indent:-20000px}
#header ul li.bio a:hover{width:106px; height:23px; background:url('../images/btn_bio_over.jpg') no-repeat 0 0;}
#header ul li.work{width:106px; height:23px; margin-right:35px}
#header ul li.work a{width:106px; height:23px; display:block; background:url('../images/btn_work.jpg') no-repeat 0 0; text-indent:-20000px}
#header ul li.work a:hover{width:106px; height:23px; background:url('../images/btn_work_over.jpg') no-repeat 0 0;}
#header ul li.resume{width:106px; height:23px; margin-right:34px}
#header ul li.resume a{width:106px; height:23px; display:block; background:url('../images/btn_resume.jpg') no-repeat 0 0; text-indent:-20000px}
#header ul li.resume a:hover{width:106px; height:23px; background:url('../images/btn_resume_over.jpg') no-repeat 0 0;}
#header ul li.contact{width:106px; height:23px; margin-right:33px}
#header ul li.contact a{width:106px; height:23px; display:block; background:url('../images/btn_contact.jpg') no-repeat 0 0; text-indent:-20000px}
#header ul li.contact a:hover{width:106px; height:23px; background:url('../images/btn_contact_over.jpg') no-repeat 0 0;}
--- Now the problem I am having is my images will appear BUT they will not link or show my rollovers when I hover over the images. I did some trial and error things like messing with this portion of the code...
***#header ul {width:775px; height:23px; position:absolute; top:126px; left:46px; background:url('../images/b_buttons.jpg') no-repeat 0 0;}
#header ul li{float:left}***
--- I would change the width to lower values and the rollovers would appear and work right but they would be jumbled up under each other and not in a horizontal line.
--- Any assistance at all? Thank you for your time!
[edited by: Bomber at 2:38 am (utc) on Jan. 8, 2009]
--- Up in the code I was just changing everything to test it and this is what did the trick.....
#header ul {width:775px; height:23px; position:absolute; top:126px; left:46px; background:url('../images/b_buttons.jpg') no-repeat 0 0;}
#header ul li{float:left}
--- Just delete absolute and I went with RELATIVE. Still being mostly new I have no clue what that exactly does but it made it work perfect! So the correct code is as follows......
#header ul {width:775px; height:23px; position:relative; top:126px; left:46px; background:url('../images/b_buttons.jpg') no-repeat 0 0;}
#header ul li{float:left}
