SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    May 2007
    Location
    Saint Petersburg, FL
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    New need help with HTML/CSS

    Hello,

    I am a little new to css and html, I want to know how do i create section in a page that has a rectangle border, with oval corners using HTML/CSS? (see attachment "section_with_rectangle_border.jpg")

    Also how do i create little miniture submenus (see attachment "submenus_with_plus_signs") in HTML/CSS?

    I want to create a site that has mutitple sections with oval borders, and section that have submenus that users can click on with will display on another page.

    regards
    Attached Files Attached Files

  2. #2
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I cant see your attachments. Use border images.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    There are plenty of tutorials about on how to create round corners so i won't go into detail here. Just have a look here for something suitable.

    Unfortunately border-images or border-radius is not widely supported yet so you would need to use the methods mentioned in the link above.

  4. #4
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Paul, you have a nifty bit on rounded corners that I've used in an earlier design. It's somewhere on search-this.com. I mention it here because it works very well, doesn't rely on JavaScript, and doesn't break easily like so many of them do.

    In my current design I'm using techniques from Scott Schiller (the black boxes) and Stu Nicholls (blue boxes). Links on the design credits page.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Black Max View Post
    Paul, you have a nifty bit on rounded corners that I've used in an earlier design. It's somewhere on search-this.com.
    Yes, I have a couple of articles here and here One is quite old but still valid and the last one uses transparent corner images.

    I've seen the Stu Nichols ones and they are very clever but do rely on a lot of markup. Mind you most round corner examples use a lot of mak up anyway so I suppose it's not a real issue. I did have a similar one somewhere that uses lines of varying length to make the corners but again suffers from too many elements.

    The benefit of the javascript rotuines (nifty corners iirc) is that it adds the extra html dynamically and leaves the mark up clean. It also anti aliases the corners with the current background color so that you get smooth corners.

    The downside is that JS is needed and it does slow the page down if you use a lot of corners. I tried it on a large site for a client but we had to revert back to images as the delay was unacceptable (this was a very large site though).

    It will be a relief when border radius and border images are fully supported but we will have to wait a while yet

  6. #6
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    It will be a relief when border radius and border images are fully supported but we will have to wait a while yet
    Yep, when this is fully implemented, and when Internet Explorer is eradicated like smallpox, I will be a happy man.

  7. #7
    SitePoint Enthusiast Wolf597's Avatar
    Join Date
    Sep 2007
    Location
    US
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What program are your using to make your website?

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the work I've done on how to figure out corner radius for round corners using only HTML tags.

    I only tried the radius up to 7px. It's simple concept and it's easy to extend larger radius.

    http://www.pagecolumn.com/webparts/rounded_corners.htm


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
  •