homepage Welcome to WebmasterWorld Guest from 54.196.195.158
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Different color columns/rows
angelil6




msg:4409592
 10:07 am on Jan 22, 2012 (gmt 0)

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




msg:4409691
 9:46 pm on Jan 22, 2012 (gmt 0)

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




msg:4409701
 10:30 pm on Jan 22, 2012 (gmt 0)

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




msg:4409706
 11:36 pm on Jan 22, 2012 (gmt 0)

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




msg:4409744
 2:28 am on Jan 23, 2012 (gmt 0)

... 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




msg:4409778
 6:06 am on Jan 23, 2012 (gmt 0)

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




msg:4409779
 6:19 am on Jan 23, 2012 (gmt 0)

Angel,

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

Marshall

lucy24




msg:4409781
 7:55 am on Jan 23, 2012 (gmt 0)

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




msg:4409806
 10:37 am on Jan 23, 2012 (gmt 0)

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




msg:4409974
 6:20 pm on Jan 23, 2012 (gmt 0)

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




msg:4410013
 8:26 pm on Jan 23, 2012 (gmt 0)

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

Marshall

lucy24




msg:4410069
 11:43 pm on Jan 23, 2012 (gmt 0)

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




msg:4410081
 12:13 am on Jan 24, 2012 (gmt 0)

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




msg:4410143
 5:32 am on Jan 24, 2012 (gmt 0)

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




msg:4410146
 6:10 am on Jan 24, 2012 (gmt 0)

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




msg:4410164
 8:38 am on Jan 24, 2012 (gmt 0)

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




msg:4410747
 5:03 pm on Jan 25, 2012 (gmt 0)

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




msg:4411263
 9:18 pm on Jan 26, 2012 (gmt 0)

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




msg:4411271
 9:30 pm on Jan 26, 2012 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved