Guest eLlIoTg Posted April 18, 2006 Share Posted April 18, 2006 I really need some help!!!!! My site is www.gadget-garage.co.uk I have a few problems: See the boxes on the left hand side the titles of them are to close to the side and it makes it look unprofessional. Also i was wondering if anyone knew how to get the Top Level Categories in a side box(FREE MOD) If anyone could help me please do THANKS VERY MUCH eLlIoTg Quote Link to comment Share on other sites More sharing options...
Robsta Posted April 18, 2006 Share Posted April 18, 2006 Regarding the title spacings. In your layout.css file, look for ".boxTitleLeft, .boxTitleRight {" and add "padding-left:4px;padding-top:2px;" without the quotes. Alter the numbers to suite your needs. Quote Link to comment Share on other sites More sharing options...
Guest eLlIoTg Posted April 18, 2006 Share Posted April 18, 2006 Regarding the title spacings. In your layout.css file, look for ".boxTitleLeft, .boxTitleRight {" and add "padding-left:4px;padding-top:2px;" without the quotes. Alter the numbers to suite your needs. i have done that look on www.gadget-garage.co.uk it is all amess Thanks anyway Robsta Quote Link to comment Share on other sites More sharing options...
Robsta Posted April 18, 2006 Share Posted April 18, 2006 It looks ok to me.... what are you seeing? I've tried it in IE and Firefox... looks fine. Quote Link to comment Share on other sites More sharing options...
Guest eLlIoTg Posted April 18, 2006 Share Posted April 18, 2006 It looks ok to me.... what are you seeing? I've tried it in IE and Firefox... looks fine. on the right hand side there are bits sticking out i can definstely see it (unless its my laptop) check again Quote Link to comment Share on other sites More sharing options...
Robsta Posted April 18, 2006 Share Posted April 18, 2006 It looks ok to me.... what are you seeing? I've tried it in IE and Firefox... looks fine. on the right hand side there are bits sticking out i can definstely see it (unless its my laptop) check again Ahh I see.... yes. Didn't notice it. Try reducing the width and height settings in the same area. Quote Link to comment Share on other sites More sharing options...
Guest garysmith Posted April 18, 2006 Share Posted April 18, 2006 Hi eLlIoTg I see what you mean but you have to look very hard to see it so its not totally a disaster. It looks to me as if the Title (image?) width is a bit biger than the box size , but that is only a guess. Is the title an image? if so then it may need a touch of tweeking. Very nice looking site by the way, very simple and fresh design, I like it alot. Gary Quote Link to comment Share on other sites More sharing options...
Guest eLlIoTg Posted April 18, 2006 Share Posted April 18, 2006 It looks ok to me.... what are you seeing? I've tried it in IE and Firefox... looks fine. on the right hand side there are bits sticking out i can definstely see it (unless its my laptop) check again Ahh I see.... yes. Didn't notice it. Try reducing the width and height settings in the same area. i have it didn't work could it be anything to do with me making a new image to make the box square instead of having the curved corners if u no wot i mean Quote Link to comment Share on other sites More sharing options...
Guest garysmith Posted April 18, 2006 Share Posted April 18, 2006 That shouldn't be the problem. Which skin are you modding? Gary Quote Link to comment Share on other sites More sharing options...
Guest eLlIoTg Posted April 18, 2006 Share Posted April 18, 2006 That shouldn't be the problem. Which skin are you modding? Gary it is the killer skin but i copied it all renamed it and called it Gadget but it is the same as the killer skin just edited alot Got me Quote Link to comment Share on other sites More sharing options...
Guest garysmith Posted April 18, 2006 Share Posted April 18, 2006 I will PM you, can't promise but I will do my best to help Gary Quote Link to comment Share on other sites More sharing options...
Guest eLlIoTg Posted April 18, 2006 Share Posted April 18, 2006 thanks gary and robsta Quote Link to comment Share on other sites More sharing options...
Robsta Posted April 18, 2006 Share Posted April 18, 2006 Ok... your CSS... .boxTitleLeft, .boxTitleRight { background-image: url(../styleImages/backgrounds/boxTitleBg.gif); font-family: Arial, Helvetica, sans-serif; font-size: 70%; color: #B5D100; width: 175px; height: 15px; padding-left: 4px; padding-top: 2px; font-weight: bold; } .boxContentLeft, .boxContentRight { border-left: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; background-color: #FFFFFF; padding-left: 5px; padding-top: 9px; padding-bottom: 5px; width: 168px; } These boxes should be identical in width. But the title is 175px and the content is 168px. Padding and borders can make the boxes that bit wider (by the selected px figure).... so try experimenting with making the padding-left/right and widths equal between the two. Quote Link to comment Share on other sites More sharing options...
Guest garysmith Posted April 18, 2006 Share Posted April 18, 2006 Hi Put your image into the unmodded killer skin and it works fine so your image is not the problen. Is I said earlier your box width and image width are not the same and this is causing the problem. Robsta should get kudos as well for spotting it. Try replacing your styles and for your boxes to put them back to the original and then if you change anything make sure you do the same for title and boxes Here are the orininal CSS for these elemants. .boxTitleLeft, .boxTitleRight { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 70%; color: #000000; background-image: url('../styleImages/backgrounds/boxTitleBg.gif'); width: 175px; height: 13px; padding-top: 2px; padding-left: 5px; background-repeat: no-repeat; font-weight: bold } .boxFootLeft, .boxFootRight { background-image: url('../styleImages/backgrounds/boxFootBg.gif'); width: 175px; height: 12px; padding-left: 5px; background-repeat: no-repeat; margin-bottom: 10px } .boxContentLeft, .boxContentRight { border-left: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; background-color: #FFFFFF; padding-left: 5px; padding-top: 9px; padding-bottom: 5px; width: 168px; Hope this is of help. Gary Quote Link to comment Share on other sites More sharing options...
markscarts Posted April 18, 2006 Share Posted April 18, 2006 Elliot, you could save a teeny bit of bandwidth, etc., by doing away with the top and bottom box images - since you are making the box rectangualer with no rounded corners. All you need is the CSS border properties to do this. The images are only necessary in Killer to acheive the rounded corners. If you are proficient with CSS (you seem to know your way around a little), I would strongly suggest just re-designing these boxes without the images. It will be much easier then to change the width of each element in the box, since you would not be confined to a boxFooter.gif or some such image width . . . only divisions with borders . . . the cleanest solution for the look you have there ;) Quote Link to comment Share on other sites More sharing options...
Guest garysmith Posted April 18, 2006 Share Posted April 18, 2006 can you send a copy of your layout.css ?? Quote Link to comment Share on other sites More sharing options...
Guest garysmith Posted April 18, 2006 Share Posted April 18, 2006 Sorry, Ive had one of those days but I have sussed it now. You are missing the line: background-repeat: no-repeat; In your .boxTitleLeft, .boxTitleRight This is how the section should read: .boxTitleLeft, .boxTitleRight { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 70%; color: #000000; background-image: url(../styleImages/backgrounds/boxTitleBg.gif); width: 175px; height: 13px; padding-top: 2px; padding-left: 5px; background-repeat: no-repeat; font-weight: bold; } Quote Link to comment Share on other sites More sharing options...
Robsta Posted April 18, 2006 Share Posted April 18, 2006 DOH! didn't notice the lines were not from CSS borders. DOH! DOH! and DOH! again. I think I'll get an early night! :zorro: Quote Link to comment Share on other sites More sharing options...
markscarts Posted April 18, 2006 Share Posted April 18, 2006 And I repeat, best practice for what you are doing is use pure CSS with no images. No rounded edges = no images necessary ;) Quote Link to comment Share on other sites More sharing options...
Guest eLlIoTg Posted April 19, 2006 Share Posted April 19, 2006 thanks Quote Link to comment Share on other sites More sharing options...
Guest eLlIoTg Posted April 19, 2006 Share Posted April 19, 2006 i have sorted it out thanks everyone has anyone got a free mod to get top level cats in side box thanks Quote Link to comment Share on other sites More sharing options...
Guest garysmith Posted April 19, 2006 Share Posted April 19, 2006 I have done this before but I will have to wait till I get home from work as they are on my test server at home. No access from work (damn IT Services!!!) If you have not got a solution before then I will gladly post it. Gary Quote Link to comment Share on other sites More sharing options...
Guest eLlIoTg Posted April 19, 2006 Share Posted April 19, 2006 thanks garysmith and Robsta i have finally done it. 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.