Hey, I am slowly converting my site from a table layout to a CSS design and I want to know how I am best to go about converting the buttons along the top? Huxley I am fairly new to this CSS stuff, I am not sure if I should make a load of div tags or if it should be a list. Thanks in advance for any help.
If the buttons will stay as images just use div, imo Example usage the css .topnav { text-align:center; #this will center all elements in div tag, not only the text padding: 4px; #modify it for your needs margin: 4px; #modify it for your needs } .navimg { border: 0px; padding: 4px; #modify it for your needs } HTML: the html <div class="topnav"> <a hreff="menu1.html"><img src="images/menu1.jpg" class="navimg"></a> <a hreff="menu2.html"><img src="images/menu2.jpg" class="navimg"></a> ...... </div> HTML:
Personally, I would use the image as a background and use actual TEXT for the text, but if you wanted to keep using the images for that blurry font you could use a image replacement technique to handle it. In either case, the menu is a LIST, so it should be coded as a LIST... and the images are presentational so you should have actual TEXT in the list, with the images loaded in the CSS.
Yeah gobbly, the important thing is, there should be text even when you turn images off in your browser-- something ugly, blue and underlined to click on is fine. There are a multitude of ways to cover text with an image --> here's a bunch; look at the bottom. Using the Super-Technique (is there a name for it?) where all the button images are actually ONE image and moved around as needed, you could also have a cool hover effect (those buttons are just begging to turn red or green or silver on :hover). http://battletech.hopto.org/for_others/pixelcommander/template.html check out pixelcommander's menu. http://battletech.hopto.org/for_others/pixelcommander/images/navigation.jpg Wish I could figure out this thumbnail thing.