5 Replies Latest reply on Jan 1, 2009 2:26 PM by rams30

    Right way to add graphic sidebars around the container or any div for that matter?

    rams30
      *** Note sidebars maybe the wrong term and confuse you here ****

      If i want graphical sidebars around both sides of the main container div..... so that if i had a margin of say 20px on each side and the sidebars are maybe 8px in width, well i can create a small maybe 8px x 5 px image and repeat it the height of the conatiner div.

      Is there a done way to inset the graphic into the div and then have it scale to the height of the div.. Here is a pic example of what i am trying to do,

      http://i44.tinypic.com/1zdbr78.jpg

      Or look at this site, see the gradient faded red sidebar graphics around the whole contaner, they do a similar thing inside the conent div boxs as well.

      http://www.mayfindesign.com/
        • 1. Re: Right way to add graphic sidebars around the container or any div for that matter?
          Level 7
          Do you mean a border? When I need to do this, I use three graphics:

          1. A top capping graphic
          2. A vertically tiling center graphic
          3. A bottom capping graphic

          In ASCII art the three would look like this -

          |=================|

          | |

          |=================|

          where "|" is the vertical part of the border, and "=" is the horizontal part
          of the border. Since the middle graphic tiles vertically, it expands to
          fill the height of the container perfectly. The markup for this would look
          like -

          /* CSS */
          #topCap, #bottomCap, #middleContainer {
          width:300px;
          margin:0 auto;
          }
          #middleContainer {
          background-image:url(/images/middleBackground.jpg);
          background-repeat:repeat-y;
          }

          --------------------

          HTML

          <body>
          <div id="topCap><img src="/images/topCap.jpg" width="300" height="20"></div>
          <div id="middleContainer">....</div>
          <div id="bottomCap"><img src="/images/bottomCap.jpg" width="300"
          height="20"></div>
          </body>

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          ==================


          "rams30" <webforumsuser@macromedia.com> wrote in message
          news:gjidto$ku$1@forums.macromedia.com...
          > *** Note sidebars maybe the wrong term and confuse you here ****
          >
          > If i want graphical sidebars around both sides of the main container
          > div.....
          > so that if i had a margin of say 20px on each side and the sidebars are
          > maybe
          > 8px in width, well i can create a small maybe 8px x 5 px image and repeat
          > it
          > the height of the conatiner div.
          >
          > Is there a done way to inset the graphic into the div and then have it
          > scale
          > to the height of the div.. Here is a pic example of what i am trying to
          > do,
          >
          > http://i44.tinypic.com/1zdbr78.jpg
          >
          > Or look at this site, see the gradient faded red sidebar graphics around
          > the
          > whole contaner, they do a similar thing inside the conent div boxs as
          > well.
          >
          > http://www.mayfindesign.com/
          >
          >

          • 2. Right way to add graphic sidebars around the container or any div for that matter?
            rams30 Level 1
            Borders is what i mean doh... I created a 5px x 5px image, same for each side and it works apart from there is no right bar just top, left and bottom.

            Also by using,

            background-image:url(middleBackground.jpg);
            background-repeat:repeat-y;

            this scales the height of your graphic to the full height on the div but say the div has some padding top and bottom, maybe 10px each way so how would i reduce the height of this "repeated-y" graphic by 10px x 2 = 20 px?

            Pseudo Code,

            background-image:url(middleBackground.jpg);
            background-repeat:repeat-y - 10px at top and - 10px at bottom;

            or even,

            background-image:url(middleBackground.jpg);
            background-repeat:repeat-y -(minus) 'div padding at top' and - 'div padding at top at bottom';


            thanks again for you help..

            • 3. Re: Right way to add graphic sidebars around the container or any div for that matter?
              Level 7
              Uhh - read my post.

              --
              Murray --- ICQ 71997575
              Adobe Community Expert
              (If you *MUST* email me, don't LAUGH when you do so!)
              ==================
              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
              ==================


              "rams30" <webforumsuser@macromedia.com> wrote in message
              news:gjika7$8au$1@forums.macromedia.com...
              > Borders is what i mean doh... I created a 5px x 5px image, same for each
              > side
              > and it works apart from there is no right bar just top, left and bottom.
              >
              > Also by using,
              >
              > background-image:url(middleBackground.jpg);
              > background-repeat:repeat-y;
              >
              > this scales the height of your graphic to the full height on the div but
              > say
              > the div has some padding top and bottom, maybe 10px each way so how would
              > i
              > reduce the height of this "repeated-y" graphic by 10px x 2 = 20 px?
              >
              > Pseudo Code,
              >
              > background-image:url(middleBackground.jpg);
              > background-repeat:repeat-y - 10px at top and - 10px at bottom;
              >
              > or even,
              >
              > background-image:url(middleBackground.jpg);
              > background-repeat:repeat-y -(minus) 'div cell padding at top' and - 'div
              > cell
              > padding at top at bottom';
              >
              >
              > thanks again for you help..
              >
              >
              >

              • 4. Re: Right way to add graphic sidebars around the container or any div for that matter?
                Level 7
                There are many ways to skin the proberbial cat. In your 2nd url example, a
                body background image is centered and tiled down the page to create a
                graphic border on either side of a content division.
                http://www.mayfindesign.com/images/background.jpg

                Another approach is to simply style your divisions with CSS borders like so.

                #content {
                background-color: #FFF;
                margin: 1em 3em;
                color: #999;
                border-left: 4px solid #999;
                border-right: 4px dotted #999;
                padding-left: 1em;
                padding-right: 1em;
                }


                Does this help you?


                --
                Nancy O.
                Alt-Web Design & Publishing
                www.alt-web.com


                • 5. Re: Right way to add graphic sidebars around the container or any div for that matter?
                  rams30 Level 1
                  Yup that is good, i am releasing now there are many ways to do the same thing!