sandeman Posted January 5, 2007 Share Posted January 5, 2007 Perhaps I am jumping in way over my head, but I have this style to consider:http://jasonsandeman.com/Gaming/image_bin/qabbal_portal.jpgSo what this is; its a body tag with an img background. I want to place the icons on the page to be rollover effects, using a list. So far, this is as far as I have gotten:http://jasonsandeman.com/qabbal/Now, here is the code to consider:portal.css body { background-color:#000000; background-attachment: fixed; background-image: url(http://jasonsandeman.com/qabbal/images/q_images/images/qabbal_bg.jpg); background-repeat: no-repeat; background-position: center; }/* Div for the whole shebang */#container { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-weight: normal; text-decoration: none;}/* here is where I attempt the placement of the footer. I want it to be right about the middle portion. */#footer { font-size: 80%; bottom: 60pt; text-decoration: none; color: #666; position: absolute; height: 30px; width: 100%; text-align: center; }/* Tightening up the line spacing. I tried this with ems, but it did not seem to work 30% seems good. */p { line-height: 30%;}/* now for the icon nav code /* nav.css /* CSS Document *//* this will be the Navigation CSS socument, where I try to make the navigation button system */<!--/* CSS from tutorials www.alsacreations.com/articles *//* To be replaced with my code with the small navigation bar - specifically the positioning, and the spacing on the image itself. To think, one image! No Rollover GIFS! */ul, li { /* use of a list for the menu */list-style-type: none; /* clean up of the liste */margin:0;padding:0;}ul {position: absolute; /* ppositionning for IE5 et IE5.5 Make sure this is at the spot that you want it.*/top: 400px;left: 390px;background: transparent url(../images/q_images/images/big_navbuttons.png) top left no-repeat; /* general menu background*/width: 500px;text-align: center;}li {float: left;}li a { /* buttons dimensions and definitions */display: block; /* <a> block to give it its dimensions */height: 140px;width: 122px;color: #fff;font-size: 14px;line-height: 50px; /* line height to avoid paddings */font-weight: bold;font-family: arial, serif;text-decoration: none;}li a:hover {background: transparent url(../images/q_images/images/big_navbuttons.png) top left no-repeat;}/* replace all of this with the roll over images and stop messing around. */a#forum:hover {background-position: -500px 0%; /* background move for each button -- Is this from the left?*/}a#campaign:hover {background-position: -628px 0%;}a#download:hover {background-position: -753px 0%;}a#contact:hover {background-position: -879px 0%;}--> and finally, the html file: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Qabbal</title><link href="css/portal.css" rel="stylesheet" type="text/css" /><link href="css/nav.css" rel="stylesheet" type="text/css" /></head><body><!-- I must remember to place things nicely, in valid fomart, and clean code. :) --><div id="container" align="center"><!-- Here is where I am putting the Nav element for this Page - nav_big --><div id="navbar_big"> <ul> <li id="forum"> <a href=""> </a> </li> <li id="campaign"> <a href=""> </a> </li> <li id="download"> <a href=""> </a> </li> <li id="contact"> <a href=""> </a> </li> </ul></div><div id="navbar_small"></div><div id="footer" align="center"><p>A campaign setting for Fantasy Grounds Virtual Table Top for pen and paper Role-Playing Games</p><p>© 2007 by Stuart J. Miller and Jason Sandeman<p> </p></div></div></body></html> Sorry for the long post, but I really want to figure this out. I am currently reading about 4 books on CSS, and taking another course via DVD. I am sure that I can figure out how to do it, but sometimes someone pointing me in the right direction never hurt. I know I may be getting in over my head, but that is also the way that I learn, by doing, screwing up, then figuring it out. :)I know it may seem strange that I spilt the navigation into a seperate css file, but I did this, because this will page will take others to the other 4 sections, and there will be a similar nav bar, with smaller icons, to keep the whole site consistent. I figured it would be easier to control that with a sheet that is seperate. :)Sandeman Link to comment Share on other sites More sharing options...
pulpfiction Posted January 5, 2007 Share Posted January 5, 2007 try doing this [bolded part] for all you css element ID's....#navbar_big ul li#forum a { background-image: url(../images/forums.png); background-repeat: no-repeat; }#navbar_big ul li#forum a:hover { background-image: url(../images/forums_rollover.png); background-repeat: no-repeat; } Link to comment Share on other sites More sharing options...
sandeman Posted January 5, 2007 Author Share Posted January 5, 2007 Hmm. I can see that I am still learning. I can't believe I forgot to tell about the <a> tag.I fixed this in the css file, but now I have a problem. The nav bar is not showing on the page. I am seeing the container for it, but there is nothing there.Sandeman Link to comment Share on other sites More sharing options...
sandeman Posted January 6, 2007 Author Share Posted January 6, 2007 Well, I believe I have finally figured it out. As a bonus, I found a way to make the menu based off of ONE image, and eliminated the need to have a thousand gif images. That was the highlight of this excercise.Now, the only things I have that are a little confusing to me is the layout on different browsers. I have updated the code above to the changes, and I was wondering if anyone can point me in the right direction.Specifically, things look great in the browser of FF2.0. When I resize the window though, the icons move around. What I am looking for is to have everything remain in the center. Another problem is the cross browser. I checked things out in IE7, and they seem to be good, except the positioning of the icons are not that great. It is even worse in IE6.Does anyone know of a good way to fix this cross-browser? Or is there a link to somewhere where there will be a lot of examples and explanations?My google-fu is good, but there are so many conflicting stories, I am having trouble sorting it out. :)Cheers,SandemanThe site: www.jasonsandeman.com/qabbal Link to comment Share on other sites More sharing options...
jlhaslip Posted January 7, 2007 Share Posted January 7, 2007 I think http://www.cssplay.co.uk has an example or two of image replacement menus. They are a really decent site to learn techniques from. Highly reccomended. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now