Guest swifter_uk Posted December 20, 2006 Share Posted December 20, 2006 If anyone can help with this I will be grateful.... Here is a screenshot of a homepage I am working on for a friends site. Here is screenie of cubecart homepage... I am trying to add in the navigation.gif I added this into the css but it messed up the page completely. #navigation { width: 700px; height: 60px; overflow: hidden; background-image: url("../images/event2_02_navigation.gif"); background-repeat: repeat-x; background-attachment: scroll; If anyone has any ideas where I should add the navigation.gif to get the continuity from the homepage I'll be very greteful Quote Link to comment Share on other sites More sharing options...
roban Posted December 20, 2006 Share Posted December 20, 2006 Your center column is pushing the right column out. What is it you'd like someone to tell you about this? Did you want your cubecart site to look like the site you're designing for your friend? What is the navigation.gif? Quote Link to comment Share on other sites More sharing options...
Guest swifter_uk Posted December 20, 2006 Share Posted December 20, 2006 Yes I am trying to replicate the design, the navigation gif is the lighter colored bars below the banner on the home page. Quote Link to comment Share on other sites More sharing options...
roban Posted December 21, 2006 Share Posted December 21, 2006 You can create your own. Look at the Killer skin. Remove the nav tabs by deleting the references to them in layout.css for instance: .topCatsTabLeft { background-image: url(../styleImages/backgrounds/catTabLeft.gif); background-repeat: no-repeat; width: 7px; } .topCatsTabMid { background-image: url(../styleImages/backgrounds/catTabMid.gif); background-repeat: repeat-x; } .topCatsTabRight { background-image: url(../styleImages/backgrounds/catTabRight.gif); width: 7px; background-repeat: no-repeat; Then change the css for the nav text as in: .txtCat { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #FFFFFF; text-decoration: none; Just a little idea of what you can do or to ad your gif in index.tpl: <div id="topHeader"> <div id="sessionBox"> <div style="padding: 15px 8px 15px 15px; margin: 0px;"> {SEARCH_FORM} {SESSION} </div> </div> </div> <img src="http://www.the link to your image here"> <div id="subSurround"> Something like that. You'd need to play around with the code to make it work the way you want it. Quote Link to comment Share on other sites More sharing options...
Guest swifter_uk Posted December 22, 2006 Share Posted December 22, 2006 Thanks for the comprehensive assistance Roban I finally managed to get the #navigation into the css correctly and am pleased with my efforts so far, I still have the tabs to add in but with your help I hope this is going to be fairly easy when I get round to it....thanks again! 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.