css / php / tables used for header??

[FordElement]

Wouldn’t say I’m a noob (a little long-winded, sure) but I’m running into a bit of a wall with a challenge I’ve decided to put on my plate. I am trying to re-learn what little CSS I once knew (PHP is new to me) and I wanted to do something specific to the header on a site I’m working on:

codenamemama.com – it’s WordPress + the Atahualpa theme.

My idea was to do something very similar to the header on digwp.com – as in a header/logo image on the left, and (the tricky part for me) a separate item on the right with links to the RSS feed and perhaps navigation links.

I want the header image of the cute kid to be in an area on the left 2/3 of the header area, and then create a box w/ an RSS link, etc. in the right 1/3 (or thereabouts)

As I’m still learning, I pulled up the source and style.css to see exactly how digwp.com accomplishes that feat so smoothly.
I could tell that the site has two separate DIV in the header DIV to separately handle both the Logo/Title element on the left, and the Book element on the right. I totally get that. nice call. it’s simple and does exactly what the authors dreamed up.

Well, I have a sandbox install on my local machine (same setup as the live URL above) and started looking at the html/css regarding how the header is coded (and seeing if I could just create something similar, "split" my header DIV into two "child" DIV, so to speak) and I found several thing that make me pause before proceeding:

1. the style.css for the URL only contains 3 classes regarding image alignment. MUCH less info stated in there than what I expected.
2. the other 99% of the CSS seems to be in a file called CSS.php
and, the biggie
3. here is some code that makes me wonder if "splitting" the header is even possible when using this theme, that being the use of the <tr> and <td> properties… lots of places I visit looking for tutorials, etc. say don’t use tables, etc. b/c they are antiquated and not the "best" way to code the site.

Code:

So, I guess my question is, why is the theme set up with DIV ID’s for wrapper, container (which I easily recognize as CSS syntax) then all of a sudden it uses a TABLE (which I easily recognize as ooooold-skool HTML)?

Am I going to be able to create separate two areas within the header and keep the above code relatively intact, or am I going to have to scrap most of the code listed above and come up with my own?

(or, would i be better off choosing another theme that already has a more-updated XHTML-CSS foundation in the header that I can more-easily tweak to suit my needs?)

Any comments are welcome, I guess I am just looking for help from a "philosophy" standpoint and not necessarily from a "here, code it exactly like this" (I don’t expect anyone to fix it for me) – if the thought of making the table code bend and twist into something modern/manageable makes you want to yak, tell me, and I’ll save my time/effort. ;)

[AshtonSanders]

I have no idea about the theme you are using.The cool thing about HTML/CSS is that there really isn’t a "wrong" way. Sure there are "better" ways to do something, but if it displays the same in every browser, who cares how you did it? ;)

Anyway, with that said, there are a hundred ways to do this, but I would just stick with some simple positioning to get the different elements to be where you want them to be. I’m not sure how familiar you are with positioning, but I’d run through this quick tutorial: http://www.barelyfitz.com/screencast/ht … sitioning/

Let me know how it goes.

[FordElement]

Thanks for the link, i got a couple ideas from it regarding ways to position a div for the banner and one for RSS links. I will try to get that coded and working this weekend and check back.

also, thanks for the "as long as it works" idea, I will do some tinkering and see what happens

[AshtonSanders]

"FordElement" wrote:

also, thanks for the "as long as it works" idea, I will do some tinkering and see what happens

Haha, yea. CSS can be forgiving in that way… the unfortunate part is that so many browsers display it a little differently. Because of some of the padding+float quirks in IE, I’ve been sticking with positioning where possible.

Happy styling, [img]http://www.websitesinaflash.com/images/thumbsup.gif[/img]

[Author]

Posts