Rounded Text Boxes via CSS

Discussion in 'XHTML/HTML/CSS' started by Adam H, May 3, 2009.

Thread Status:
Not open for further replies.

  1. Adam H Administrator

    Member Since:
    Jan 7, 2008
    Message Count:
    2,892
    Likes Received:
    188
    Occupation:
    Head of Search
    Location:
    Norfolk Uk
    Ever wanted to make a box of text have rounded corners ? you can see an example of this one the main page here :

    http://www.triphp.com/html-css-tutorials/image-mapping-method/

    You can see the "related posts" are highlighted with a grey box around the text, well to do this you will need to do the following.

    Copy below into your .CSS file

    Code (text):
    .rtextbox{color:#555555; font-family:Arial; background: #EEEEEE; text-align:justify;}
    .rtextboxinside {margin-left: 8px; margin-right: 8px; margin-top: 3px; margin-bottom:3px}
    .rtop, .rbottom{display:block; background: #FFF}
    .rtop span, .rbottom span {display: block; height: 1px; overflow: hidden; background: #EEEEEE}
    .r1{margin: 0 5px}
    .r2{margin: 0 3px}
    .r3{margin: 0 2px}
    span.rtop span.r4, span.rbottom span.r4{margin: 0 1px; height: 2px}
    The add the following before the text you want to wrap :

    PHP:
    <DIV class=rtextbox><SPAN class=rtop><SPAN class=r1></SPAN><SPAN class=r2></SPAN><SPAN class=r3></SPAN><SPAN class=r4></SPAN></SPAN><DIV class=rtextboxinside>
    The add the following After the text you want to wrap :

    PHP:
    </DIV><SPAN class=rbottom><SPAN class=r4></SPAN><SPAN class=r3></SPAN><SPAN class=r2></SPAN><SPAN class=r1></SPAN></SPAN></DIV>
    You can change the colours of the boxes by editing the colour codes in the CSS part.

    Enjoy :)

    If anyone knows an easier way please post it here :biggrin:
    Adam H, May 3, 2009
    #1

  2. Digger New Member

    Member Since:
    May 3, 2009
    Message Count:
    90
    Likes Received:
    1
    Occupation:
    Bum
    Location:
    UK
    Not sure ill ever use that but thanks anyway haha , is this just a style modification ?
    Digger, May 3, 2009
    #2

  3. Adam H Administrator

    Member Since:
    Jan 7, 2008
    Message Count:
    2,892
    Likes Received:
    188
    Occupation:
    Head of Search
    Location:
    Norfolk Uk
    lol yeah mate its just a style thing to separate "white space" really
    Adam H, May 4, 2009
    #3

  4. downrollin New Member

    Member Since:
    Jul 1, 2009
    Message Count:
    1
    Likes Received:
    0
    thanks for such a nice tips..........
    i also faced such a problem........
    searched a lot for the solution but didn't find that......
    your solution helped me a lot........
    will it work on diffferent browsers?????
    while i am working on different browser will it be working????
    if not what i will have to do????
    downrollin, Jul 1, 2009
    #4

  5. Adam H Administrator

    Member Since:
    Jan 7, 2008
    Message Count:
    2,892
    Likes Received:
    188
    Occupation:
    Head of Search
    Location:
    Norfolk Uk
    No problem, as far as im aware there is no issues with any browsers , i use it on a couple of my sites like on this page :

    Website templates

    The writing on the page is surrounded by this code.
    Adam H, Jul 1, 2009
    #5

  6. immediate Member

    Member Since:
    Jun 3, 2009
    Message Count:
    84
    Likes Received:
    0
    Location:
    kavoir.com
    Thanks for the tip!
    immediate, Nov 9, 2009
    #6

  7. masterweb New Member

    Member Since:
    Feb 21, 2008
    Message Count:
    351
    Likes Received:
    23
    Dude you are my hero :D, i tried many times to use only CSS based effects instead of images but rounded corners were a nightmare to me. Thanks for your input River!.
    masterweb, Nov 9, 2009
    #7

  8. proweb Well-Known Member

    Member Since:
    Jul 22, 2009
    Message Count:
    1,308
    Likes Received:
    44
    Occupation:
    Joomla Designer
    Location:
    Joomla Expert
    Thanks River! Maybe once I will use it on one of my template, and will give a link back to your triPHP :)
    proweb, Nov 9, 2009
    #8
    1 people like this.
Thread Status:
Not open for further replies.

Share This Page