border only around text, not full container width

**mlegg** · 12-01-2011, 12:27 AM

I only want the border to be around the words and not to stretch to the full container width. It's on this page near the bottom.

CSS

Code:




.border 
 { 
border-style:solid;
border-color:#ff0000;
overflow:hidden;
 }

The full HTML code is in the below post. The part that has the border is this line:

Code:

<div style="text-align: center;">
 <h2><span class="border">An Eight Week Action Plan & Other Support<br> 
Options Are Included With Your Guest Service Magic Seminar.</span></h2></div>

**mlegg** · 12-01-2011, 12:28 AM

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="language" content="english">

<meta http-equiv="Content-Style-Type" content="text/css">

<meta name="google-site-verification" content="Q5swrJ-fHXp-HR-4BrZG4n8cRvEQutF0uINUTSctWd8" />

<title>Peter Scotts Competitive Edge</title>


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<META NAME="DESCRIPTION" CONTENT="Peter trains regularly on the subjects of Leadership, Team Building, Customer Service, Sales Enhancement, Creating a More Positive and Fun Workplace, Conflict Resolution and the Pursuit of Excellence.">
<META NAME="KEYWORDS" CONTENT="corporate training, training and development, peter scott, corporate magic, fire walking, professional speakers, training, competitive edge, leadership, customer service, seminars, workshops, customer service training, leadership training, Casino, Gaming, Property, Hard Rock, Gambling, Hospitality, Hotel, Consulting, Development, Food and beverage, Hotel, Frontline, Team, Teambuilding, Property, Customer service, Moneyback, Reasonable Rates, Testimonial Video, Native American, Life lesson, Team bonding, Feedback, Skill sets, Inn of the Mountain Gods Resort & Casino, Positive, Attitude, Retention, Interactive, Role play, Enhancement, Unique, Dynamic, Participants, Game show, Engages">
<link rel="stylesheet" type="text/css" href="styles.css"><!--[if IE 6]>

<link rel="stylesheet" type="text/css" href="ie6styles.css">
<![endif]-->



<LINK REL="SHORTCUT ICON" HREF="images/favicon.ico">

<style type="text/css">
 li.c1 {border:none}
</style>



<style type="text/css">
 div.c2 {text-align: center}
 img.c1 {border:0;width:88px;height:31px}
</style>


<style type="text/css">
.border {
    border: 5px #FF0000 solid;
    display: block;
    outline:none;
  }
</style>
</head>
<body>
<div style="text-align:center;"><img src="images/Banner.jpg"></div>
<div id="container">
<!-- Start PureCSSMenu.com MENU -->
<ul class="pureCssMenu pureCssMenum">
	<li class="pureCssMenui0"><a class="pureCssMenui0" href="index.html">Home</a></li>
	<li class="pureCssMenui0"><a class="pureCssMenui0" href="programs.html">Programs</a></li>
	<li class="pureCssMenui0"><a class="pureCssMenui0" href="references.html">References</a></li>
	<li class="pureCssMenui0"><a class="pureCssMenui0" href="rates.html">Rates</a></li>
	<li class="pureCssMenui0"><a class="pureCssMenui0" href="faq.html">FAQ's</a></li>
	<li class="pureCssMenui0"><a class="pureCssMenui0" href="about.html">About Peter</a></li>
        <li class="pureCssMenui0"><a class="pureCssMenui0" href="contact.html">Contact</a></li>
</ul>
<a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a>
<!-- End PureCSSMenu.com MENU -->

<div class="one">

<div style="text-align: right;">
<object width="144" height="30">
   <param name="src" value="mp3/Guest Service Magic.mp3">
   <param name="autoplay" value="true" />
   <param name="loop" value="false" />
   <param name="controller" value="true" />
   <param name="bgcolor" value="#666" />
   <embed src="mp3/Guest Service Magic.mp3" autostart="true" controller="true" loop="false" width="144" height="30" controller="true" bgcolor="#666666" />
</object></div>
<div style="text-align: center;">
<h1>Guest Service Magic</h1>
        <br>
   <img src="images/celebration.gif" alt="a celebration of guest service excellence">
</div>
 

          <p><b>"Move from Good To <u><i>Super-Fantastic</i></u> with a Dynamic-Fun-Fast-Paced-Content Driven Customer Service Seminar Experience." &minus; Peter Scott</b></p> <br>
    <ul>
        <li>Create A Deeper Sense of Personal Responsibility and Commitment in Your Staff</li><br>
        <li>Learn How To Strategically Interact & Manage Your Impressions With Guests. </li><br>
        <li>Discover 17 Tools To Reduce Stress & Enhance Your Life </li><br>
        <li>Identify How To Create Long Lasting Guest Relationships    </li><br>
        <li>Design & Become the Ultimate Guest Service Professional </li><br>
        <li>Learn How To Overcome Negativity That Affects Job Performance    </li><br>    
        <li>Explore 16 Techniques For Effectively Managing Problematic People in Difficult Situations.</li><br>        
        <li>Learn Effective Enhanced Communication Skills</li><br>
        <li>Understand The True Value of a Lost Guest  </li><br>      
        <li> Insure the Future Success of Your Organization. </li><br>       
        <li> And So Much More!</li>
       </ul> 
<div style="text-align: center;">
 <h2><span class="border">An Eight Week Action Plan & Other Support<br> 
Options Are Included With Your Guest Service Magic Seminar.</span></h2></div>

<p><i>"He engages people emotionally and verbally.  Most trainers don't do that.  He creates a sense of teamwork and camaraderie in the training that I find pretty unusual." </i><br>

Darrell Nott, GM<br>
    Big Rock Casino    <br>
   </p><br>
<div style="text-align: center;">
<a href="topic_select.html">Custom Designed Programs</a>
           <h1>Ask Me About My Money Back Guarantee!</h1>
<a href="contact.html">Contact Peter Now</a><br></em></strong></div>
</div>
<div style="clear:both"></div>
</div>   
 <div id="footer">Copyright &copy; Peter Scott's Competive Edge | <a href="mailto:Peter@PsCompetitiveEdge.com">E-Mail</a></div>
</div>
<!--end #container --></div>
</body>
</html>

**coothead** · 12-01-2011, 09:20 AM

Hi there mlegg,

try changing this...

Code:


<div style="text-align: center;">
<h2><span class="border">An Eight Week Action Plan &amp; Other Support<br> 
Options Are Included With Your Guest Service Magic Seminar.</span></h2></div>

...to this...

Code:


<div style="text-align: center;">
<span style="display:inline-block;padding:5px;border:5px solid #f00;font-size:140%;font-weight:bold;">
An Eight Week Action Plan &amp; Other Support<br> 
Options Are Included With Your Guest Service Magic Seminar.
</span>
</div>

coothead