Support » Themes and Templates » Why is the header styled off the h1?

  • WordPress: <h1 id=”header”>. This makes it difficult if not down right impossible to position a picture in the head, while at the same time positioning the <h1> text. My 2 pennies, make the header and footer divs, so we can text positioning in them. I’ll be happy to listen to any thoughts, comments, even the jabs at my CSS inexperience.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Oh Ya, I’m trying to play nice – NO HACKING index.php!
    Thanks again

    id=”header” allows you do do just that…

    My concern while we are upgrading so much is that if you are running multiple WPs (say 10) for assorted clients, family, friends and your own interests, any hacking of index is unwelcome. What we need is a Perl script maybe?

    Actually, hacking (changing) index.php is encouraged now that I think about it. The WP docs contain information about the various template tags and their parameters. This information is there so we can *use* it. The way we use it, is to change it in our index.php.
    Now, if you always want your blog(s) to have the default functionality, with no changes, then you’ll need to avoid editing index.php. I think for most people, that’s not the case, however. I’ve seen a lot of WP blogs, and almost all of them have changed something from the default.
    So far (since 1.01), I’ve been successful in keeping my modified index.php throughout various upgrades…the functions I’m using in index.php seem to be called in the same way, and they don’t really care how I wrap my divs or id my headers, so it’s been a safe process…

    What about using image replacement?

    I understand I can put a picture in the h1 using CSS, but my problem stems from the fact I hace a picture for the background that approx 100px high, and no I want to position the text for a beter placement in the picture. Everytime I apply positioning to the h1 it effects the background piture as well. My goal is not to touch the index.php and my original thought was having the header and footer be divs unto themselves so you can position them, then position the text within them. I was hoping to submit a style sheet to for use with the style swutcher hack. I’ll just have to use a different picture or go with a solid color background.
    Thanks for all the advice guys.

    How about a link to the site? Maybe that can help us devise a solution. Also, you could put a background image on the #RAP div instead of the h1, and position it in that div so that it doesn’t matter where you move the h1.
    Just a thought.

    Great idea moose… I wasn’t thing outside the “div.” I’ll give it a try!

    You can add adjust the <h1>‘s padding to effectively change the position of the text relative to the background.
    For example, if your graphic is 100px high and you want the bottom-left corner of the heading to be inset 10px horizontally and vertically from the bottom left corner of the image, you could have:<pre>
    h1 {
    background: green url(images/green-leaves.jpg) no-repeat bottom left;
    height: 100px;
    width: 100%;
    padding-bottom: 10px;
    padding-left; 10px;
    (Caveat: I haven’t tried this code myself.)

    I’ve never had any problems doing this with my site. I use a background-image to put a picture in, and then text-align combined with padding to position my text.
    It takes a little creative CSS, but it’s more than doable.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Why is the header styled off the h1?’ is closed to new replies.