SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Box won't appear

    I'm trying to have two horizintal rounded-corner boxes appear on the page, but box no. 2 doesn't appear. Any ideas? Thanks

    CSS code:
    Code:
    .roundedBox {position:relative; padding:17px; margin:10px 0;}
    .corner {position:absolute; width:17px; height:17px;}
    
            .topLeft {top:0; left:0; background-position:-1px -1px;}
            .topRight {top:0; right:0; background-position:-19px -1px;}
            .bottomLeft {bottom:0; left:0; background-position:-1px -19px;}
            .bottomRight {bottom:0; right:0; background-position:-19px -19px;}
    
    #type1 {background-color:#CCDEDE;}
        #type1 .corner {background-image:url(../images/corners-type1.gif);
        
    #type2 {background-color:#CDDFCA;}
        #type2 .corner {background-image:url(../images/corners-type2.gif);
    HTML code:
    Code:
    <div class="roundedBox"></div>
    <div class="roundedBox" id="type1">
        <strong>My content in roundedBox1</strong>
        <div class="corner topLeft"></div>
        <div class="corner topRight"></div>
        <div class="corner bottomLeft"></div>
        <div class="corner bottomRight"></div>
    </div>
    
    <div class="roundedBox" id="type2">
        <strong>My content in roundedBox2</strong>
        <div class="corner topLeft"></div>
        <div class="corner topRight"></div>
        <div class="corner bottomLeft"></div>
        <div class="corner bottomRight"></div>
    </div>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You have 2 missing closing brackets


    Code:
    #type1 .corner {
        background-image:url(../images/corners-type1.gif);
    }
    #type2 {
        background-color:#CDDFCA;
    }
    #type2 .corner {
        background-image:url(../images/corners-type2.gif);
    }
    Note that in IE6 the right and bottom absolute images will be 1px out when an odd pixel distance is covered.

    There are better ways to do rounded boxes.

    http://battletech.hopto.org/html_tut.../template.html
    http://www.pmob.co.uk/temp/round-tra...inner-fade.htm


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
  •