Hey, i'm new to doing a total XHTML / CSS design myself. I've been using tables in the past and want to make the jump over. I'm having trouble with a little portion of it though. Basically, I have a navigation bar. I have the images sliced up what I believe to be the proper way. On each side of the link, I need an image. My original thinking was to do something like this, but i'm quite certain it is bloated and unnecessary (or is it?) <div id="nav"> <img src="leftsideoflink"><a href="#" style="background-image: url(#)">link</a><img src="rightsideoflink"> </div> Is there a way to do this and have it automaticlaly stick in the left and right side of the "buttons" automatically? Perhaps using <li> or <ul> ?
Generally, I'd suggest using a background image (non-repeating), unless the image is a critical part of the content. You can then specify padding to push the content of the element away from the image. I assume that you'll be having many links in this navigation area? It's common to use a ul / li structure for a list of navigation links. This will help solve the problem that each element can have only one background. You could then have the left-side image on the li element, and the right-side image on the anchor element. Check out this demonstration to get an idea of using a single image: http://simplebits.com/notebook/2004/07/18/clickable.html
Done properly you don't even need to use separate images. Create them as a stripe one atop the other at a fixed height with a little 'extra' padding between them... you can then set your anchor to either float:left; or display:inline-block, fix the height, pad the left side, then slide the background-position as appropriate. Means you only need one image file, which in turn means only one handshake to the server instead of many, speeding page load. (especially if they use similar colors meaning you only need one palette instead of a bunch of them, smaller total filesize too?) If you look at this VERY MUCH WIP copy of one of my clients forums, you'll notice that all the images for the page are in only three or four files. The forum: http://www.cutcodedown.com/devForum The relevant images: Menu background http://www.cutcodedown.com/devForum/Themes/tw2/images/mainMenu.png Button icons used across entire page http://www.cutcodedown.com/devForum/Themes/tw2/images/buttonIcons.png Images used to build most of the page background: http://www.cutcodedown.com/devForum/Themes/tw2/images/themeImages.png Category status icons http://www.cutcodedown.com/devForum/Themes/tw2/images/categories.png Four files and that's 90% of the forum skin images... all handled by simply layering elements and sliding their backgrounds around... or nesting an element inside one set to overflow:hidden and sliding it around.