Industry guru Dave Taylor answers free tech support questions about a wide variety of business and technical topics, including blogging, Google AdSense, MySpace, Sony PSP, Apple iPod, Mp3 players, management, Linux, SEO, Mac OS X, Facebook, Twitter, LinkedIn and Microsoft Windows.

SupportSpace: Immediate Live Tech Support. Free Assessment + $10 coupon!!

How do I tuck my corporate motto under my site name in CSS?

I'm trying to get my company motto tucked right under my site URL in my header using CSS and can't quite get it right. I tried <h4> </h4> instead of <p></p>. Motto is showing up above domain name, still having trouble getting motto under domain name. Here's my code:

<div id="header">
<div id="logo">
<h1><a href="#">mywebsite.com</a></h1><br />
<p><i>My motto here.</i></p>
</div>
</div>

and I have a bunch of complicated CSS, but it just isn't working. Help!

Dave's Answer:

No, the CSS positioning that you have in your style is going to mess things up, coupled with the spacing that the h4 and p tags force on your layout too. I would skip the h1 and p and I and use CSS instead. Like this:

<div id=”header”>
<div id=”logo”>
<a href=”#”>mywebsite.com</a>
</div>
<div id=”motto”>
your witty motto
</div>
</div>

Now, in your CSS you can do something like this:

See what I'm doing? Let the CSS do all the spacing and line height work and you’ll find that you have complete control over your spacing. Further, recall that margin AND padding control the space around the contents of a container like “div”, so you need to tweak it below the top one AND above the bottom one.

Try that, see if it helps you get where you want. Note, however, that if you make your URL clickable then you have a more complicated issue with formatting because you can’t just use the formatting in the ID, but need to touch the style itself. Quite doable, but more tricky...

Help others find this article at Del.icio.us, Digg, Netscape, Reddit, and Simpy.

Subscribe!

Never miss another useful Q&A article again! Subscribe to AskDaveTaylor with Google Reader.

Comments

You should use h1 and h2 instead of divs. It is more semantic and can give the same result.

<div id="header>
<h1>Title</h1>
<h2>Subtitle</h2>
</div>

then in ou stylesheet use the following selectors: #header h1, and #header h2. You shouldn't need #header if you correctly use h3, h4, h5, h6... for the next titles in your site.

You may have to reset margin and padding of h1 and h2 and other elements to zero before setting your own as different web browsers behave differently with default values...

Posted by: Damien Le Berrigaud at November 27, 2007 12:55 AM

I have a lot to say, but ...

I have a lot to say, and questions of my own for that matter, but most of all I'd like to say thank you for all your efforts on this Web site by buying you a chai!

I do have a comment, now that you mention it!