vanz Posted October 24, 2010 Report Share Posted October 24, 2010 Hello, Trying to correct a problem with css sprites. There are 40px of white space between the the banner and horizontal bar. How can the horizontal bar be moved up while maintaining the horizontal rest/hover/active states? Thank you Quote Link to comment Share on other sites More sharing options...
falkencreative Posted October 24, 2010 Report Share Posted October 24, 2010 Do you have a link to the site? Or can you post the code + images? It would be helpful to see what you are talking about. Quote Link to comment Share on other sites More sharing options...
vanz Posted October 24, 2010 Author Report Share Posted October 24, 2010 Do you have a link to the site? Or can you post the code + images? It would be helpful to see what you are talking about. Hi falkencreative, I am hitting a wall in a few areas: 1) The white space between the navigation bar and the banner image 2) The banner_image is not inline with the ga_logo image 3) The background image is covering the background image, there is no visible border Thank you for the help, here is the: (following post is the css sheet) Index Page <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Genesis Anatomy</title> <META NAME="description" content="The Visual Anatomy Course"> <META NAME="keywords" content="anatomy, skeleton, muscles, bones, drawing"> <meta http-equiv="content-Type" content="text/html; charset=is-8859-1"> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <a href="http://genesisanatomy.com"'>http://genesisanatomy.com" title="The Visual Anatomy Course" id="ga_logo"></a> <a href="http://genesisanatomy.com" title="The Visual Anatomy Course" id="banner_image"></a> <div id="nav"> <ul> <li class="active"><a href="index.html">HOME</a></li> <li><a href="pages/skeleton.html">SKELETON</a></li> <li><a href="pages/muscles.html">MUSCLES</a></li> <li><a href="pages/joints.html">JOINTS</a></li> <li><a href="pages/veins.html">VEINS</a></li> <li><a href="pages/purchase.html">PURCHASE</a></li> <li><a href="pages/contact.html">CONTACT</a></li> </ul> <div id="nav_sub"> <ul> <li class="active"><a href="pages/skeleton.html">Osteology</a></li> <li><a href="pages/muscles.html">Myology</a></li> <li><a href="pages/joints.html">Syndesmology</a></li> <li><a href="pages/veins.html">Superficial Extremity Veins</a></li> <li><a href="pages/tools.html">Tools</a></li> </ul> </div> </div> <!-- MAIN DOCUMENT STARTS HERE --> <!-- MAIN DOCUMENT STARTS HERE --> <div id="centerDoc"> <h3>The Visual Course</h3> <p>...</p> <div class="footer"> © 2010 Genesis Anatomy.com – All Rights Reserved </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
vanz Posted October 24, 2010 Author Report Share Posted October 24, 2010 Do you have a link to the site? Or can you post the code + images? It would be helpful to see what you are talking about. Hi falkencreative, Here is the css sheet/page * { margin:0px; padding: 0px; } body { background-color: #193847; background-image: url(../images/bg_body.gif); } #ga_logo { background: url(../images/ga_logo.jpg) 45px 0 no-repeat; height: 115px; width: 305px; display: block; display:hidden; } #banner_image { background: url(../images/banner_image.jpg) 305px 0 no-repeat; height: 115px; width: 830px; display: block; display:hidden; } #nav { background: url(../images/bg_nav.jpg) 0 0 0 0 no-repeat; padding: 0 0 0 0px; height: 40px; width: 786px; margin: 45px; display: hidden; } #nav li { float:left; list-style: none; border-right: 1px solid #fff; } #nav li a { padding: 0 14.14px; height: 30px; display: block; line-height: 40px; font-size: 19px; color: #2a2c2b; text-decoration: none; font-family: vani; border-right: 1px solid #2a5f7a; border-left: 1px solid #2a5f7a; background: url(../images/nav_list.jpg) 0 0px repeat-x; } #nav li a:hover { background-position: 0 center; color: #214b61; } #nav li a:active { background-position: 0 bottom; color: #193847; } #nav_sub { background: url(../images/bg_nav.jpg) 0 0 0 0 no-repeat; padding: 0 0 0 0px; height: 40px; width: 786px; margin: 0px; display: hidden; } #nav_sub li { float:middle; list-style: none; border-right: 1px solid #fff; } #nav_sub li a { padding: 0 39.5px; height: 20px; line-height: 20px; font-size: 13px; color: #964b2e; text-decoration: none; font-family: vani; border-right: 1px solid #2a5f7a; border-left: 1px solid #2a5f7a; background: url(../images/nav_list.jpg) 0 0px repeat-x; } #nav_sub li a:hover { background-position: 0 center; color: #964b2e; } #nav_sub li a:active { background-position: 0 bottom; color: #a6502f; } Quote Link to comment Share on other sites More sharing options...
falkencreative Posted October 25, 2010 Report Share Posted October 25, 2010 I tried playing with your files, but unfortunately I really need those images you are working with. I'd suggest either zipping all of the html/css/images in one ZIP file and attaching the file, or posting the files to a temporary directory on the server and giving us a link. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.