Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Nov 2005
    Location
    North Canton, Ohio
    Posts
    118
    Thanks
    11
    Thanked 4 Times in 4 Posts

    borders with images

    Is there any better way of doing the following example? Like not having eight div tags. http://blahertech.dnsalias.net/public/bpa2/test.htm

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Do you want a fixed width? %s make you cut up the image more thus create more divs.
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    A similar question was asked a while back. While this is implemented in CSS3 support currently for this is limited. I coded a workaround.
    http://www.codingforums.com/showthread.php?t=75868
    Here is the code with your images in place.
    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">
    <title>Bordered Box</title>
    <base href="http://blahertech.dnsalias.net/public/bpa2/">
    <style type="text/css">
    html, body {
    background:#0582D1;
    color:#FFF;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:0.85em;
    text-align:center;
    }
    body {
    padding:0 5px;
    }
    .box {
    width:auto; /*you don't need to set a width, it will expand if you needed it to*/
    background:url(images/box_l.png) repeat-y;
    margin:5px auto;
    text-align:justify;
    }
    .box dl {
    margin:0;
    padding:0;
    line-height:0;
    font-size:0;
    }
    .topbar {
    background:url(images/box_t.png) repeat-x;
    height:13px;
    }
    .botbar {
    background:url(images/box_b.png) repeat-x;
    height:13px;
    }
    .box dl dt {
    float:left;
    }
    .box dl dt.fright {
    float:right;
    }
    .content {
    background:#236691 url(images/box_r.png) right repeat-y;
    margin-left:13px;
    padding:5px 16px 5px 5px;
    }
    .content p {
    margin:0;
    padding:5px 0;
    }
    dl.topbar dt, dl.botbar dt {
    line-height:0;
    font-size:0;
    }
    dt.tl {
    background:url(images/box_tl.png);
    height:13px;
    width:13px;
    }
    dt.tr {
    background:url(images/box_tr.png);
    height:13px;
    width:13px;
    }
    dt.bl {
    background:url(images/box_bl.png);
    height:13px;
    width:13px;
    }
    dt.br {
    background:url(images/box_br.png);
    height:13px;
    width:13px;
    }
    </style>
    </head>
    
    <body>
    <div class="box">
    	<dl class="topbar">
    		<dt class="tl"></dt>
    		<dt class="fright tr"></dt>
    	</dl>
    	<div class="content">
    		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    	</div>
    	<dl class="botbar">
    		<dt class="bl"></dt>
    		<dt class="fright br"></dt>
    	</dl>
    </div>
    </body>
    </html>
    I switched it to using a definition list so the bullets don't show up when you disable styles.
    Last edited by _Aerospace_Eng_; 01-30-2008 at 02:44 AM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •