Hi,
I've been trying to understand the Faux Columns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->) article that I was recently referred to. I'm trying to extend the left and right hand columns from this site : <!-- m --><a class="postlink" href="http://www.danielklann.com/ftse">http://www.danielklann.com/ftse</a><!-- m -->. I think I need a 'dumbed down' version of the article.
First of all, regarding the column image: What width image should I create? Does the method described allow for different screen resolutions? Should I create an image that is orange for the first 175px and last 175px but what width should I make the 'content' area?
Secondly, I'm fairly new to CSS and don't understand the syntax the writer of the article uses:-
background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;
What does 'ccc' refer to? Is is a element ID? How would I alter this to work with my page?
I really appreciate any help offered
Dan#ccc is shorthand for the web-safe color #cccccc. A more obvious example would be #11AAFF would "contract" to #1AF.
Maybe what's not obvious in the article is that this trick only works for fix width pages. If you have 175px sides then you need to determine what you want for a center column width and, voila, everything is defined for you.Thanks Ray. I had read about that shorthand method but didn't make the connection - durrr!
I think I'm either too much of a beginner or that the faux column technique is not right for my needs. However, I did find a link to another technique in the discussion which I've managed to fudge into my site:-
The technique I used : <!-- m --><a class="postlink" href="http://www.pixy.cz/blogg/clanky/css-3col-layout/">http://www.pixy.cz/blogg/clanky/css-3col-layout/</a><!-- m -->
Cheers,
DanI think I'm either too much of a beginner or that the faux column technique is not right for my needs.
I suspect it's the latter. Pixy's got great stuff on his site.
I've been trying to understand the Faux Columns (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/fauxcolumns/">http://www.alistapart.com/articles/fauxcolumns/</a><!-- m -->) article that I was recently referred to. I'm trying to extend the left and right hand columns from this site : <!-- m --><a class="postlink" href="http://www.danielklann.com/ftse">http://www.danielklann.com/ftse</a><!-- m -->. I think I need a 'dumbed down' version of the article.
First of all, regarding the column image: What width image should I create? Does the method described allow for different screen resolutions? Should I create an image that is orange for the first 175px and last 175px but what width should I make the 'content' area?
Secondly, I'm fairly new to CSS and don't understand the syntax the writer of the article uses:-
background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;
What does 'ccc' refer to? Is is a element ID? How would I alter this to work with my page?
I really appreciate any help offered
Dan#ccc is shorthand for the web-safe color #cccccc. A more obvious example would be #11AAFF would "contract" to #1AF.
Maybe what's not obvious in the article is that this trick only works for fix width pages. If you have 175px sides then you need to determine what you want for a center column width and, voila, everything is defined for you.Thanks Ray. I had read about that shorthand method but didn't make the connection - durrr!
I think I'm either too much of a beginner or that the faux column technique is not right for my needs. However, I did find a link to another technique in the discussion which I've managed to fudge into my site:-
The technique I used : <!-- m --><a class="postlink" href="http://www.pixy.cz/blogg/clanky/css-3col-layout/">http://www.pixy.cz/blogg/clanky/css-3col-layout/</a><!-- m -->
Cheers,
DanI think I'm either too much of a beginner or that the faux column technique is not right for my needs.
I suspect it's the latter. Pixy's got great stuff on his site.