[thelist] CSS Borders

Mark Groen mark at markgroen.com
Tue Jul 6 20:52:15 CDT 2004


----- Original Message ----- 
From: "Robert Gormley" <robert at pennyonthesidewalk.com>
To: <thelist at lists.evolt.org>
Sent: July 6, 2004 5:40 PM
Subject: [thelist] CSS Borders


> I've seen this technique employed on a few sites (though I know I
should
> have bookmarked them), and wonder if anyone can point me to an
example of
> how to do it cleanly in CSS:
> http://www.pennyonthesidewalk.com/temp/overlapborder.gif

Do you mean the line that says: "personal borrower" is over the grey
border of the box? Think styling a fieldset and legend would do that,
similar effect with CSS example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>Support request</title>
  <style type="text/css">
  fieldset {border: 5px #ff7d00 double;
padding-left: 50px;
padding-bottom: 15px;
padding-top: 15px;
 }
legend {
font-style: italic;
font-weight: bold;
letter-spacing: 2px;
font-size: 1.5em;
 }
</style>
</head>
<body>
<form name="submission" action="mailto:support at widgets-r-us.com"
method="post">
<fieldset>
<legend>Your Details</legend>
<p>Your name<input type="text" class="text" name="submittersname"
/></p>
<p>Your email address<input type="text" name="submittersemail" /></p>
</fieldset>
<fieldset>
<legend>Widget Details</legend>
<p>What type of widget are you having problems with?</p>
<p><select size="1" name="widget">
<option value="acqua">Acqua Widget</option>
<option value="blue">Blue Widget</option>
<option value="black">Black Widget</option>
</select></p>
</fieldset>
</form>
</body>
</html>

HTH!

cheers,

               Mark

MG Web Services
Web Site Hosting and Development
www.markgroen.com
604-780-6917
Bowen Island, B.C., Canada



More information about the thelist mailing list