Can't get my title centered!

Discussion in 'CSS' started by cavemanlawyer15, Oct 29, 2007.

  1. #1
    My software manufacturer provided me with a ready-to-go design with a very questionable element: a title tag which is left-justified starting in the center. Sound ridiculous? It is:

    http://www.clicksharpmarketing.com/beta/cds

    Does anyone know how I can get this title and subtitle to center? My client's site is supposed to go live in 48 hours...and I completely agree with her that right now it looks ridiculous.

    Thanks in advance!
    PB
     
    cavemanlawyer15, Oct 29, 2007 IP
  2. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #2
    The CSS is atrocious, hack infested... I would rewrite that whole thing from scratch but here's a quick fix that centers the title.

    You might run into problems if you're using an h1 anywhere else though. Not even sure why it was being floated right in the first place.

    EDIT: Looks like you got it.. removed the float from the h1..
     
    soulscratch, Oct 29, 2007 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #3
    Great zhu - what is up with the code for that page?

    I hate to say this, but with all that inlined presentation, hordes of nested tags that don't seem to do anything but bloat it out...

    The whole page needs to be chucked and started over. You've got 10k of html for something that shouldn't even top 3k... In fact I'm amazed that mess only throws 19 validation errors.

    Here's a hint, this is ALL the HTML that page should need:
    
    <!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" xml:lang="en" lang="en"><head>
    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    
    <title>
    	Mission Statement | Camille DeSimone
    </title>
    
    <meta name="robots" content="all" />
    
    <link rel="Shortcut Icon" type="image/x-icon" href="_Media/favicon.ico" />
    
    <link rel="stylesheet" type="text/css" 
    	href="sandvox_Mezzanotte2_1_1/main.css" 
    	media="screen, projection" />
    
    </head><body>
    
    <div id="container">
    
    	<h1>
    		<strong>Camille DeSimone</strong>
    		Medical billing is our family business.
    	</h1>
    
    	<ul id="mainMenu">
    
    		<li class="current">Home</li>
    		<li><a href="dietitians.html">Dietitians</a></li>
    		<li><a href="cardiologists.html">Cardiologists</a></li>
    		<li><a href="clients.html">Clients</a></li>
    		<li><a href="resources.html">Resources</a></li>
    		<li><a href="blog.html">Blog</a></li>
    		<li><a href="meet_the_staff/">About</a></li>
    		<li><a href="contact.html">Contact Us</a></li>
    	</ul>
    
    	<div id="contentWrapper"><div id="content">
    		<h2>Mission Statement</h2>
    		<p>
    			We are medical billing professionals with over 20 years of 
    			experience in the field. &nbsp;Our goal is to provide seamless
    			medical billing to give your practice the highest level of 
    			reimbursement.
    		</p>
    
    		<h3>Specializing in:</h3>
    		<ul>
    			<li><a href="dietitians.html">Registered Dietitians</a></li>
    			<li><a href="cardiologists.html">Cardiology</a></li>
    			<li>Internal Medicine</li>
    			<li>Psychotherapy</li>
    			<li>Dermatology</li>
    		</ul>
    
    		<h3>Services include:</h3>
    		<ol>
    			<li><a href="contact.html">Free telephone consultation</a></li>
    			<li>Free setup</li>
    			<li>Manual review of your claim prior to submission</li>
    			<li>Follow up on your prior problem claims</li>
    		</ol>
    	
    	</div></div>
    
    	<div id="sidebar">
    		<img
    				src="_Media/cd_logo_v4_200_by_165_sidebar.png"
    				alt="CD logo v4 200 by 165"
    				width="200"
    				height="165"
    				class="barImage"
    		/>
    		<div class="phoneNumber"><span>Office:</span> (973) 853-4353</div>
    		<div class="phoneNumber"><span>Fax:</span> (973) 853-4361</div>
    		<div class="downloadGuide">
    			<a href="_Media/registered_dietitian_reimbu.PDF">Download 
    			MNT Reimbursement &quot;Getting Started&quot; guide for 
    			dietitians!</a>
    		</div>
    		<img
    				src="_Media/photo_camille_crop_sidebar.jpeg"
    				alt="photo_camille_crop"
    				width="200"
    				height="240"
    				class="barImage"
    		/>
    	</div>
    
    	<div id="footer">
    		<a href="site_map.html">Site Map</a> -
    		<a href="http://www.clicksharpmarketing.com">
    			Website Design &amp; Marketing by Clicksharp
    		</a>
    	</div>
    </div>
    
    <script 
    	src="http://www.google-analytics.com/urchin.js" 
    	type="text/javascript"
    ></script>
    <script type="text/javascript">
    	_uacct = "UA-2589031-1";
    	urchinTracker();
    </script>
    
    </body></html>
    
    Code (markup):
    I don't know what 'sandvox' is, but if that's what it outputs I suggest chucking it in the trash as it makes frontpage circa 1997 look good. In fact, that is the most steaming pile of code I've seen in since I took over a site that was designed in HotMetal...

    Oh I see, it's a crap wysiwyg for the Mac based on Webkit... no wonder it outputs crap.

    (oh, in the CSS the spans inside .phoneNumber I'd use to set the text to the same width so the numbers line up - or I'd center both and lose the spans)
     
    deathshadow, Oct 29, 2007 IP