Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Curved Rectangles

Options
  • 20-02-2006 6:00pm
    #1
    Registered Users Posts: 4,478 ✭✭✭


    Hi guys,
    Hard to explain this but here it goes,

    I know how to make cruved rectangles but what I want to be able to do is use a graphic I have created of a curved rectangle. Ive made a good border for it that will add some depth and what I was hoping to do was this,

    Include it as a background image for a div in css. Content would go over this image and the image would stretch as more content was added. But a background image doesnt stretch in css?

    CSS does have a rounded rectangle function but not great support for it at the moment. But really why I want to use the image is the border adds depth and there is a huge difference in the flat and shaded border.

    How can I do this?

    TIA

    Jumpa


    Also if it is possible to stretch a graphic, will it get distorted beyond all recognition?


Comments

  • Registered Users Posts: 21,257 ✭✭✭✭Eoin


    I may have the wrong end of the stick altogether, but how about you just have the top and bottom of the rectangle as images, and use CSS to define the right and left borders of the div? The side borders will then stretch as required without affecting the top and bottom of the rectangle (which you also position with CSS).


  • Closed Accounts Posts: 4,655 ✭✭✭Ph3n0m


    Easy

    Take your rounded border and cut up the four "corners"

    Now where your text is to appear, surround it with divs or table cells and place the content in the middle

    e.
    <div>topimage</div>

    <div>middleleftimage</div>
    <div>content in here</div>
    <div>middlerightimage</div>

    <div>bottomimage</div>



    ta-da! :)


  • Closed Accounts Posts: 519 ✭✭✭smeggle


    I'm using an image corner at a couple of my sites. As Ph3n0m says you cut an image into 4 or make 4 corners and then put then in a div - mine are like this
    <div id="pagecell">
    <img id="tl" alt="" src="images/tl.jpg" height="6" width="6" /><img id="tr" alt="" src="images/tr.jpg" height="6" width="6" />
    
    Add your content divs, header/navigation/text content etc
    
    then 
    
    <img id="trb" alt="" src="images/trb.jpg" height="6" width="6" /><img id="tla" alt="" src="images/tla.jpg" height="6" width="6" />
    </div> <-- closing the page cell
    
    

    You don't need to put the actual corner images themselves into individual divs - just set them in the pagecell div.

    The css for the control of the corners is as follows
    #tl {
    	padding-right: 0px; 
            padding-LEFT: 0px; 
            z-index: 100; 
            left: -1px; 
            padding-BOTTOM: 0px; 
            margin: 0px; 
            padding-top: 0px; 
            position: absolute; 
            top: -1px
    }
    #tr {
    	padding-right: 0px; 
            padding-left: 0px; 
            z-index: 100; 
            right: -1px;   
            padding-bottom: 0px; 
            margin: 0px; 
            padding-top: 0px; 
            position: absolute; 
            top: -1px
    }
    
    
    #tla {
    	padding-right: 0px; 
            padding-left: 0px;   
            padding-top: 0px;
            padding-bottom: 0px;
            z-index: 100; 
            left: -1px;  
            margin: 0px; 
            position: absolute; 
            bottom: -1px
    }
    #trb {
    	padding-right: 0px; 
            padding-left: 0px;
            padding-bottom: 0px;
            padding-top: 0px; 
            z-index: 100; 
            right: -1px;    
            margin: 0px;  
            position: absolute; 
            bottom: -1px
    }
    

    That locks the corners to the edge of any cell you place them in. Size, position, border style etc are then controlled via the css via the pagecell css.

    You can see it working here - thats an old page I did when I was first learning xhtml but the pagecell is done the above way. You can change it to function easily on multiple cells or cells within cells...

    :)


  • Registered Users Posts: 4,478 ✭✭✭wheres me jumpa


    	<div id="content">
    	<!-- Begin Content !-->
    	<div class="bgTop"><img src="images/BG/bg_TOP.gif" />
    	<div class="bgLeft"><img src="images/BG/bg_LEFT.gif" />
    	<div class="content">Content here.</div>
    	<div class="bgRight"><img src="images/BG/bg_RIGHT.gif" />
    	<div class="bgBottom"><img src="images/BG/bg_BOT.gif" />
    	<!-- End Content !-->
    	</div>
    

    The right image is displaying beneath the left image. Top, Bottom and Left image are in place fine. Any ideas? What should be in the classes? All I have is display: block;


  • Closed Accounts Posts: 4,655 ✭✭✭Ph3n0m


    first of all, end your div tags
    <div id="content">
    	<!-- Begin Content !-->
    	<div class="bgTop"><img src="images/BG/bg_TOP.gif" />[COLOR="Red"]</div>[/COLOR]
    	<div class="bgLeft"><img src="images/BG/bg_LEFT.gif" />[COLOR="Red"]</div>[/COLOR]
    	<div class="content">Content here.</div>
    	<div class="bgRight"><img src="images/BG/bg_RIGHT.gif" />[COLOR="Red"]</div>[/COLOR]
    	<div class="bgBottom"><img src="images/BG/bg_BOT.gif" />[COLOR="Red"]</div>[/COLOR]
    	<!-- End Content !-->
    	</div>
    

    You then have to indicate via css which divs are to align to the left, so that the respective div will float alongside a div

    e.g

    first div {float:left}
    second div {float:left}
    third div {float:left}
    <!-- new line of divs -->
    fourth div {float:left}
    etc

    You might also want to invest in either a div to seperate each line of divs or just use {clear:right}


  • Advertisement
  • Closed Accounts Posts: 145 ✭✭lkman


    what about this:
    <style type="text/css">
    <!--
    .bl {background:url(bl.jpg) 0 100% no-repeat #800000; width:20em; text-align:center;}
    .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:10px}
    
    //-->
    </style>
    

    with this:
    <div class="bl">
    <div class="br">
    <div class="tl">
    <div class="tr">All Content in here
    </div></div></div></div>
    

    I use different variations of this on my sites.
    Check the site in my sig for an example of it if you like.


  • Closed Accounts Posts: 519 ✭✭✭smeggle


    Why? Theres no need to put the images in there own divs - all you need is to make sure they are displayed within the cell your trying to create.

    Nesting them in divs leaves you open to all sorts of problems on cross-browser support. Your only wanting the corners of the cell to be curved - the borders can be handled in the css for the cell. Far simpler....

    :)


  • Registered Users Posts: 4,478 ✭✭✭wheres me jumpa


    wheres me jumpa = one happy dude!

    Thanks guys, Ph3n0m was on the right track as it wasnt just rounded corners, I wanted to use my own border.


  • Registered Users Posts: 2,031 ✭✭✭colm_c


    If your boxes are all the same width then you could do the following:

    <div class="content-box-wrapper">
    <div class="content-box">
    <p>Content here</p>
    </div>
    </div>

    Then in the CSS have something like:

    .content-box-wrapper {
    background: url("my-image-top.gif") no-repeat top left;
    width: 200px;
    }

    .content-box {
    background: url("my-image-bottom.gif") no-repeat bottom left;
    }

    .content-box p {
    background: url("my-image-middle.gif" repeat-y top left;
    }

    less markup than adding 4 divs


Advertisement