Text OVER Border?

**Superorb** · Jul 21, 2006 11:44

I just spent the last hour or so trying to hunt down a way to make text appear over a border. I have seen it done before in positioned boxes where the text is used as aa title of the box, but I can't for the life of me find how to do it or even an example online. Anyone?

**all4nerds** · Jul 21, 2006 11:54

Hello

maybe not exactly what you need, but the container with text is moved over the border by a negativ margin

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>document title</title>
	<style type="text/css">

	/* mac hide \*/
	html, body {height:100%;}
	/* end hide */

	*{margin:0;padding:0;}
	
	body{font-size:75%;background:#a2a2a2;}
	
	div{font-size:1em;}
	
	/* fonts */
	p,b,a,pre,hr,h1,h2,h3,h4,li{
	text-align:left;
	}
	
	.wra{
	margin:0 auto;
	width:46em;
	background:#d8d8d8;
	border-left:18em solid #b7b7b7;
	}
	* html .wra{height:100%;}
	head+body .wra{min-height:100%;}
	
	.he,.l{position:relative;margin-left:-18em;}

	.he{background:#ff8c00;}
	* html .he{height:1px;}
	
	.l{
	float:left;
	width:18em;
	background:#b7b7b7;
	}
	
	* html .fcl{clear:both;height:0px;overflow:hidden;}
	head+body .fcl{clear:both;height:1px;overflow:hidden;margin-top:-1px;}
	
	.wra p{padding:.5em;}
	.wra .l p{padding:.5em;}
	.he h1{padding:.2em;}
	
	</style>
</head>
<body>

<div class="wra">

<div class="he">
<h1>header</h1>
<p>basic border</p>
</div>

<div class="l">
<p>
start
<!--  
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />-->
end
</p>
</div>
<p><a href="../../../layouts.htm">back</a></p>
<p>
start start start start start start start start start start start start start start start start start start start start 
start start start start start start start start start start start start start start start start start start start start 
start start start start start start start start start start start start start start start start start start start start 
start start start start start start start start start start start start start start start start start start start start 
start start start start start start start start start start start start start start start start start start start start 
start start start start start start start start start start start start start start start start start start start start 
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> -->
end
</p>

<div class="fcl"></div>
</div>

</body>
</html>

**Superorb** · Jul 21, 2006 12:12

Yikes you're fast!!!

Here's an image:

**marbly** · Jul 21, 2006 14:21

somewhat exaggerated example here http://www.cssplay.co.uk/boxes/borderwrite.html

User Tag List

Thread: Text OVER Border?

Thread Tools

Display

Text OVER Border?

Bookmarks

Bookmarks

Posting Permissions