SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Addict eJM's Avatar
    Join Date
    Feb 2004
    Location
    teh Ether
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rounded corner modules with images.

    I have seen quite a few rounded corner boxes using CSS or javascript and solid colors, but I guess the image based boxes aren't even discussed any more. At least I am having difficulty finding any.

    The box I am looking for needs to be fluid both horizontally and vertically. The background is a tiled 5x5 image that is already incorporated into the skin used on my site and the borders of the box are a fade from the dark colored panel background to the lighter colored tiled background. This is an example:



    This has to be done using the Content Management System (vBadvanced 2.20) for my site, www.TheFloorPro.com. The modules I plan to use it on are the articles and main content of various pages. Right now there are limited options for display of the modules, either no module shell, but the background is too dark, or the standard module shell with 2 different background choices. I want to have one more option that is a cross between the no shell look and one of the shell backgrounds.

    How the no shell option looks: http://www.thefloorpro.com/about.php
    How the shell looks : http://www.thefloorpro.com/vbgooglemap_instructions.php

    Can I do this using all divs? I either have to do the styling in-line or add new CSS to the site through the style manager. I would like to be able to position the text so that it slightly overlaps the dark borders as you see in the example above. Do I slice the image into 8 pieces (4 corners, 4 sides) or use much fewer, but also much larger images that will allow for whole page module widths?

    It appears that, with or without the shell, all the module content is contained at the beginning of a <td>. It can be either vBCode, HTML or template based, so anything that can be contained within a <td></td> is fair game.

    I hope you can help me figure this out. Thank you for your time.

    Jim

  2. #2
    SitePoint Addict dbr's Avatar
    Join Date
    Aug 2006
    Location
    Tucked away in the mountains...
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Does this work for you?

    I don't know anything about your "Content Management System (vBadvanced 2.20)" but, I worked up this example and hand coded it.

    SOLUTION:
    Fluid Rounded Corner Boxes

    First time I've ever tried this, so it might not be as pretty as you would like. But, it should be easy to tweak.

    Let me know...

    Dave
    "Three components make an entrepreneur:
    the person, the idea, and the resources to make it happen."
    Anita Roddick ~British entrepreneur
    dbr founder of: ProximityCast.com

  3. #3
    SitePoint Addict eJM's Avatar
    Join Date
    Feb 2004
    Location
    teh Ether
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much, Dave. I will test it out using my own images and see if it works for me.

    Best R'gards,

    Jim

  4. #4
    SitePoint Addict eJM's Avatar
    Join Date
    Feb 2004
    Location
    teh Ether
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I appreciate you trying to help, Dave, and I'm sorry your solution didn't work for me. This is what I have come up with so far: http://www.enterprisejm.com/test/test_article_body.html

    The CSS is in the source file. I have a couple of other questions concerning the CSS for this, so I will start a new discussion in that forum.

    Thanks again.

    Jim

  5. #5
    SitePoint Addict
    Join Date
    May 2006
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you might try spanky corners - lot of info in the forums and might be what you are looking for.

  6. #6
    SitePoint Addict eJM's Avatar
    Join Date
    Feb 2004
    Location
    teh Ether
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Blue Sky,

    The box is done. Did you click the link?

    Jim

  7. #7
    SitePoint Addict
    Join Date
    May 2006
    Posts
    399
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


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
  •