SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast dnectom's Avatar
    Join Date
    Dec 2005
    Location
    Lincolnshire, Uk
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Possible? "rounded corners of css along with a background image"

    Am curious if anyone can think of a method...
    I have a box which has an unlimited width.. i.e. liquid layout
    So i am needing to have one top image set to the background that has repeat-x
    However along with this i am in need of two end images for either side that...
    Any idea how to go about this??
    I basically need rounded corners of css along with a background image

    Any help would be appreciated

  2. #2
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am thinking about make a div of the box header, and insert your background image that'll repeat over and over again. Then place one corner img float left and the other one float right. I've never tried this though, don't know if it'll work.

  3. #3
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Dnecton

    I did this as an experiment a while ago, But i cant seem to find the files anywhere!

    The way to do what i THINK you are trying to do is the following! ...

    First of all, You need 1 Div. The div needs to contain the background color.

    After that, you need 4 classes. Each one representing a different rounded corner of the shape.

    Code:
    <div id="main">
      <div class="top-left"></div>
      <div class="top-right"></div>
          CONTENT
      <div class="bottom-left"></div>
      <div class="bottom-right"></div>
    </div>
    I can't even begin to think of the CSS behind it as im absolutely nackered! I'll have a good look for the files i did a while ago and ill send them across.

    Good look

  4. #4
    SitePoint Enthusiast dnectom's Avatar
    Join Date
    Dec 2005
    Location
    Lincolnshire, Uk
    Posts
    37
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah yea was thinking the same sorta idea myself. T
    Thanks everyone for the input

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try SitePoint's own "Spanky Corners"
    http://tools.sitepoint.com/spanky/

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    ohio
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You don't need that many divs... I would try the "Spanky Corners" It seems to be a good solution as any since there are quite a number of ways you can accomplish what you wish. I normally just use a div with 4 "corner" gifs that I absolute position within the container div and then a content div within.

    <div id="main">
    <img src="tl.gif" class="fl" />
    <img src="tr.gif" class="fr" />
    <div id="main-content">
    Content goes here
    </div>
    <img src="bl.gif" class="fl" />
    <img src="br.gif" class="fr" />
    </div>

    the classes fl and fr are for float: left; and float: right; using the "opposite floats"

    This solution has worked for me for small boxes that I have had to use for some projects but please keep in mind, I have not really put it through a workout though. But at least this can give you some "ah ha eureka" moments hopefully.


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
  •