...

View Full Version : borders with images



Blaher
01-30-2008, 02:08 AM
Is there any better way of doing the following example? Like not having eight div tags. http://blahertech.dnsalias.net/public/bpa2/test.htm

twodayslate
01-30-2008, 03:18 AM
Do you want a fixed width? %s make you cut up the image more thus create more divs.

_Aerospace_Eng_
01-30-2008, 03:21 AM
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.

<!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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum