SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Melbourne, Australia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS rounded corners box plus database feasibility

    Hi,

    I am trying to create a box with rounded corners exactly like this one:
    http://force10x.freehostia.com/css_mess/box.jpg
    (Please copy and paste the url in the location bar.)

    I will be using PHP/MySQL to create multiple box one below the other.

    Creating this using tables is easy. It is not only quicker, but I guess I can easily replicate the rows using php/mysql.

    I am not sure how to go about it using css though.

    I tried the following code in CSS and its not only getting huge but also makes the code look messy as it has too many div tags.

    In HTML

    Code:
    <div class="curvetop">
    New Category
    <span style="position:absolute; text-align:right; right:20px; top:6px;"><a href="print.htm" onMouseOver="document.printImg.src='images/icon_print_02.gif'" onMouseOut="document.printImg.src='images/icon_print_01.gif'"><img src="images/icon_print_01.gif" width="41" height="29" alt="Create New Category" title="Create New Category" name="printImg" border="0" /></a>
    </span>
    </div>
    <div class="boxcenter">
    
    </div>
    <div class="curvebottom">
    </div>
    In CSS
    Code:
    .curvetop{
    
    	width: 540px;
    	margin: 0px;
    	padding: 6px 0px 7px 10px;
    	background: #99ccff url(images/curves_top.gif) no-repeat top left;
    	color:#003366;
    	font: normal bold 100% verdana;
    	}
    .curvebottom{
    	
    	width: 540px;
    	margin: 0px;
    	padding: 0px;
    	background: #ffffff url(images/curves_bottom.gif) no-repeat bottom left;
    }
    .boxcenter{
    	width: 540px;
    	margin: 0px;
    	padding: 4px;
    	background: #ffffff;
    	
    	border-style: solid;
    	border-width: 0px 1px 0px 1px;
    	border-color:#99ccff;
    }
    Both I.E. and firefox display it differently.

    I.E.
    http://force10x.freehostia.com/css_mess/ie.jpg
    (Please copy and paste the url in the location bar.)

    Fire Fox
    http://force10x.freehostia.com/css_mess/firefox.jpg
    (Please copy and paste the url in the location bar.)

    The blue band below is the footer, which is part of a two column layout.
    In I.E the column extends as expected (fluid height???) where as in Fire Fox it does not.

    any guidance with this would be great.

    Thank you.
    P.S. If you are having difficulty seeing the above images, please use the URL below.
    http://force10x.freehostia.com/css_m...undCorners.htm

  2. #2
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Melbourne, Australia
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nearly got it working
    http://force10x.freehostia.com/css_mess/newCategory.htm

    not sure if this is the correct method though.

    plus in I.E. a one pixel gap can be seen just above the lower curve


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
  •