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.

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:

<style type=”text/css”>
#logo { font-size:175%; font-color:#333; font-family: sans-serif; padding-top: 8px;
  padding-bottom: 1px; margin-bottom: 1px; }
#motto { font-size:120%; font-color:#333; font-family: sans-serif;
  padding-bottom: 8px; padding-top: 1px; margin-top: 1px; }
</style>

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 ...
Starbucks coffee cup 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!









Remember personal info?


Please note that I will never send you any unsolicited commercial email. Ever.

While I'm at it, please note that by submitting a question or comment you're agreeing to my terms of service, which are: you relinquish any subsequent rights of ownership to your material by submitting it on this site.









Uniblue: Free Virus Scan

Search
Find just the answers you seek from among our 1700+ free tech support articles by using our Lijit search engine.


Help!





Subscribe to
Ask Dave Taylor!

Add to Google Reader
Add to My Yahoo!
Subscribe in NewsGator Online

RDF   XML

Free Updates!
Sign up and get free weekly updates and special offers on books, seminars, workshops and more.


Recent Entries
Join the List!
Join my author info mailing list, where you'll learn about my upcoming books, speaking gigs, and more!


Book Links
© 2002 - 2008 by Dave Taylor. All Rights Reserved.

Note: This web site is for the purpose of disseminating information for educational purposes, free of charge, for the benefit of all visitors. We take great care to provide quality information. However, we do not guarantee, and accept no legal liability whatsoever arising from or connected to, the accuracy, reliability, currency or completeness of any material contained on this web site or on any linked site.

[whiteboard marker tray]