H1 Tag Throws Off Positioning

HTML & CSS
1

I am trying to add more structure to the site I’m working on. This is a page I’ll be using as a reference: http://www.morgancc.edu/admissions/apply

The header with the page title on the left (“Apply”) had been styled by the following CSS:

#titlebar_subpages_pagetitle {
	width:773px;
	height:32px;
	margin-left:10px;
	padding:5px 0px 0px 15px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:23px;
	font-weight:bold;
	color:#003866;
	float:left;
}

However, I wanted to put H1 tags around the page title using the following CSS:

#titlebar_subpages_pagetitle {
	width:773px;
	height:32px;
	margin-left:10px;
	padding:5px 0px 0px 15px;
	float:left;
}
#titlebar_subpages_pagetitle h1 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:23px;
	font-weight:bold;
	color:#003866;
}

As you can see, I took all of the font information out of the original div and put it into a second div that now has the H1 attribute. (So that the style would only apply to the H1 tag within that div.) However, when I wrapped the page title in H1 tags, it really threw off the positioning. (See attached screenshot.)

Any ideas on how to fix this?

Terri

2

[font=calibri]I assume that means that your HTML is now
<div id="titlebar_subpages_pagetitle"><h1>Apply</h1></div>

If so, that’s redundant code. You would do better to change it to something like
<h1 id="titlebar_subpages_pagetitle">Apply</h1>
so that you don’t have unnecessary <div>s cluttering up the place.

You could then go back to your original CSS, but you would probably need to add in a line to zero out the top and bottom margins, which come by default with an <h1>, and that is why the text is now being pushed down. (Of course, you could add that line in on your new CSS, which would fix the rendering problem but you would still be left with ugly code :cool: )[/font]

3

Thanks! Your suggestion worked. I did have to play around with some of the margins and padding of the containing div, but it now looks like it should. (Also, thanks for the h1 info. I did not know that it added margins.)

4

h1 {display:block}
this will make the h1 behave like a block element instead of an inline element

5

<h1> is a block element by default…