SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rounded corners prrove elusive :-(



    http://www.pauserefreshment.co.uk/3_..._tutorial.html
    On the above page (its not infected all i frames are removed. View in IE)
    I followed a tutorial onh rounded corners in Sitepoints book "The Art & Science of CSS" but ive hit a snag :-(

    I just cant get the bottom rounded corner to appear. So my specific question is...
    "How do I get the far right column to get rounded jpg to appear at the bottom of the column please"

    Here is the offending code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="robots" value="noindex, nofollow" />
    <link rel="stylesheet" type="text/css" href="css/tutorial.css" />
    <title>3 column layout tutorial</title>
    </head>
    <body id="tutorial" onload="alert('This is my 3 column css tutorial');">
    <div id="wrapper3column">
    <div id="header3">
    Header
    </div>
    <div id="columnleft3">
    <p>TEST column left TEST column left TEST column left TEST column left TEST column left </p>
    </div>
    <div id="columnmain3">
    <p>TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column central TEST column centralTEST column central TEST column central TEST column central TEST column central</p>
    </div>
    <div id="columnright3">
    <p>TEST column right. TEST column right. TEST column right. TEST column right. TEST column right. TEST column right. TEST column right. TEST column right. TEST column right.  </p>
    </div>
    <div id="footer3">
    <p>Footer</p>
    </div>
    </div>
    </body>
    </html>
    
    /////////////////////////////
    
    @charset "utf-8";
    /* CSS Document */
    
    /* 1 column css*/
    #container
    {
    	margin: 0 30px;
    	background: #fff;
    }
    
    #header
    {
    	background: #ccc;
    	padding: 20px;
    }
    
    #header h1 { margin: 0; }
    
    #navigation
    {
    	float: left;
    	width: 100%;
    	background: #333;
    }
    
    #navigation ul
    {
    	margin: 0;
    	padding: 0;
    }
    
    #navigation ul li
    {
    	list-style-type: none;
    	display: inline;
    }
    
    #navigation li a
    {
    	display: block;
    	float: left;
    	padding: 5px 10px;
    	color: #fff;
    	text-decoration: none;
    	border-right: 1px solid #fff;
    }
    
    #navigation li a:hover { background: #383; }
    
    #content
    {
    	clear: left;
    	padding: 20px;
    }
    
    #content h2
    {
    	color: #000;
    	font-size: 160%;
    	margin: 0 0 .5em;
    }
    
    #footer
    {
    	background: #ccc;
    	text-align: right;
    	padding: 20px;
    	height: 1%;
    }
    /* 1 column css ends*/
    
    /* 2 column css starts*/
    #wrapper2column {
    width:800px;
    margin-left:auto;
    margin-right:auto;
    background:#FFFFFF url(../images/faux_column2.jpg) repeat-y 50% 0;
    }
    
    #leftcolumn {
    float:left;
    width:20%;
    border: 3px solid black;
    background:#00FF66;
    }
    
    #maincontent {
    border:5px solid red;
    padding-left:160px;
    }
    
    body {
    background:#000000;
    }
    
    #header2column {
    border:5px solid green;
    }
    
    #footer2column {
    border:5px solid yellow;
    clear:both;
    }
    
    /* 2 column css ends*/
    
    /* 3 column css starts*/
    #tutorial {
    background:orange;
    }
    
    #columnleft3 {
    width:267px;
    float:left;
    background:#CC00CC;
    }
    
    #columnleft3 p {
    }
    
    #columnmain3 {
    width:267px;
    float:left;
    background:yellow;
    }
    
    #columnmain3 p {
    }
    
    #columnright3 {
    width:267px;
    float:left;
    background:green url(../images/round_corner_bottom.jpg) no-repeat bottom left;
    }
    
    #columnright3 p {
    background:green url(../images/round_corner_top.jpg) no-repeat;
    }
    
    #wrapper3column {
    width:801px;
    background:red url(../images/faux_column2.jpg) repeat-y 50% 0;
    margin-left:auto;
    margin-right:auto;
    }
    
    #footer3 {
    height:20px;
    background:#00CC99;
    clear:both;
    }
    /* 3 column css ends*/
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,823
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    The bottom corners seem to be showing but they won't show at the bottom of the faux column because the individual columns have only content height - if that's what you were trying to do.

    To do that you would need to cap all three bottom corners with a single image using a div that stretches full width and follows after the three floated columns (like a footer) and place a background image on that to finish the columns off.

    Much like this old example that caps the tops of the corners with one image then uses a repeating mid section for the three columns and then caps it all with another image at the bottom.

  3. #3
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)



    Well for me Ive made a stack of progress in adding curves to corners. Heres
    where I'm at:
    http://www.pauserefreshment.co.uk/3_..._tutorial.html

    But Ive hit what I hope is a minor snag...

    I wanted the curved column on the far right to appear as it does in IE 8 i ended up adding height to get the effect eg -

    #columnright3 {
    width:267px;
    float:left;
    background:#990066;
    font-family:monospace;
    height:182px;
    }

    I was about to pop the champagne but I looked at it in firefox, Yikes!!! Not quite the same :-(

    So my question is please how do I get my curvey column to look as it does in IE and not jinxed as it does in firefox...

    Any insights welcome :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  4. #4
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I fixed it my self! unbelivable :-) Basically it was a padding balls up now fixed with this css snippet

    #columnright3 p{
    padding:0px 15px 0px 15px;
    margin:0px;
    }

    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com


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
  •