desperatly needing help with css

[OMorchoe]

Hi folks!

I am desperatly looking for some help.

While I can apply some small code snippets, or edit some easy parts in php or html, I am completely lost, as soon as it gets complicated with code. Especially at stylesheets.

I designed my own theme my WordPress Blog.
For several days now, I tried to work out the CSS for it. I'v read many webpages on the subject, tried it in WP itself, on an emulated server on my computer and even with Dreamweaver. But it just doesn't work out the way it should be.

I want to utelize the new WP 2.5 function on themplate-hirarchy to call upon the proper template, depending on what type of page you are looking for.
I would like to work with div-tags, containers and z-layers. Because there are several text-boxes, which are shifted a little bit.

Maybe someone could help me out here?
All I need is the CSS and an empty template for the div-tags (if you can add the condition for the WP template-hirarchy too, it would be lovely, but I can try figuring that out myself), so I know where to place which one.

I prepared a visual design aid, that shows all elements of the site:
http://www.rpg-community.com/admin/pagecsssettings.jpg

The site has a main-part, which is centered. The backgroundcolor of the site is: #231D29

The centerpart consists of many elements.
There is a picture as a background. Then there are several parts (i am calling them blocks), depending on what type of site is viewed. Every element inside a block is positioned in reference to the background/secondary-layer image of the block.

A regular page would show the BGIMG-Block, several Text-Boxes (TextBox1-5) for date, title, autor, some random quotes and the main-text. Below that is some y-repeated graphic (RIMG) depending on the length of the main-text shown. And it ends with the footer, that includes a link/button(CBIMG).

Thus a standard page is:
[BGIMG-Block + RIMG] + [FIMG]

It gets a little bit more complicated, as soon as it's a category (eg News) or if there are comments.

If its a Blog/Category with chronological postings, it starts out the same as a standard page (BGIMG-Block), then there is a graphical text-wrap that seperates one post visually from the other.
Every wrap holds an info-text-box (TextBox_a), link/button (CBIMG) to comments of that post, and date-, autor- and title-boxes, followed be the text-block (TextBox_b-e) of the post.
The text-area again is filled in the background with the 1px-line (RIMG) as necessary.
This block-set is repeated as needed, for each post.
After the last post the Info-footer-image (IFMG) with the info-text-box is inserted, followed by the actual footer.

So a category with three posts would be made of:
[BGIMG-Block + RIMG] + [Wrap-Block + RIMG] + [Wrap-Block + RIMG] + [Wrap-Block + RIMG] + [IFMG] + [FIMG]

Comments are not shown automatically. They are accessible through a link/button.
The comment-version of the site also starts off with the BGIMG, followed by an IFMG and the comment-blocks.
The whole comment-block is made out of three parts.
Each comment has its own block (CIMG_1/CIMG_2). The text-areas are more to the left on even comments and more to the right for uneven comments. Either one has a info-box (TextBox_a1/a2) for the name & url of commentator and a main-text area, where the actual comment is shown (TextBox_b1/b2). This repeates until there're no more comment. What follows next is the comment-enter-block. Where users can add comments. If the user is registered, its the ECIMG_1-block - which has one text-block (TextBox_EC) and an area to enter the comment (EC_1Form4). If the user is unregistered, it's the ECIMG_2 Block, which has four areas, where text can be entered (EC_2Form1-4). And at the end is the footer FIMG again.

So a post, with 5 comments, viewed by an unregistered user, would be made of:
[BGIMG-Block + RIMG] + [IFMG] + [CIMG_1] + [CIMG_2] + [CIMG_1] + [CIMG_2] + [CIMG_1] + [ECIMG_2] + [FIMG]

A post, with 1 comment, viewed by registered user, would be made of:
[BGIMG-Block + RIMG] + [IFMG] + [CIMG_1] + [ECIMG_1] + [FIMG]

The Button in the footer always show the appropriate button. On a normal page or at a post, it would be a button, that links to the comments. Viewing the comments, there would be a submit-button for an entered comment.

I thought it might be helpful to have all data in text-format as well, so here is a list of all elements and their properties (as far as I know them). You might have to add more. But that's the reason, I am looking for help

ALL: centered; w:766px;

BGIMG-Block:
- BGIMG: w:766px; h:100%

- LIMG: w:115px; h:100%; top:147px; left:9px

- Sidebar: w:115px; h:100%; top:147px; left:9px

- HIMG; w:583px; h:208px; top:155; left:150

- TextBox1: w:137px; h:23px; top:168px; left:582px
Text: centered/centered, weight:500, Arial, size:10, color:#232323

- TextBox2: w:203px; h:43px; top:233px; left:163px
Text: centered/centered, weight:600, Arial, size:12, color:#191919

- TextBox3: w:312px; h:68px; top:269px; left:379px
Text: centered/centered, weight:400; italic, Arial, size:10, color:#232323

- TextBox4: w:135px; h:30px; top:316px; left:168px
Text: centered/centered, bold, Arial, size:10, color:#232323

- TextBox5: w:531px; h:100%; top:369px; left:176px
Text: weight:500, Arial, size:11, color:#232323

- RIMG: w:766px; h:1px; y-repeat;

END ---

WIMG-Block:
- WIMG: w:766px; h:388px;

- TextBox_a - w:387px; h:57px; top:20px; left:167px
Text: centered/centered, Arial, size:9, color:#232323

- CBIMG: w:159px; h:29px; top:76px; left564px;

- TextBox_b - w:140px; h:29px; top:196px; left:581px
Text: centered/centered, weight:500, Arial, size:10, color:#232323

- TextBox_c - w:140px; h:29px; top:215px; left:157px
Text: centered/centered, bold, Arial, size:10, color:#232323

- TextBox_d - w:223px; h:47px; top:254px; left:292px
Text: centered/centered, weight:600, Arial, size:12, color:#191919

- TextBox_e - w:531px; h:100%; top:319px; left:176px
Text: centered/block(or left), weight:500, Arial, size:11, color:#232323

- add RMG- and WIMG-Blocks as needed

- IFMG: w:766px; h:92px;

- TextBox_a - w:387px; h:57px; top:15px; left:170px
Text: centered/left, Arial, size9, color:#232323

END ---

CIMG-Blocks:
- IFMG: w:766px; h:92px;

- TextBox_a - w:387px; h:57px; top:15px; left:170px
Text: centered/left, Arial, size9, color:#232323

- CIMG_1: w:766px; h:79px;

- TextBox_a1 - w:177px; h:34px; top:15px; left:522px
Text: centered/centered, Arial, size9, color:#232323

- TextBox_b1 - w:409px; h:100%; top:59px; left:310px
Text: centered/block(or left); weight:500, Arial, size10, color:#232323

- CRIMG_1: w:766px; h:8px; y-repeat (for lenght of text)

- CFIMG_2: w:766px; h:42px;

- TextBox_a2 - w:177px; h:34px; top:15px; left:183px
Text: centered/centered, Arial, size9, color:#232323

- TextBox_b2 - w:409px; h:100%; top:59px; left:162px
Text: centered/block(or left), weight:500, Arial, size10, color:#232323

- CRIMG_2: w:766px; h:8px; y-repeat (for lenght of text)

- CFIMG_2: w:766px; h:42px;

- ECIMG_1: w:766px; h:340px;

- TextBox_EC - w:205px; h:27px; top:149px; left:514px
Text: centered/centered, Arial, size9, color:#232323

- EC_1Form1: w:519; h:137; t:203; l:183

- - OR - -

- ECIMG_2: w:766px; h:340px;

- EC_2Form1: w:183; h:28; t:117; l:358

- EC_2Form2: w:183; h:28; t:150; l:527

- EC_2Form3: w:150; h:28; t:162; l:213

- EC_2Form4: w:519; h:137; t:203; l:183

FIMG-Block:
- FIMG: w:766px; h:131px;

- CBIMG: w:159px; h:29px; top:30px; left564px;

END---

Last but not least, there is one more version. Its for the front-page of the site.
It uses a different BGIMG and lot less text-boxes. Actually there is only one - the main-text area. Its more or less the welcome site.

Here is the link to the visual aid of it:
http://www.rpg-community.com/admin/c...ingsfrontp.jpg

I renamed every part (if its a different one), so that everything can be put into the same stylesheet.

I am also adding a zip file to this post, with all the elements (named like the elements in the visual aid) as dummy graphics, like they would appear on the site, so you can try it. And I have added each possible version with the dummy graphics as jpgs for reference.

The file: http://www.rpg-community.com/admin/csshelp.zip

As you can imagine, all this took me quite a while to put together. So I am surly not the lazy type and if I could handle code properly, I might not be needing to to all this, but would do the css myself (which would not even take a 10th of the time for someone, who can code and is familiar with stylesheets). So I really hope, that someone might be kind enough to put it all together in a working manner.

Thank you very much in advance!

[awatson]

Well, I don't really have time to look through all that - but here's a quick tip for css stuff. Install Firebug for firefox and use that to examine/test your css. It really makes it a lot faster to see what's inheriting what, etc.

[mwdesign]

Very good advice from awatson. Firebug saves me hours of work and it will ensure you get to grips with how the stylesheets are controlling the elements in the site very quickly.

mwdesign

[OMorchoe]

using firebug and the IE developer thing

after 8 days, 6-9 hours a day, of trying, I can't say, that they helped me much to acomplish what I need. Of course it makes it easier to try things, but after more then a week of pure frustration, the only thing i learned is, that the guys from W3C are plain morons and so are most of the browser-developers.
Its just plain crazy. There is no logic, no sense, no concept behind css.
I really don't mean to insult anyone and I can imagine, that its hard work to set such standards. But it would be cool, if they made sense to a normal being.

I am not kidding. The results I am getting vary from "wtf?" to things, that would boggle the mind of a quantum in terms of unpredictability.

Lets say, I am using an absolute position with defined top and left spacing. I apply this to several elements, each with its own positioning. They now should be on a certain spot inside the viewport, according to the top/left alignment, right? Wrong. They stack on each other. They change their sizes and just seem to do what they want. A graphic with a height of 200px, set this way, suddenly only shows 120px. Just as an example.
Its just idiotic.
Something that doesn't make sense, does not settle easy in my brain and that leaves me at the same point, I have been aprox. 80 hours of trial and error. Not a px closer to what I need.

Sure, it has to be me, since others seem to manage anyway. But I still think it could be done in a more logical way...

And I am not even starting on browser-differences...

[mwdesign]

With css start small and build it up. Because you are modifying the wordpress css sheet, strip it of all the margins and paddings and go from there. Absolute positioning is a nightmare for any level of css programming, avoid it if you can.

Also ie6 being the pain of them all will need a lot of hacks, because it never listens to normal css programming.

mwdesign