Coffeehouse Thread

14 posts

Forum Read Only

This forum has been made read only by the site admins. No new threads or comments can be added.

CSS Question

Back to Forum: Coffeehouse
  • User profile image
    Be#

    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?

  • User profile image
    Sven Groot

    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.

  • User profile image
    jsampsonPC

    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 Tongue Out

  • User profile image
    jsampsonPC

    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>

  • User profile image
    jsampsonPC

    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 Tongue Out I can't wait till we get there.

  • User profile image
    jsampsonPC

    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>

  • User profile image
    Sven Groot

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

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

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

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

  • User profile image
    Sven Groot

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

  • User profile image
    LostIn​Tangent

    Wow, I was familiar with the multiple background images in CSS3 but I hadn't seen the border-image property. That is sexy as hell.

  • User profile image
    jamie

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

    ?

  • User profile image
    DMassy

    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

  • User profile image
    jsampsonPC

    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 Tongue Out) 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 Tongue Out 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 Smiley

  • User profile image
    jamie

    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

  • User profile image
    apoc

    www.getfirebug.com

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

Conversation locked

This conversation has been locked by the site admins. No new comments can be made.