Can I Place Text in Thick Top Border

Forum Moderators: not2easy

Message Too Old, No Replies

Can I Place Text in Thick Top Border

pab1953

6:07 pm on Sep 10, 2007 (gmt 0)

I have a solid black border that's 15px thick at the top and 1px thick the other three sides. I'd like to place some white text in that top border width. Is it possible?

Marshall

6:35 pm on Sep 10, 2007 (gmt 0)

There are two ways to do this. The first is use a negative margin, the second is eliminate the top border and have the first <p> with a black background. You can copy and paste the example below to test it, but it seems to me the font size will be rather small if you want any padding.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Top Border</title>
<style type="text/css">
/* This uses a negative margin */
#one {
border: 1px solid #000;
border-top-width: 15px;
background-color: #FFF;
}
#one p.title {
font-size: 11px;
font-weight: bold;
color: #FFF;
margin: -15px 0 2px 0;
padding: 0;
text-align: center;
}
/* This eliminates the top border */
#two {
border: 1px solid #000;
border-top-width: 0;
background-color: #FFF;
}
#two p.title {
font-size: 11px;
line-height: 15px;
font-weight: bold;
color: #FFF;
background-color: #000;
margin: 0;
padding: 0;
text-align: center;
}

</style>
</head>

<body>

</body>

</html>

Marshall

[edit] I only tested this in IE7 so I do not make any promises [/edit]

[edited by: Marshall at 6:40 pm (utc) on Sep. 10, 2007]