SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text OVER Border?

    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?

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    58
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yikes you're fast!!!

    Here's an image:
    Attached Images Attached Images

  4. #4
    SitePoint Zealot marbly's Avatar
    Join Date
    Nov 2005
    Location
    Croatia
    Posts
    178
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    somewhat exaggerated example here http://www.cssplay.co.uk/boxes/borderwrite.html


Bookmarks

Posting Permissions

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