Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
Thread: banner table not working
04-14-2009, 12:00 AM #1
- Join Date
- Apr 2009
- Thanked 0 Times in 0 Posts
banner table not working
I have a few sites.
The one I'm working on now is giving me trouble and I really can't understand why.
I just started it so it's mainly templates and stuff, but the banner at the top is made out of many img files put into a table. I've done this technique before and it worked fine but for some reason it will not work on this site.
Basically I am getting a large white line through the top and bottom rows of images.
Link to my site where the banner works: http://www.stevemedleyphotography.com
Link to the site I started where the banner is not working: http://www.desyriarpg.com
04-14-2009, 08:52 AM #2
- Join Date
- Mar 2008
- Midlands, UK
- Thanked 29 Times in 28 Posts
It makes no sense to be using CSS without taking advantage of CSS positioning, then cramming your header contents into a table.
I won't go into the specifics of the folly of using tables for layout. I'm sure there will be plenty only too glad to post links to a plethora of articles on "why tables for layout is stupid". It isn't really that stupid - but there is a better way...
Suffice to say, I would recommend knocking out the table and using margins or relative positioning to place your images over the top of a #header div background. If possible, use real text for your links and if you really must have a specific font, then you can cast them as gif images with transparent backgrounds. Either that, or you can slice up your design image (as you have done) and place just the link images exactly, with absolute positions or floats and plain old margins, on top of the background.
Personally, I'd use a list (I notice there is CSS code there for one, but no list included in the mark-up) for the header links. Float the li element left and position the list itself, centrally. Use li padding to space the images.
Either way, you'll get an elegant result with CSS, using very much less code, with fewer 'moving parts' to go wrong (as you've recently experienced).
I hope this helps. Look for some tutorials on CSS positioning. If you get stuck, you know where we are.
Last edited by Doctor_Varney; 04-14-2009 at 09:12 AM. Reason: Improvement
Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item. Computer use often leads to verbal abuse and occasionally physical violence towards the object. Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.