Member Avatar for hknight

I want to place a styled box with rounded corners around text in a heading.
[IMG]http://d9qjx79zqpo3.googlepages.com/h2Goodz.gif[/IMG]
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.
[IMG]http://d9qjx79zqpo3.googlepages.com/h2Badz.gif[/IMG]
Here 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>
  • 2 Contributors
  • 1 Reply
  • 151 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by MJ Pieterse
Member Avatar for MJ Pieterse

you'll have to create three 'slices' of an image. a top, middel and bottom, where the top and bottom is a set size and the middel is repeated-y.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.