Different color columns/rows

[angelil6]

Hello all.

I need some help with CSS .


I am trying to color differently rows or columns using CSS .

I am trying things like:

.col-2{
background: none repeat scroll 0 0 #444444;
}

but I am doing something wrong.
can someone please show he how to do it right ?

Thanks
Angel

[edited by: alt131 at 5:52 pm (utc) on Jan 23, 2012]
[edit reason] Thread Tidy [/edit]

[lucy24]

You are in luck, because background color is one of the very few attributes you are allowed to apply to a column. Most aspects of tables work strictly by row.

Sometimes you will need to experiment to see whether you want

tr.special {blahblah}
or
tr.special td {blahblah}

[w3.org...]

(Yes, alt, I double-checked that I'm going to the 2.1 spec ;))

[angelil6]

thank you very much for your help.
I have solved it, and eventually decided to go with row.
I think it looks better.

please tell me what you think.

[edited by: alt131 at 5:53 pm (utc) on Jan 23, 2012]
[edit reason] Thread Tidy [/edit]

[Marshall]

Hi Angel and welcome to WebmasterWorld.

lucy is good for help and there is a lot of that here. I just wanted to mention so you know, TOS prevent posting links to personal websites. Do not be surprised if it is removed.

Shalom
Marshall

[lucy24]

... but as long as it was there, I took advantage of the unusual page title to do some browser-comparison.

Although it belongs in a completely different Forum, I'll dump the info here so it doesn't get lost.

Page source:

<title>{hebrew text 3} - {hebrew text 2} | {hebrew text 1} {english text}</title>

(#1 is one word, #2 is two words, #3 is four words)

Displayed title (top of browser window) in all browsers:

English text followed by Hebrew text. Or Hebrew text followed by English text, depending on how you look at it ;) (Is there a secret command that will make Chrome show a title bar? It just gives me tabs, even if there's only one.)

Truncated title when you open multiple tabs:

Safari: right to left beginning of Hebrew text (#1, #2 etc, space permitting) with ... to left
Chrome: left to right English text followed by left part (i.e. end) of Hebrew text with fade-out to right
Opera: left to right left part (i.e. end) of Hebrew text with ... to right
Firefox: right to left right part (i.e. beginning) of Hebrew text, but with ... to left (before beginning of text). Further quirk: when the tab gets very small, it gets confused about the punctuation, so - is replaced by | although the text is still in the right order.
Camino: same as Safari. (You'd expect the same as or similar to Firefox, but no.)

Internet Exploder 5.2 doesn't speak Hebrew and can't do tabs, but if I remember I'll try some assorted library computers.

... and that's why Angel's logs are jam-packed with consecutive visits from the same IP with six different UAs. Note the timestamp. I am not a robot ;)

[angelil6]

shalom

thank you for the knowledge.
that is new to me.
there are many things which I do not know about sites.

one of them is that my site comes up very s l o w l y .

I think that maybe there is a problematic module, but I don't know which or how to find it.

[Marshall]

Angel,

I didn't see a speed problem when I looked at it, for what it's worth.

Marshall

[lucy24]

one of them is that my site comes up very s l o w l y .

I noticed that too, but didn't know if it just lives on a slow server. Big difference among browsers, which may be telling.

:: detour to snoop into code ::

Holy smokes, that's a lot of divs. And a ### of a lot of nested divs. I count nineteen divs deep. And it validates :) Do you really need them all? Can't some of the attributes be shifted onto the table cells?

[angelil6]

thanks Lucy.

well, I am new to site building and to drupal.
so, I don't know how to do it differently.

do you think that my site is slow because there are 19 DIV's ?
I think that there may be a module that slows down my site.
but i am only guessing... :)

[alt131]

All the interesting things happen when I go away for a few days ... ;)

angelil6, welcome to WebmasterWorld. Marshall is right about links to personal sites and I've explained why in more detail in the sticky I've sent.

However the speed issue is interesting. While best practise is to avoid heavily nested divs (div-itis) for lots of reasons - including speed - browsers have got so fast at reading code that is unlikely to be the sole reason a site is loading slowly. I think it is much better to learn to code from scratch rather than using something like drupal, but there are still some useful checks you can do to track down any speed issues.

First, validate your HTML and also the css. Frequently heavily nested code has unclosed elements - and that does slow loading down because browsers have to "guess" where elements should close before laying out the page and applying styles.

Second, check the content - have images been optimised, javascript compressed/minified etc?

Third, check the site as it loads in something like pagespeed which is an add-on for Firefox. That allows you to identify which page components are taking the longest to load so you can focus on improving them - and will certainly identify if a particular module is the problem as you already suspect.

Lucy, feeling like the css2.1 "warden" he he ;)
But the info about browser behaviour and language is really, really interesting. Aside from the issue of characters that all users may not have, there is the whole issue of switching the language direction as well. Did you do any tests to see whether browser behaviour changes depending on what language is set for the document?

[Marshall]

alt131 - Does this mean you are going to share you paycheck with me this week, lol

Marshall

[lucy24]

First, validate your HTML and also the css.

Mwa ha, I tried the html validator and it came through squeaky clean :) in spite of the 177 divs nested up to 19 deep. And the table. Which nobody had the nerve to say was inappropriate for the chosen layout ;)

But the info about browser behaviour and language is really, really interesting. Aside from the issue of characters that all users may not have, there is the whole issue of switching the language direction as well. Did you do any tests to see whether browser behaviour changes depending on what language is set for the document?

Ooh, didn't think of that. The doc is set for Hebrew. It did occur to me to check if it behaves differently if the OS language as a whole is set for Hebrew (or, I guess, anything RTL).

And eventually :: cough, cough :: it occurred to me that I don't need to keep loading up Angel's page for this kind of testing. I can make a dummy page with the same header, and see how that behaves.

And, er, when I said "... to left" under Firefox, I meant "... to right". No, soldier, your other left.

I did think it was interesting that the bilingual page title flipflops in all browsers. And I know from personal experience that combining LTR text with generic (non-directional) punctuation can lead to strange and unwanted results-- especially in plain text, where you can't put up directionality flags.

[Marshall]

lucy,

My brain is running on low at the moment, but is there not a tag you can use in say a <span> to indicate a change in direction for specific text? I never needed it, but I recall seeing it once.

Marshall

[lucy24]

There are lots of different things you can do in HTML. In fact most browsers miraculously do it without any special instructions.* When I said "plain text" I meant literally plain text. The stuff with .txt at the end ;) But even there, I just remembered there's a pair of unicode characters that might work if a text reader needs a little more help. x200E and x200F.

Edit:

<bdo dir="rtl">Here is some Hebrew text!</bdo>

says w3c. I've definitely never had to use it. That's the dir attribute, no relation to the dir (for directory) tag. If you wrap the bdo tag around English, the English text runs backward. Letter by letter, darn it, not mirror-imaged.


* I'm not placing any bets on MSIE 6.

[Marshall]

I just did some quick checking. You can insert two options into <div>, <p>, <span>, etc to override the doctype declaration.

<p lang="en" dir="ltr">This part is in English.</p>

The reference on W3C [w3.org] uses English and Hebrew as examples.

Marshall

[angelil6]

thanks for the help and tests guys.
much of what you did, I didn't know was possible.
I am happy to learn that the HTML is squeaky clean :)

my page is DIV nested because I could not find a theme that did what I wanted, so I modified it myself until I got the display that I wanted.

is there a different way to do what I did ?
although from the looks of things, that is not the cause of the speed issue.
I will check the speed issue as Alt suggested later today.

Thanks
Angel

[angelil6]

Hi Guys.

I was ill, and doing some job hunting, so it took my a while...
I ran pagespeed , and the board was green.

[alt131]

Hi angelil6, pleased you are feeling better.

is there a different way to do what I did ?

Yes there should be. Usually heavily nested divs indicate the using divs rather than coding semantically, and also trying to take too much control over the styling rather than taking advantage of the elements natural flow. Sometimes divs and nested divs are necessary, especially when coding for older browsers, but given Lucy found very heavily nested divs (apologies Lucy I missed your earlier statement you'd validated), plus a table being used for non-tabular data, I would expect the coding on your site could be refined.

However, lets not forget you are new and started with a theme that I suspect was already really heavily nested. Yet you've still produced a result that validates which is hard to achieve - so take some credit. But of course, I prefer much more simple code, so I'd suggest you take what you've learned to the next step and look at how the code can be simplified.

I ran pagespeed, and the board was green.

If you mean you got all green "ticks" (check-marks) that's a great result! But sorry, Angel, I wasn't clear in my initial post. Look at the "Net" tab for the times components are taking to download.

@Marshall and Lucy Not forgetting HTML5 introduces the <bdi> element. That leaves <bdo> to set the direction for children, <bdi> as an inflow element that does not inherit the parent direction so you can isolate text direction for a span of text. Some very quick tests indicate it isn't well supported yet.

alt131 - Does this mean you are going to share you paycheck with me this week, lol

Wahoo leaping at that offer! Which means you are now officially "it" for the next time Lucy wants to slap someone with a wet haddock ;)

[Marshall]

Which means you are now officially "it" for the next time Lucy wants to slap someone with a wet haddock

Let me have legal look at that and get back to you ;)

Marshall