Okay, are you working in a designer like Dreamweaver or Frontpage (*shudder*) or an editor such as phpDesignerPro? The designers will rewrite anything you write, which is why I gave up on Dreamweaver MX, and it won't really matter what you do.
If you'd like some examples see this site, as they've free templates. Nothing against learning from someone else's tested work.
And a full XHTML Transitional template, courtesy of webstandards.org, is:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Conforming XHTML 1.0 Transitional Template</title></head><body></body></html>
Note the second line. I've found it to be important at times.
If I have time this afternoon I will make you an example. If not, someone else may have to show you working code. I threw one together just yesterday that worked, the exact manner I described, so I know it can be done.
__________________ Programmers are in a race with the Universe to create bigger and better idiot-proof programs, while the Universe is trying to create bigger and better idiots. So far the Universe is winning. - Rich Cook
After some experimentation I no longer can reproduce my last success, so I've no clue what I did anymore. I have a feeling I'm doing exactly the same thing now, but the results just don't work. Inline doesn't work either, because it forces a height collapse. My suggestion if you want resizing buttons like that, do it all with html, it's simpler.
There's no good way to do this. You'll have to give fixed width to block type elements. The best way to do this is to use an unordered list for your row of buttons. Then you set their display type to inline, the list-type to none, and then it might work. Otherwise, you'll just have to work on it. I've answered as best I know and I can't keep troubleshooting this.
Sorry, I've helped as best I can. Some things are just really ugly without going with CSS as much as you can. Just try one background image, just the gradient, with a 1 pixel border to a link element; inside the link (the caption) needs to be in a span with a 1px different color border. If you want padding, or explicit height, set the span to have it. This is off the top of my head, I have got to get this database class working, and I don't have time to support it today. Sorry.
__________________ Programmers are in a race with the Universe to create bigger and better idiot-proof programs, while the Universe is trying to create bigger and better idiots. So far the Universe is winning. - Rich Cook
The Following User Says Thank You to RobertK For This Useful Post:
Hi, I threw together a little something. I tried to recreate it like your screenshot.
It does not look like yours. It's missing the white inner border.
But I don't like the multiple tags and images needed to accomplish this.
Here I just use the button tag. Of course not the only way to go, but it's great to be able to use a proper html tag and get good looking buttons. No wrapping divs etc.
For me personally I like this way better. I keep all presentation in CSS (meaning I don't need anything extra in HTML for presentation purposes). I also use a transparent gradient png background image and have full control over the background color.
Take a look at the screenshot and then the code if you want.
P.S. I didn't realize that the middle button is page numbers (pagination). Hence will probably not work within a single button. I just read that you wanted to code a button, so I thought of nothing else.
But I'll post this anyway, maybe you can use it or someone else will find it useful. Feel free to use the png background image for buttons or navigation.
No problem mate. Great that you can use it. I agree with you that this works very well in contrast with having a lot of images and extra tags.
Oh, and btw. I do recommend using HTML 4 strict. That fixes alot of problems with HTML/CSS. I cannot say about XHTML transitional or otherwise.
But the difference between HTML 4 loose and strict is like night and day. With other than strict, then the browsers go into "quirks" mode. Which means that none of them even remotely display stuff consistently.
I use HTML 4 because XHML needs to be served as XHTML/XML (or something like that) and most servers don't. So your XHTML document is read as HTML anyway.
I try to write valid code though. It's not like I use the font tag :)
I'm not really an expert, but I feel that "You must write XHTML" is overhyped.
The conclusion I come to is that unless you have a compelling reason to use XHTML, you should continue to use HTML 4.01 (preferably Strict). Where you have reason to use XHTML 1.0 in production, you should be well aware of the problems dealt with in Appendix C of the specification and elsewhere in this document. Where you have reason to use a newer version of XHTML, you must provide alternative content for browsers that aren't aware of XHTML.
Join the friendly bunch on IRC...
Linear Mode
