Jump to content

Styled Box With Rounded Corners Around Text

hknight

By hknight
in CSS

Recommended Posts

hknight Newbie

hknight

Posted
Posted

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
mmcspadden Newbie

mmcspadden

Posted
Posted

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
real_illusions Dedicated Member

real_illusions

Posted
Posted

<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
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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>

Link to comment
Share on other sites
sckewi Newbie

sckewi

Posted
Posted

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;}

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

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>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...