Newbee problem with rounded corners

Discussion in 'HTML & Website Design' started by hankiman, Sep 9, 2008.

0
  1. #1
    I have made this box filled with red colour and i want a 2 pixel black border around it. Have a look:

    http://vav.dk/upload/

    I have managed to get the 4 round corners placed allright.

    But i cant get the other 4 elements placed so that the box will be completed with the 2 pixel black border on alle sides. I have placed the 4 missing pices under the box so you can see what i am talking about.

    heres is the code:

    <STYLE type=text/css>
    .bl3 {
    WIDTH: 20em;
    TEXT-ALIGN: center;
    background-color: #FF0000;
    background-image: url(bl.gif);
    background-repeat: no-repeat;
    background-position: 0px 100%;
    }
    .bl2 {
    PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: url(bl.gif) #e68200 no-repeat 0px 100%; PADDING-BOTTOM: 10px; WIDTH: 20em; PADDING-TOP: 10px; TEXT-ALIGN: center
    }
    .bl {
    BACKGROUND: url(bl.gif) no-repeat 0px 100%; WIDTH: 20em; TEXT-ALIGN: center
    }
    .br {
    BACKGROUND: url(br.gif) no-repeat 100% 100%
    }
    .tl {
    background-image: url(tl.gif);
    background-repeat: no-repeat;
    background-position: left top;
    }
    .tr {
    BACKGROUND: url(tr.gif) no-repeat 100% 0px
    }
    .tr2 {
    PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: url(tr.gif) no-repeat 100% 0px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px
    }
    IMG {
    BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
    }
    #apDiv1 {
    position:absolute;
    left:31px;
    top:212px;
    width:221px;
    height:68px;
    background-color:#66FF00;
    layer-background-color:#66FF00;
    border:1px none #000000;
    z-index:1;
    }
    #apDiv2 {
    position:absolute;
    left:411px;
    top:61px;
    width:149px;
    height:163px;
    z-index:1;
    background-image: url(tm.gif);
    }
    #apDiv3 {
    position:absolute;
    left:33px;
    top:227px;
    width:561px;
    height:83px;
    z-index:1;
    }
    </STYLE>

    <META content="MSHTML 6.00.6000.16705" name=GENERATOR /></HEAD>
    <BODY>
    <div id="apDiv3">
    <table width="30" border="1">
    <tr>
    <td><img src="bm.gif" width="15" height="15" /></td>
    <td><img src="sl.gif" width="15" height="15" /></td>
    <td><img src="sr.gif" width="15" height="15" /></td>
    <td><img src="tm.gif" width="15" height="15" /></td>
    </tr>
    </table>
    </div>
    <DIV class=bl3>
    <DIV class=br>
    <DIV class=tl>
    <DIV class=tr2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing
    elit</p>
    <p>dfasfasf asdf</p>
    <p>adsf asf asdf</p>
    </DIV>
    </DIV></DIV></DIV></BODY></HTML>
     
    hankiman, Sep 9, 2008 IP
  2. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #2
    What happens if you add a border round the main red box and subtract 4px off the width?

    you add the border like: 2px solid #000;
     
    wd_2k6, Sep 9, 2008 IP