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