Rank: Member
Joined: 4/10/2006(UTC)
Posts: 462
|
Hi,
I'm trying to give the left column of my site a background color.
Problem I am running into is that the left column is typically not the longest column on a page. I have attempted to set the div height to 100% however, I knew from previous experience that this would make likely fail.
Does anyone know of a workaround that would allow the left column div to fill the height of its container (typically the wrapper divs) without re-working the whole site using tables? |
Netriplex Corporation<br /> |
|
|
|
|
|
Rank: Member
Joined: 7/15/2004(UTC)
Posts: 368
|
You can make a "faux column" by adding a repeating background color or image to the container div which does span the page. Google "faux column" for many detailed tutorials. Here's probably the best reference - http://alistapart.com/articles/fauxcolumns/.widecontentwrapper or .maincontentwrapper depending on your needs should work. |
|
|
|
|
|
|
Rank: Member
Joined: 4/10/2006(UTC)
Posts: 462
|
Problem I have with this method, is some pages of my site are 2 columns only, others are 3 columns and the product pages are just a single column so if this will work as I know the wrapper divs appear on several different style pages. However I will take a look tonight in more detail and attempt this workaround.
Thanks for your input.
I'm taking other suggestions for the moment if anyone else wants to chime in... |
Netriplex Corporation<br /> |
|
|
|
|
|
Rank: Member
Joined: 7/15/2004(UTC)
Posts: 368
|
You could use your masterpages to control which pages gets have 1, 2 or 3 column setup and then apply the faux column accordingly. |
|
|
|
|
|
|
Rank: Member
Joined: 4/10/2006(UTC)
Posts: 462
|
Hi Wanita,
What I was thinking was just going through the master pages and changing the wrapper div classes to column count specific wrappers.
The problem I have with that and this method in general (although it may be the only way unless someone suggests otherwise) was that I was hoping to be able to "dynamically" add a content as I saw fit to display additional content to our site users. My thinking along these lines was if we had some type of promotion that we put into place and wanted to advertise a product that we were trying to clear from inventory, we'd be able to just throw in an additional column with a html content box and we'd be all set. If we use this workaround everything we added/removed a "promo" column, we'd need to change the underlying theme. |
Netriplex Corporation<br /> |
|
|
|
|
|
Rank: Member
Joined: 5/24/2004(UTC)
Posts: 4,147
|
I don't know that you'll be able to just throw in an extra column via the admin whenever you like, even with tables. Column widths and the general layouts have to be taken into account.
The background-image method isn't a workaround, it's really the most accepted way to create a column. You could use javascript to automatically adjust the hight of your DIV, but I'd only do that as a last resort, and tables should never even be considered.
There's always a solution, it just may take some thinking outside the box depending on the situation. If you have a specific example, that might help us. |
|
|
|
|
|
|
Rank: Member
Joined: 4/10/2006(UTC)
Posts: 462
|
Hi Cliff,
Throwing in an extra column with tables would actually be much harder than by using divs which is why I'm trying to find a solution that satisfies both of my needs.
The width issue, I think would be solved using divs by just not specifiying a specific width on the "main" content column and leaving a style definition with a column width and other appropriate properties for the column that would be shown only when specials were occurring.
I am also aware of the javascript method, however I would most definitely prefer to use an all CSS approach if I can find something "outside the box" to make this work.
Otherwise, background image it is. |
Netriplex Corporation<br /> |
|
|
|
|
|
Rank: Member
Joined: 4/10/2006(UTC)
Posts: 462
|
How about this solution, a little more involved, but is there any harm in setting the background style directly in the div style attribute rather than in the stylesheet other than design standards?
My thinking is that I can rely on .net to set the background image dynamically based on the number of columns that are detected on the page? |
Netriplex Corporation<br /> |
|
|
|
|
|
Rank: Member
Joined: 5/24/2004(UTC)
Posts: 4,147
|
A DIV within a DIV generally can't be one of two or more columns unless it has a set width.
Inline styles are fine, if you need to do it that way. You may indeed need something more dynamic if you're wanting to insert columns on the fly. My initial reaction would be to use .Net to change/add a class name on the containing DIV based on how many columns are to be displayed. This way, you can determine the containing DIV's background pattern and the widths of it's containing DIVs in the stylesheet. |
|
|
|
|
|
|
Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.