SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Location
    Fort Morgan, Colorado, United States
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    H1 Tag Throws Off Positioning

    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:

    HTML Code:
    #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:

    HTML Code:
    #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
    Attached Images Attached Images

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    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 )

  3. #3
    SitePoint Member
    Join Date
    Feb 2013
    Location
    Fort Morgan, Colorado, United States
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Member mamahadija's Avatar
    Join Date
    Apr 2014
    Location
    South Africa
    Posts
    13
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    h1 {display:block}
    this will make the h1 behave like a block element instead of an inline element

  5. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by mamahadija View Post
    h1 {display:block}
    this will make the h1 behave like a block element instead of an inline element
    <h1> is a block element by default...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •