CSS Question

Any CSS gurus around?

If you take a look at our current corporate website at www.voicint.com you find nice gray shadow gradients at the left and right side. I implemented them via the background attribute of the containing table.

In an attempt to redesign to strict CSS and without layout driving tables, is there any way to get this effect back without tables?

Jonathan, your first two methods would not work as it's virtually impossible to get the outer two divs the same height as the middle one.

You pretty much need the content inside the divs with the background to get around that. The third method would work for that reason.

Here's something I cooked up in a minute. It's basically the same idea as Jonathan's third way except it keeps the two separate images.

Sven Groot wrote:

Jonathan, your first two methods would not work as it's virtually impossible to get the outer two divs the same height as the middle one...

Whoops...you're right. I use those methods for offsetting images. And not tiling background images. Wasn't thinking

Sven Groot wrote:

...
Here's something I cooked up in a minute. It's basically the same idea as Jonathan's third way except it keeps the two separate images.

This is a good example. But if the user wishes to have a fluid layout, it wouldn't work.

Instead, something like this could be done:

<style type="text/css">
     #container {
          margin: auto auto;
          width: 780px; // any value here to control overall width
     }
     #leftGradient {
          background-image: url(leftGradient.jpg);
          background-position: top left;
          background-repeat: repeat-y;
     }
     #rightGradient {
          background-image: url(rightGradient.jpg);
          background-position: top right;
          background-repeat: repeat-y;
     }
     #mainContent {
          padding: 10px;
     }
</style>

<div id="container">
     <div id="leftGradient">
          <div id="rightGradient">
               <div id="mainContent">
               content goes here
               </div>
          </div>
     </div>
</div>

Sven Groot wrote:

...
#content
{
   width: 667px;
   margin: 0 auto;
   padding: 0 50px;
   background-image: url(bak1.jpg), url(bak2.jpg);
   background-position: left, right;
}

But it's a long way off before the browser support for that will be sufficiently wide-spread that we'll actually be able to use that.

Certainly is MUCH better looking than my four-div solution in a previous post. Oh how sexy the future looks I can't wait till we get there.

EDIT: I suggest this method (3rd post down, in this thread) over the ones listed in this post.

Several ways.

3 divs all floated to the left, inside one div centered on the page. (A variant would be to float one to the left, and the other to the right)

<div id="container" style="width: 780px; margin: auto auto;">
     <div id="leftGradient" style="width: 10px; float: left; background..."></div>
     <div id="contentArea" style="width: 760px; float: left;">content</div>
     <div id="rightGradient" style="width: 10px; float: left; background..."></div>
</div>

Or one parent div in the center, with two absolutely placed child divs with left and right values to place them outside (superficially) of the parent div.

<div id="container" style="width: 760px; margin: auto auto;">
     <div id="leftGradient" style="position: absolute; left: -10px;"></div>
     <div id="rightGradient" style="position: absolute; right: 10px;"></div>
     content goes here
</div>

Many ways to do this.

Another is to have one div, with a solid background image (which contains both gradients) repeating vertically down the background of the entire div, then just set padding to be the same width of the gradients to keep content from going over the top of them.

<div style="background-image: url(Gradients.jpg); background-repeat: repeat-y; padding: 10px;">
     content goes here
</div>

jsampsonPC wrote:



Sven Groot wrote: Jonathan, your first two methods would not work as it's virtually impossible to get the outer two divs the same height as the middle one...

Whoops...you're right. I use those methods for offsetting images. And not tiling background images. Wasn't thinking

I figured as much.

This would be trivial with CSS3 because it allows multiple backgrounds on a single container. You'd need only the <div id="content"> and this CSS:

#content
{
   width: 667px;
   margin: 0 auto;
   padding: 0 50px;
   background-image: url(bak1.jpg), url(bak2.jpg);
   background-position: left, right;
   background-repeat: repeat-y, repeat-y;
}

But it's a long way off before the browser support for that will be sufficiently wide-spread that we'll actually be able to use that.

EDIT: I don't see the difference between your and my example. You've just moved the width to yet another container. Also, why do you write "margin: auto auto"? It's the same as "margin: auto" and setting the top/bottom margins to auto is the same as setting them to zero (so my own margin: 0 auto is slightly redundant as well, I'll agree). Not nitpicking or anything, just curious.

EDIT2: Oops, forgot the background-repeat. Fixed.

Sven Groot wrote:

This would be trivial with CSS3 because it allows multiple backgrounds on a single container. You'd need only the <div id="content"> and this CSS:

Ooh, I just noticed the CSS3 border-image property, that would be even better suited to this.

* on topic but not related

i needed to change the css of a live site - just to test - and was told to use the firefox dev toolbar.

i decided to load the ie dev toolbar instead - but couldnt figure out how to edit live - so the page would refresh after changing something

i ended up having to download the FF one - which was alot more simpler - and it had "edit css" right there.

change something - and the page refreshed with the changes

does IE dev toolbar do this?

* i found ie displayed all the info - but everything i clicked was unclickable...

?

jamie wrote:

* on topic but not related

i needed to change the css of a live site - just to test - and was told to use the firefox dev toolbar.

i decided to load the ie dev toolbar instead - but couldnt figure out how to edit live - so the page would refresh after changing something

i ended up having to download the FF one - which was alot more simpler - and it had "edit css" right there.

change something - and the page refreshed with the changes

does IE dev toolbar do this?

* i found ie displayed all the info - but everything i clicked was unclickable...

?

You can edit individual CSS values on the right hand panel. Live editing of CSS rules is functionality that we are looking at for a future version of the IE Developer Toolbar.
See http://blogs.msdn.com/ie/archive/2007/01/09/ie-developer-toolbar-beta-3-now-available.aspx for details of the latest update for the developer toolbar which includes the useful Style Tracer functionality so you can find where a style was defined.
Thanks
-Dave

Sven Groot wrote:

...
#content
{
   width: 667px;
   margin: 0 auto;
   padding: 0 50px;
   background-image: url(bak1.jpg), url(bak2.jpg);
   background-position: left, right;
   background-repeat: repeat-y, repeat-y;
}
...
EDIT: I don't see the difference between your and my example. You've just moved the width to yet another container. Also, why do you write "margin: auto auto"? It's the same as "margin: auto" and setting the top/bottom margins to auto is the same as setting them to zero (so my own margin: 0 auto is slightly redundant as well, I'll agree). Not nitpicking or anything, just curious.

Your example doesn't work in IE6, or FF2. The example I listed using four-divs (ugly, I know ) works in both browsers, and without issue. As for my putting "auto auto"...yeah, not needed, but I've made a practice of it over the years and it's a little hard to break I'm used to putting in differing values ("10px 20px"), so when I want to automate both, I usually stay with the dual-value pattern.

I've got no justification other than that for it

DMassy wrote:



jamie wrote: * on topic but not related i needed to change the css of a live site - just to test - and was told to use the firefox dev toolbar. i decided to load the ie dev toolbar instead - but couldnt figure out how to edit live - so the page would refresh after changing something i ended up having to download the FF one - which was alot more simpler - and it had "edit css" right there. change something - and the page refreshed with the changes does IE dev toolbar do this? * i found ie displayed all the info - but everything i clicked was unclickable... ?

You can edit individual CSS values on the right hand panel. Live editing of CSS rules is functionality that we are looking at for a future version of the IE Developer Toolbar.
See http://blogs.msdn.com/ie/archive/2007/01/09/ie-developer-toolbar-beta-3-now-available.aspx for details of the latest update for the developer toolbar which includes the useful Style Tracer functionality so you can find where a style was defined.
Thanks
-Dave

yes thats what i loaded.

thanks for reply dave. * that would be a good feature if youre considering it

www.getfirebug.com

far better than ie dev toolbar or that edit css thing.