Jump to content

Styled Box With Rounded Corners Around Text


hknight
 Share

Recommended Posts

I want to place a styled box with rounded corners around text in a heading. h2Goodz.gif The problem is that the the heading may have one, two or three lines and I can't seem to get my box to adjust.h2Badz.gifHere is my code:I appreciate any help you can provide!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Title</title><style type="text/css" media="all">.specialHeader { background: #F4F1F1 url(http://d9qjx79zqpo3.googlepages.com/specialHeadingA.gif) no-repeat scroll 0 0; padding: 1px 0 0 0;}.specialHeader h2 { display: block; margin: 10px 0 0 0; padding: 0 0 0 10px; background: transparent url(http://d9qjx79zqpo3.googlepages.com/specialHeadingA.gif) no-repeat scroll 0 100%;}.specialHeader span { display: block; margin: 0; width: 100%; padding: 1px; background: transparent url(http://d9qjx79zqpo3.googlepages.com/specialHeadingB.gif) no-repeat scroll 100% 0;}.specialHeader em { text-transform: uppercase; display: block; text-style: normal; margin: 10px 0 0 10px; padding: 0; font-size: 18px; font-family: 'Trebuchet MS', Tahoma, sans-serif; color: #98002E; font-weight: 300; background: transparent url(http://d9qjx79zqpo3.googlepages.com/specialHeadingB.gif) no-repeat scroll 100% 100%;}</style></head><body><div class="specialHeader"><h2><span><em>Hello World</em></span></h2></div><div style="margin: 50px; width: 600px;"> <div class="specialHeader"><h2><span><em>Two<br />Lines</em></span></h2></div></div><div style="margin: 50px; width: 300px;"> <div class="specialHeader"><h2><span><em>This Has<br />Three<br />Lines</em></span></h2></div></div></body></html>

Link to comment
Share on other sites

Honestly although it is possible to get round corners with css, 95% of them still use pictures to create the corners. My suggestion is simply to take your background turn it into an image. Then set that image as the background for a div or table element of the same size. Then simply center your text.

Link to comment
Share on other sites

<h2><span><em>This Has<br />Three<br />Lines</em></span></h2> :) The span and em are not needed in there. The italic can be applied via CSS to the heading, and the span is just as useless.Anyway...back to your rounded corners. You can use CSS to apply the rounded corners that will work in Safari and Firefox, and use some javascript to apply the rounded corners to IE by using conditional comments. Or use the JS for all browsers to make it work in Opera too.

Link to comment
Share on other sites

you could use this method, which works in most browsers, that requires 3 images top, middle and bottom, with the middle image repeating itself to match content entered.http://dsonesuk.co.uk/testbox/index.htmimages used:top_row.gifmiddle.gifbottom_row.gif<!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>Untitled Document</title><style type="text/css">*{padding: 0; margin: 0;}body { background-color: #FFF; color: #000;} .outer2 { width: 275px; padding: 50px;} .middlecontent { margin: 0 0 0 10px; float: left; width: 253px; padding:0;} .middlecontent, .middleborderrow {height: inherit; height: 100%;} .topborderrow, .bottomborderrow, .middleborderrow { width: inherit; width: 100%; float: left; } .topborderrow, .bottomborderrow { height: 10px; } /*font-size required for IE6 to cancel height of font within div*/ .topborderrow { background-image:url(media/top_row.gif); background-repeat: no-repeat; font-size:0px;}.bottomborderrow { background-image:url(media/bottom_row.gif); background-repeat: no-repeat; font-size:0px;}.middleborderrow { background-image:url(media/middle.gif); background-repeat: repeat-y; text-align:left;}.specialHeader { text-transform: uppercase; font-size: 18px; font-family: 'Trebuchet MS', Tahoma, sans-serif; color: #98002E; font-weight: 300; float:left; font-style:italic;}</style><!--[if IE 7]><style type="text/css"> .middleborderrow {height: inherit; height: 100%; width: 100%; float: left; background-image:url(media/middle.gif); background-repeat: repeat-y; text-align:left;}.middlecontent { padding: 0; float: left; height: inherit; height: 100%; width: 253px; }</style><![endif]--> <!--[if lt IE 7]><style type="text/css">.middlecontent { padding: 0 22px; margin: 0px; width: 253px; }</style><![endif]--></head><body><div align="center"><!--COPY FROM HERE--><div class="outer2"><div class="topborderrow pngimgfix"></div><div class="middleborderrow pngimgfix"><div class="middlecontent"><!--ENTER CONTENT HERE--> <span class="specialHeader">Hello World</span> <!--END CONTENT HERE--> </div></div><div class="bottomborderrow pngimgfix"></div></div><!--TO HERE--><div class="outer2"><div class="topborderrow pngimgfix"></div><div class="middleborderrow pngimgfix"><div class="middlecontent"><!--ENTER CONTENT HERE--> <span class="specialHeader">Hello world<br />testing</span> <!--END CONTENT HERE--> </div></div><div class="bottomborderrow"></div></div><!--TO HERE--><div class="outer2"><div class="topborderrow"></div><div class="middleborderrow"><div class="middlecontent"><!--ENTER CONTENT HERE--> <span class="specialHeader">This Has<br />Three<br />Lines</span> <!--END CONTENT HERE--> </div></div><div class="bottomborderrow"></div></div><!--TO HERE--></div></body></html>

Edited by dsonesuk
Link to comment
Share on other sites

I'd do rounded corners somewhere along these lines (haven't tested it, and I'm assuming the graphics for the actual rounded corners are 32px in width/height):HTML

<div class="rounded"> <div class="top-left"> <div class="top-right"> <div class="content">  <h2>Hello World</h2>  <p>Testing</p> </div> <div class="bottom-left"> <div class="bottom-right"></div>

CSS

.rounded{ border: solid 1px black; background-image: url('rounded-background.png'); background-repeat: repeat-x;}.rounded .top-left{ background-image: url('rounded-top-left-border.png'); background-position: top left; background-repeat: no-repeat; position: absolute; top: -1px; left: -1px;}.rounded .top-right{ background-image: url('rounded-top-right-border.png'); background-position: top right; background-repeat: no-repeat; position: absolute; top: -1px; right: -1px;}.rounded .bottom-left{ background-image: url('rounded-bottom-left-border.png'); background-position: bottom left; background-repeat: no-repeat; position: absolute; bottom: -1px; left: -1px;}.rounded .bottom-right{ background-image: url('rounded-bottom-right-border.png'); background-position: bottom right; background-repeat: no-repeat; position: absolute; bottom: -1px; right: -1px;}.rounded .content{ position: relative; margin: 32px 32px 32px 32px;}

Edited by Sckewi
Link to comment
Share on other sites

Ok! heres your original design code, with the fixes to get it to work, and IE solution to get it work in IE 6 and 7

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Title</title><style type="text/css" media="all">.specialHeader { background: #F4F1F1 url(specialHeadingA.gif) no-repeat left top; /***************top left********/ padding: 3px 0 0 0; margin-top: 0px;  border: 0px dashed pink;}.specialHeader h2 { display: block; margin: 8px 0 0 0; padding: 1px 0 1px 10px; background: url(specialHeadingA.gif) no-repeat bottom left; /***************bottom left********/  border: 0px dashed black;   line-height: 18px;}.specialHeader span { display: block; margin: -11px 0 0 0px; width: 100%; padding: 1px; background: transparent url(specialHeadingB.gif) no-repeat right top; /***************top right********/  border: 0px dashed lime;}.specialHeader em { text-transform: uppercase; display: block; margin: 8px -1px -3px -2px; padding-bottom: 5px; font-size: 18px; font-family: 'Trebuchet MS', Tahoma, sans-serif; color: #98002E; font-weight: 300; background: transparent url(specialHeadingB.gif) no-repeat; background-position:bottom right; /***************bottom right********/ border: 0px dashed red;}</style><!--[if IE]><style type="text/css">.specialHeader span {  position: relative;  top: -11px;} .specialHeader em {margin-top: 0px;position: relative;bottom: -11px;}</style><![endif]-->           </head><body><div class="specialHeader"><h2><span><em>Hello World</em></span></h2></div><div style="margin: 50px; width: 600px;"> <div class="specialHeader"><h2><span><em>Hello World<br />Testing</em></span></h2></div></div><div style="margin: 50px; width: 300px;"> <div class="specialHeader"><h2><span><em>This Has<br />Three<br />Lines</em></span></h2></div></div></body></html>

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...