SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    round corners AND <b> tag

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Fluid transparent round corners - no images required</title>
    <style type="text/css">
    
    
    * {
        margin:0;
        padding:0
    }
    p {
        margin:0 0 
    }
    
    
    
    body {
        padding:10px;
        background:url(images/bgstripe.gif)
    }
    .test {
        float:left;
        margin:10px;
        display:inline;
        clear:both;
    }
    .content {
        background:#ccc;
        border-left:1px solid blue;
        border-right:1px solid blue;
        padding:1px 5px;
        overflow:hidden;
    }
    .test b {display:block}
    .top *, .bottom * {
        padding:1px 0 0;
        background:#ccc;
        border-right:1px solid blue;
        border-left:1px solid blue;
        font-size:0;
    }
    .px0 {
        margin: 0 5px;
        background:blue;
    }
    .px1 {
        margin: 0 3px;
        border-width:2px;
    }
    .px2 {margin:0 2px;}
    .px3 {
        margin: 0 1px;
        padding:2px 0 0;
    }
    .px4 {
        margin: 0 1px;
        padding:2px 0 0;
    }
    .fl, .fr {
        float:left;
        width:60px;
        height:40px;
        border:1px solid #000;
        margin:2px;
        display:inline;
        background:red;
        text-align:center;
    }
    .fr {float:right}
    .test2 {width:50%}
    .clear {clear:both}
    
    
    </style>
    
    
    <!--[if lte IE 7]>
    <style type="text/css">
    .content{display:inline;zoom:1.0}
    </style>
    <![endif]-->
    
    </head>
    <body>
    
    
    <div class="test">
    
    
        <div class="top"><b class="px0"></b><b class="px1"></b> <b class="px2"></b> <b class="px3"></b> </div>
    
    
    
        <div class="content">
            <p>This item has no width and is stretched
                by the content it contains.</p>
        </div>
        <div class="bottom"><b class="px3"></b> <b class="px2"></b> <b class="px1"></b> <b class="px0"></b></div>
    </div>
    
    
    
    </body>
    </html>
    The output of the code above is at http://dot.kr/x-test/layout/002_1.php.
    I like to modify the contents like the belelow.
    Code:
    before modifying
    <p>This item has no width and is stretched
          by the content it contains.</p>
    
    after modifying
    <p>This item has no width and is stretched
          by the content <b>it</b> contains.</p>
    The result of the code above is at http://dot.kr/x-test/layout/002_2.php.
    You can see the line breaks before and after it.

    I like to make the text "it" bold by using <b> tag like the code above without any line breaks before and after the text "it".

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,107
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    As an aside, if you want rounded corners these days, just use border-radius. Hacks like you've used are unnecessary now.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    I deleted my post because I thought for a moment that I must be missing something; but in retrospect, I don't think I was.

    The <b> tag has already been given {display:block} so it will generate line breaks.

    You will need to use a different tag to target the text. For example...
    Code:
    <span>it</span>
    If you really want to use the <b> tag to target "it", then you could re-code the <b> so it addresses only the top and bottom lines:
    Code:
    .top b,
    .bottom b {display:block}
    That would leave .content untouched.


    (I've never seen this hack before... interesting )

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Here is how with a b. http://www.websitecodetutorials.com/...s-pure-css.php. But as mentioned just use border radius.

  5. #5
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by PicnicTutorials View Post
    Here is how with a b. http://www.websitecodetutorials.com/...s-pure-css.php. But as mentioned just use border radius.
    I made the page at http://dot.kr/x-test/layOut/002_3.php with the code you suggested.
    Since the text "Rounded Corners" is dynamic, the box should be flexible by the length of the text "Rounded Corners", but it seem not to be flexible at http://dot.kr/x-test/layOut/002_3.php .



    Quote Originally Posted by ralph.m View Post
    As an aside, if you want rounded corners these days, just use border-radius. Hacks like you've used are unnecessary now.
    Would you give me one of the most simple example code or any url which has the example?

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta name="viewport" content="width=device-width">
        <title>template</title>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1158403-round-corners-AND-lt-b-gt-tag
    Thread: round corners AND <b> tag
    2013.07.24 19:55
    dotJoon
    -->
        <style type="text/css">
    
    p {
        display:inline-block;
        border:2px solid #00f;
        border-radius:4px;
        padding:12px;
    }
    
        </style>
    </head>
    <body>
    
    <p>Rounded Corners</p>
    
    </body>
    </html>

  7. #7
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    <style type="text/css">

    p {
    display:inline-block;
    border:2px solid #00f;
    border-radius:4px;
    padding:12px;
    }

    </style>
    </head>
    <body>

    <p>Rounded Corners</p>

    </body>
    </html>
    How simple is it!!! Thank you. ronpat.
    When did it happen?

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    It is one of the early CSS3 properties and has been adopted by all modern browsers. Vendor prefixes are no longer recommended.

    Yes, it is very easy AND very powerful. Rounded corners is only one of several things it can do.

    Here are a couple of resources you an look at that describe border-radius:

    http://css3gen.com/border-radius/

    https://developer.mozilla.org/en-US/.../border-radius

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Just wanted to clarify something.

    The 'error' happened in your selection (or planning), specifically : .test b{....}

    this rule will apply to ALL DESCENDANT B TAGS of .test, perhaps you wanted to have a B tag that was a child of the DIV be a block, or maybe this specific B tag inside the P was an exception which you wanted to be inline.

    Depending on the code of your entire page, you could use a class for the B tag you want to be block/inline.

    Code:
    .test .noBlock b { display:inline; }
    <p class="noBlock">This item has no width and is stretched
          by the content <b>it</b> contains.</p>
    hope that helps


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
  •