SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS round boxes sort of

    right now i have about 3 or 4 different box styles.

    This means i have to use 8 divs for each different boxes, plus 8 images.

    This is kind of bad for optimization.

    I was wondering if there was an easy way to make the rounded boxes. Or even if i could use 1 image and put all 8 images in that one image and then move it around to the correct location. "CSS Sprites".

    I dont mind the 8 divs but i would like to be able to put the images all in 1 image and just move it around to use the image i need.

    Thanks.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    This means i have to use 8 divs for each different boxes, plus 8 images.

    This is kind of bad for optimization.
    You can say that again, you should only need 4 divs Maximum, if you want to constrain either the height or the width you can get by with 2.
    Can you show your code please?

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <div class="box">
    <div class="lb"><div class="rb"><div class="bb"><div class="blc">
    <div class="brc"><div class="tb"><div class="tlc"><div class="trc">
    
    <div class="stuff">stuff goes in here.</div>
    
    </div></div></div></div>
    </div></div></div></div>
    </div>

    Code:
    .box{
    position:relative;
    height:1&#37;;
    background:#010000 url('bg.jpg') repeat;
    }
    .tlc, .trc, .blc, .brc {
    height: 1%; 
    background-repeat:no-repeat;
    }
    .tlc {
    background:transparent url('tl.gif') no-repeat scroll left top;
    }
    .trc {
    background:transparent url('tr.gif') no-repeat scroll right top;
    }
    .blc {
    background:transparent url('bl.gif') no-repeat scroll left bottom;
    }
    .brc {
    background:transparent url('br.gif') no-repeat scroll right bottom;
    }
    .tb, .bb {
    background-repeat:repeat-x;
    }
    .tb {
    background:transparent url('t.gif') repeat-x scroll;
    }
    .bb {
    background:transparent url('b.gif') repeat-x scroll center bottom;
    }
    .rb {
    background:transparent url('r.gif') repeat-y scroll right center;
    }
    .lb {
    background:transparent url('l.gif') repeat-y scroll;
    }

    thats basically it right there.

    Theres an image for each side and corner basically. Top, left, right, bottom are a small image that repeats x and y depending what side.

    Corners are just 1 image rotated basically.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Sorry, I'll need to see what the images for the boxes look like also to see if we can simplify the markup.

    But, you can combine a corner and adjacent side's images into one and then you can get away with 4 divs.
    If you are wanting to keep the width consistent it's possible to only use 2 divs.
    Another way to simplify the markup is to to use the inner elements like a boxes heading to style the top corners of the box.

    Can you post a link to the page you are working on?

  5. #5
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,342
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hey, I'm in that third list

    Stu Nichols has some examples here also.

    There's no getting away fro the fact that when you need an image in each corner then you have to find hooks to hang them on. If you plan it carefully you can use existing elements as in Stu's example but this does mean that if you re-use it elsewhere then you have to have the same structure which may not always be possible.

    I think Dr John's links above give examples of everything anyway

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok thanks guys, yea ive looked at those links before. And in the 3rd one thats where i think i found the one with the 8 divs.

    Because these are special corners and not just 1 color its hard to do.

    They are fluid horizontal and vertical direction.

    Ive found many that are fluid in both directions, but they only use 1 color and no background images.

    i really dont mind all the divs, but i do want to be able to use css sprites. And the way its setup now i cant do that. But ill keep looking and maybe theres a way. I really dont want to use javascript either.

    i believe i used this one http://www.sperling.com/examples/box/ but i slightly modified it.

  8. #8
    SitePoint Zealot Wynnefield's Avatar
    Join Date
    Sep 2005
    Location
    North Texas
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure if this would help, but we were looking for a method to create a resizeable "id card" in one of our web apps at the office, so they asked me to see what i could mark-up with xhtml and css. Resizeable in the event I resize the width of my browser window and the content would flow smoothly within the card, and it would not disrupt the margins, rounded corners, etc.

    Due to time constraints, I some similar mark-up via Google and created containers within containers. The only drawback is the absolute positioning of the photo background (and fixed size of the photo) and the pngfix java script for the photo background png image.

    And since our primary audience unfortunately uses IE6, I linked two stylesheets in the mark-up as well: 1 for IE, and another for all other browsers. Opera on Win was not available at the time, so I did my design using Firefox, and when I tried opening in Opera this evening, the mark-up crapped out.

    If interested, please feel free to take a look at Resizeable ID Card with Rounded Corners. Suggestions to reduce mark-up are always appreciated.

    Thank you,


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •