CSS question

[Alexander Ross]

is there a way to "combine" styles. I have several styles:

td.bottomleft {
vertical-align: bottom;
text-align: left;
}
td.bottomright {
vertical-align: bottom;
text-align: right;
}

td.redbg {
background-color: #990000;
}
td.whitebg {
background-color: #FFFFFF;
}

But what do I do when I want to start combining these... I can't imagine
that I have to make styles called td.bottomleftred and td.bottomleftwhite
etc... The 'C' in CSS gives me the feeling that I'm missing something
crucial here.

Please be as explicit as possible - I like to know why things are the way
they are.

Thanks,
Alex

[darrel]

> But what do I do when I want to start combining these... I can't imagine

> that I have to make styles called td.bottomleftred and td.bottomleftwhite
> etc... The 'C' in CSS gives me the feeling that I'm missing something
> crucial here.

First of all, using CSS to explicity color something, like TD.redbackground,
while is acceptable, isn't the best way to write css, as it makes it
difficult to change attributes.

For instance, I'd suggest calling them td.evenrow and td.oddrow. That way,
if, down the road, you don't like red, you can change the class without it
having a contradictory name. It's good habit to name your classes in terms
of what they are rather than what they look like.

Now, as for combining, you can. Just list the classes separated by a space:
class="redbg bottomright".

You can also cascade. For instance, you can give the table a class, and then
the TR and TDs will inherit that, along with anything you explicitely style
in the TD and TR tags.

You can apply both an ID and a Class to an element, but note you can only
use each ID once in a document.

-Darrel

[darrel]

> This makes a lot of sense. Now, in terms of stratagy or "proper css use"
(I

> realise how subjective that is) I want to use my CSS not to format a data
> table, but rather a layout table (created by fireworks) the concept of
> "nam[ing my] class in terms of what they are" doesn't really apply.

I agree with that. If you are using your table for layout purposes, then so
be it.

> Let me try to clearify. I have a site design (in fireworks) that has

quite

> a few large (and scalable) areas that are solid colors. So instead of
> exporting images that are of that color, I set those slices (in fw) to

HTML

> rather than image.

Right, but what *are* these TDs? Is it a header? Specific info? Or just
decoration? Even if it is just decoration, then you still can get away with
classes like 'topDecorativeTD' so you can still go from red to blue without
confusion.

All that said, it's not really a big deal. I'm getting into religion here,
not practical issues...I think they way you are doing it is just fine. ;o)

> those random <td>s, would it be "best" to create a seperate style for each
> of these <td>s?

If a style is different then, yea, I'd probably make it a separate style
declaration. Grouping styles is OK, but that can get confusing for the next
person that comes along and has to update your site.

> And if so, how do I name what they "are" as they really
> aren't anything (or atleast anything that can be easily described - as
> evident by the verbiage in this post needed to describe them)

Right, I'd just name like you've been doing. It's not a huge deal.

-Darrel

[mrcoachk]

Okay, so I created a site using CSS and it looks great on Internet Explorer.
Then I found out that my friend who uses Firefox has a very different look on
it. The background color for the container wasn't covering the entire area,
the background color for the body has emerged into the container frame, and the
copyright info. that I added for the footer is placed acutally outside the
footer frame....so strange. Same thing happend on Netscape and Safari too.
It's not like you can't use CSS on those browers, is it? I've checked somebody
else's site with CSS and they looked the same on all those browsers. How come
mine looks so different? Any idea or suggestions?

[danilocelic *TMM*]

mrcoachk wrote:

> Any idea or suggestions?

As this forum is focused on Dreamweaver extensions, it's not the best
place to get a good response to your question. Please ask general
Dreamweaver usage questions, and general web design in the following forum:
[url]http://www.macromedia.com/cfusion/webforums/forum/categories.cfm?catid=189[/url]

Also you wil *have* to post a link to your page for people to see what
is wrong with it, and point out the specific area(s) that are having issues.


Danilo

[s_mccoy]

web page in question: <a
href="http://www.meltingcrayons.com/metamatrix">MetaMatrix home page</a>

I have a web site home page I'm currently working on with a three column
news/links/everything but the kitchen sink section beneath a main marketing
message image. I got the three columns working just fine but I need to have at
least the middle column extend to 100% of the div#content wrapper (the white
area behind all three columns) so the blue box (will eventually be blue borders
on the left and right) fills in the remaining space beneath the sliding menus.
I also need to do this in a way that doesn't make the blue box shift as well.
The news section is not a known height, it's going to eventually be generated
dynamically so this column is likely going to be the one which dictates
div#content's height. All of the CSS is still embedded in the page until I get
everything working and can build a template. Any suggestions would be greatly
appreciated.

[Al Sparber- PVII]

See my answer on the Adobe GoLive forum :-)

Or go here:
[url]http://www.projectseven.com/tutorials/css/pvii_columns/index.htm[/url]



"s_mccoy" <webforumsuser@macromedia.com> wrote in message
news:drb0si$sk5$1@forums.macromedia.com...

> web page in question: <a
> href="http://www.meltingcrayons.com/metamatrix">MetaMatrix home
> page</a>
>
> I have a web site home page I'm currently working on with a three
> column
> news/links/everything but the kitchen sink section beneath a main
> marketing
> message image. I got the three columns working just fine but I need to
> have at
> least the middle column extend to 100% of the div#content wrapper (the
> white
> area behind all three columns) so the blue box (will eventually be
> blue borders
> on the left and right) fills in the remaining space beneath the
> sliding menus.
> I also need to do this in a way that doesn't make the blue box shift
> as well.
> The news section is not a known height, it's going to eventually be
> generated
> dynamically so this column is likely going to be the one which
> dictates
> div#content's height. All of the CSS is still embedded in the page
> until I get
> everything working and can build a template. Any suggestions would be
> greatly
> appreciated.
>

[Wayne Gibson]

Hi,
I'm new to FlexBuilder. I was wondering if there was any help as to what
properties the styles can have.

I'm currently trying to define a style for a button that makes the label
appear at the bottom of the button. I've tried the following in the
default.css:

..TestButton
{
fillColors: #00ff00, #00ff00, #990000, #990000;
labelPlacement: bottom;
}

and also the following in the mxml file:

<mx:Style>
.TestButton2
{
fillColors: #0000ff, #0000ff, #990000, #990000;
labelPlacement: "bottom";
}
</mx:Style>

In both cases, the colour of the button changes. But not the
labelPlacement.

Anybody got any ideas?

Thanks

Gibbo