Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorljromanoff
    • CommentTimeFeb 22nd 2006
     permalink
    I am building an interface that includes labels on top with rounded corners on top and a background image. Currently I have a table based method that is effective but not ideal. If anyone has any thoughts on how to do this with a div or divs I would appreciate it.

    The code looks like this:

    .container_description {
    background-image: url(images/container_head_bck.gif);
    background-repeat: no-repeat;
    background-position: right;
    background-color: #d6e0d2;
    font-weight: bold;
    padding: 0;
    margin: 8px 6px 0 6px;
    width: 50%;
    height: 24px;
    border: 0;
    }

    .container_left_cap {
    background-image: url(images/container_head_cap.gif);
    background-repeat: no-repeat;
    background-position: left;
    padding: 0;
    border: 0;
    }

    .container_description td {
    padding: 0 6px 0 5px;
    border: 0;
    }

    <table cellpadding="0" cellspacing="0" class="container_description">
    <tr class="container_left_cap"><td>
    Children
    </td></tr>
    </table>

    Example is here:

    http://ljonn.com/misc/css-screen-html-latest/test.html

    This item will sit on top of containers of varying widths, by the way.

    Any ideas?
    •  
      CommentAuthorJohnRiv
    • CommentTimeFeb 22nd 2006 edited
     permalink

    Give this a try:


    CSS:



    .container_description {
    background-image: url(images/container_head_bck.gif);
    background-repeat: no-repeat;
    background-position: right;
    background-color: #d6e0d2;
    font-weight: bold;
    margin: 8px 6px 0 6px;
    width: 50%;
    height: 24px;
    line-height: 24px;
    }

    .container_left_cap {
    background-image: url(images/container_head_cap.gif);
    background-repeat: no-repeat;
    background-position: left;
    padding: 0 6px 0 5px;
    }

    HTML:



    &lt;div class=&quot;container_description&quot;&gt;
    &lt;div class=&quot;container_left_cap&quot;&gt;
    Children
    &lt;/div&gt;
    &lt;/div&gt;
    • CommentAuthorljromanoff
    • CommentTimeFeb 22nd 2006
     permalink
    I thought that's exactly what I already tried, but apparently I didn't because your method works whereas mine did not.

    Anyway, thanks John. Very helpful.
  1.  permalink
    it was close to what you tried only John included the

    line-height: 24px;
    • CommentAuthorljromanoff
    • CommentTimeFeb 22nd 2006
     permalink
    Actually I didn't post what I tried, but I take your point.
Add your comments
    Username Password
  • Format comments as (Help)