www.webdeveloper.com
Results 1 to 11 of 11

Thread: [RESOLVED] CSS - Two columns, in a curved box - huh?!

  1. #1
    Join Date
    Nov 2002
    Location
    Scotland
    Posts
    550

    resolved [RESOLVED] CSS - Two columns, in a curved box - huh?!

    Hello,

    Now I want to have two very small columns of text in the one curved box.

    Perhaps best to view the attached image at this stage: http://www.webdeveloper.com/forum/at...9&d=1207768436

    I can store text ok(as per the first div), but as soon as I bring in two div's, the curves disappear

    I have the following code:

    HTML 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" dir="ltr">
    
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    <title>Untitled Document</title>
    
    <style type="text/css">
    
    #briefbiowrapper {
    background-color:#caebfe;
    width:539px;
    }
    
    .leftside {
    float:left;
    height:96px;
    width:49%;
    }
    
    .rightside {
    float:right;
    height:96px;
    width:49%;
    }
    
    .bl {background: url(bl.jpg) 0 100% no-repeat}
    .br {background: url(br.jpg) 100% 100% no-repeat}
    .tl {background: url(tl.jpg) 0 0 no-repeat}
    .tr {background: url(tr.jpg) 100% 0 no-repeat; padding:5px}
    
    </style>
    
    </head>
    
    <body bgcolor="#FFFFFF" text="#000000">
    
    <div id="briefbiowrapper">
    	
    <div class="bl"><div class="br"><div class="tl"><div class="tr">
    		leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside
    </div></div></div></div>
    	
    </div>
    
    
    <br />
    
    <div id="briefbiowrapper">
    
    <div class="bl"><div class="br"><div class="tl"><div class="tr">
    
    <div class="leftside">
    
    leftside baby
    
    </div>
    
    <div class="rightside">
    
    rightside baby
    
    </div>
    
    </div></div></div></div>
    
    </div>
    
    
    </body>
    </html>
    Now the first part works a dream, see the first of the 2 in the attached image.

    But the second part doesn't work. I'd like to have it split it into two columns, and still have the curvy bottom(who doesn't?!)


    Please help.


    Thank you!!!
    Attached Images Attached Images
    Last edited by invision; 04-09-2008 at 02:16 PM.

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    May not solve the immediate problem, but you are re-using a ID, -which you cannot do:

    <style type="text/css">

    #briefbiowrapper {
    background-color:#caebfe;
    width:539px;
    }

    .leftside {
    float:left;
    height:96px;
    width:49%;
    }

    .rightside {
    float:right;
    height:96px;
    width:49%;
    }

    .bl {background: url(bl.jpg) 0 100% no-repeat}
    .br {background: url(br.jpg) 100% 100% no-repeat}
    .tl {background: url(tl.jpg) 0 0 no-repeat}
    .tr {background: url(tr.jpg) 100% 0 no-repeat; padding:5px}

    </style>

    </head>

    <body bgcolor="#FFFFFF" text="#000000">

    <div id="briefbiowrapper">

    <div class="bl"><div class="br"><div class="tl"><div class="tr">
    leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside
    </div></div></div></div>

    </div>


    <br />

    <div id="briefbiowrapper">

    <div class="bl"><div class="br"><div class="tl"><div class="tr">....
    Change these to class="" and " . " and see if that helps
    Last edited by WebJoel; 04-09-2008 at 03:26 PM.
    I build for: Firefox and tweak for IE

  3. #3
    Join Date
    Nov 2002
    Location
    Scotland
    Posts
    550
    Yeh, I understand, just for quickness sake at the the time I used it, to show two versions.
    I plan to just use one on each page

    Can't think of why it isn't working

  4. #4
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Float clearing. Give briefbiowrapper an overflow:hidden.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  5. #5
    Join Date
    Nov 2002
    Location
    Scotland
    Posts
    550
    OK. Thank you for your response.

    Please see attached image having added 'overflow:hidden' to the wrapper with leftside and rightside in it.

    I had this problem before where the bottom left and right curves don't work

    Any ideas?
    Attached Images Attached Images

  6. #6
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by invision
    ....
    I had this problem before where the bottom left and right curves don't work

    Any ideas?
    Focus on this:
    .bl {background: url(bl.jpg) 0 100% no-repeat}
    .br {background: url(br.jpg) 100% 100% no-repeat}
    Based upon point 0,0 of the image (top, left), the image(s) for BOTTOM-LEFT and BOTTOM-RIGHT are being positioned off of the container ("100%" means exactly that).

    Maybe try:.
    bl {background: url(bl.jpg) bottom left no-repeat}
    .br {background: url(br.jpg) bottom right no-repeat}
    to position the image 'inside' of the container, not "100%" of it...
    I build for: Firefox and tweak for IE

  7. #7
    Join Date
    Nov 2002
    Location
    Scotland
    Posts
    550
    Hmm, I tried that in the CSS.

    I think the problem is that the main 'briefbiowrapper' doesn't seem to think of the two div's in it, and just wraps up early.

    Please see attachment to see change.
    Attached Images Attached Images

  8. #8
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Post your images so I can try this on my desktop. What you're trying to do, has been done before so something isn't working correctly.
    I build for: Firefox and tweak for IE

  9. #9
    Join Date
    Nov 2002
    Location
    Scotland
    Posts
    550
    Sorry, for such a late reply.

    OK, here we go: http://www.michaelmcg.co.uk/webjoel/...iowrapper.html

  10. #10
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Your floated DIVs "leftside" and "rightside" were covering-up the 'background DIV' thus, -the curvy-corners were not visible.

    If you want TWO divs in a contgainer DIV-with-curvy-corners, place the LEFT-BOTTOM and the TOP-LEFT corner image on the "leftside" DIV, and the "RIGHT-TOP and the BOTTOM-RIGHT" corner image on the "rightside" DIV:

    <!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" dir="ltr">
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style type="text/css">

    * {padding:0; margin:0;}
    #briefbiowrapper, #briefbiowrapper2 { background-color:#caebfe; width:539px; margin:10px;}
    #briefbiowrapper p, #briefbiowrapper2 p {padding:15px;}

    .leftside {float:left; width:49%; margin:0;}
    .rightside {float:right; width:50%; margin:0;}
    .leftside p, .rightside p {padding:10px;}

    .tl {background: url(tl.jpg) 0 0 no-repeat}
    .tr {background: url(tr.jpg) 100% 0 no-repeat;}
    .bl {background: url(bl.jpg) 0 100% no-repeat}
    .br {background: url(br.jpg) 100% 100% no-repeat}

    </style>

    </head>
    <body bgcolor="#ffffff" text="#000000">
    <div id="briefbiowrapper">

    <div class="bl">
    <div class="br">
    <div class="tl">
    <div class="tr">
    <p>leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside leftside</p>
    </div>
    </div>
    </div>
    </div>

    </div>

    <br />


    <div id="briefbiowrapper2">

    <div class="leftside">
    <div class="bl">
    <div class="tl">

    <p>leftside baby</p>
    </div>
    </div>
    </div>


    <div class="rightside">
    <div class="tr">
    <div class="br">

    <p>rightside baby</p>


    </div>
    </div>
    </div>

    </div>

    </body>

    </html>
    This is a buit unweildy, but this works. A simpler way to do this surely exisits...
    I build for: Firefox and tweak for IE

  11. #11
    Join Date
    Nov 2002
    Location
    Scotland
    Posts
    550
    Aaaah of course.

    Seems so obvious now.


    Many thanks for your efforts with this. I'm delighted

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles