Hey guys, I'm in a predicament! I'm trying to build a website with the header that looks like the following when one is on the 'Markets' page: I'm going to have page-specific CSS in the actual html file and an external CSS files for things shared by all pages (fonts, etc). So anyway, for the HTML file my code is the following: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Respro-M Limited - Markets</title> <link href="./generic.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #tabwrapper {float:right;} #tabwrapper div{display:inline;} #tabwrapper ul { font-family:arial; font-weight:bold; margin:0; padding:0; } ul.tabs { list-style:none; padding:0; margin:0; } ul.tabs li{ text-decoration:none; display:inline; } ul.tabs li a { font-size:14pt; color:white; text-transform:uppercase; text-decoration:none; } #products{ background:url(./images/tab_products.gif) no-repeat; height:40px; width:105px; } #markets { background:url(./images/tab_markets.gif)no-repeat; height:40px; width:104px; } #contact { background:url(./images/tab_contact.gif) no-repeat; height:40px; width:91px; } </style> </head> <body> <div id="sitewrapper"> <div id="content"> <!-- Site Header: logo & navigation --> <div id="logo"> <p><img src="./images/logo.gif" width="248px" height="86px" alt="Respro-M Logo" /></p> </div> <div id="tabwrapper"> <ul class="tabs"> <li><div id="products"> <a href="#">Products</a> </div></li> <li><div id="markets"> <a href="#">Markets</a> </div></li> <li><div id="contact"> <a href="#">Contact</a> </div></li> </ul> </div> </div> </div> </body> </html> Code (markup): and if you need it, the code of the external is: @charset "utf-8"; /* generic.css */ body { background:url(./images/bg.gif); background-repeat:repeat-x; background-color:#FFFFFF; text-align:center; } #sitewrapper { width:819px; margin:0; } #logo { position:absolute; top:-24px; left:230px; } Code (markup): Now, the problem (http://resprom.co.uk/markets.html) is that the header tabs resize themselves with the text even though the size is specified. But when the #tabwrapper div{display:inline;} is removed they are the correct size but appear vertically. A Catch22?! Any solution and advice is very much appreciated. I'm fairly new to CSS and so don't really know what to do. Thank you in advance
I think part of the problem here is how you are approaching the situation. You are using buttons and ID's unique to each, meaning not only is it harder in the future to change the buttons, but also that your images are non-generic... and you need unique images for each and every page, in a situation where all you probably need is one or two images to do the whole thing. Of course, I probably also wouldn't have as many containing 'wrappers' either. Gimme a few, I'll toss together an example.
Ok, here's how I'd code it. http://battletech.hopto.org/for_others/SiftW/template.html As with all my examples the directory http://battletech.hopto.org/for_others/SiftW is unlocked so you can grab any needed files (check the images directory for new versions of your images as smaller .png), validates XHTML 1.0 Strict, and works flawless IE 6, 7, FF, Opera and Safari. No guarantees made for how badly IE 5.x is gonna **** it up. You'll notice there's a LOT less HTML, though there is a bit more CSS - but that CSS makes the entire thing dynamically generated on page, so you aren't 'tied' to unique images for each menu item. Just change which one has the class 'current' and it will composite it on page, no extra image manipulation needed. Simple, no? Oh, and to see WHY I coded all this the way I did, take a look at it with images turned off. Hope this helps.
Thanks for the solution, deathshadow - could you be any more awesome?! I've worked through the code you've given me and am continuing with the website. Thanks for your time!