CSS problem: H1 with different font style embedded in a single-line text link
Hi,
I just can't seem to get my head around this one. I have a website title which appears on every page. The whole title is a link to the home page of the website. I want the second part of the title to be a h1 header with smaller font in a different colour to the first part. I also want the whole title to be on one line.
I can only seem to get either all the words in the same font, or I can get the two parts to display their different fonts correctly, but they then appear on two lines, one under the other!
My page code:
<div id="garden-designer-title">
<a href="(*website address*)" title="home">Joe Blogs</a>
<h1 style="display: inline'"><a href="(*website address*)" title="home">Garden Design</a></h1>
</div>My stylesheet code:
#garden-designer-title {
position:relative;
left:0px;
top:0px;
padding: 0;
margin: 0;
width:526px;
height:51px;
z-index:7;
}
#garden-designer-title a {
position:relative;
font-size: 46px;
font-family: verdana, arial, helvetica, sans-serif;
color: #009999;
font-weight: normal;
text-decoration: none;
}
#garden-designer-title h1 a {
display: inline;
font-size: 29px;
font-family: verdana, arial, helvetica, sans-serif;
color: #9482A4;
font-weight: normal;
text-decoration: none;
}Does anyone know what I'm doing wrong?!
Many thanks!
bloatyhead posted this at 12:39 — 9th June 2010.
They have: 2 posts
Joined: Jun 2010
Oh I think I've just worked it out!! I have just added another section of code in my stylesheet:
#garden-designer-title h1 {
display: inline;
font-size: 29px;
font-family: verdana, arial, helvetica, sans-serif;
color: #9482A4;
font-weight: normal;
text-decoration: none;
}
It recognises this, and now it is all displaying on one line with the correct font variation
Megan posted this at 15:32 — 9th June 2010.
She has: 11,421 posts
Joined: Jun 1999
Okay, a few issues here. First of all, I would probably mark this up differently. The h1 should probably be used for the title of the individual page, not for the overall site title. See my blog post about that here:
http://meganmcdermott.com/2007/05/01/using-the-h1-tag/
So you could mark this up like this:
<div id="#garden-designer-title"><h2><a href="(*website address*)" title="home">Joe Blogs</a></h2>
<p><a href="(*website address*)" title="home">Garden Design</a></p>
</div>
Think about the mark-up independently of how you want it to display. The semantics of the code should be your priority with HTML. If you wanted to change how it was displayed, would it still make sense?
Now that those are separate elements it's easy to set them both to display inline.
Another thing you should do is try to reduce the font-family specifications. You should only need to specify those on a higher level. If your entire page is in verdana, arial, helvetica, sans-serif, this should be in the body tag not in each individual element.
Hope that helps, and welcome to the forums!
Megan
Connect with us on Facebook!
webwiz posted this at 19:40 — 9th June 2010.
He has: 629 posts
Joined: May 2007
Alternatively, you could use this HTML and style to taste:
<h2><a href="whatever.html">Famous Web Article <small>- my best effort to date</small></a></h2>Cordially,
David
--
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.