WordPress.org

Ready to get started?Download WordPress

Forums

formatting issue with something before the loop (8 posts)

  1. Rob Poitras
    Member
    Posted 9 years ago #

    I put a image file before the loop in my index.php file.
    I used a simple html div tag
    <div align="center"><img src="header.jpg" width="760" height="150" align="top">
    In firefox it lines it just fine. In ie its shifted to the right by one pixel.

    edit:
    http://www.ourday-online.com/info/

    Any ideas?

  2. Lorelle
    Member
    Posted 9 years ago #

    Positioniseverything, a great clearing house and fixer for browers issues and will have what you may need to line this up.

    You should also know that "align=center" is no longer valid. It was deprecated years ago. The correct way to line up your header is with CSS. In your style.css file, I'd put the header graphic in the background of the header div and hae the div look like this:

    <div id="header">Title of Your Blog If You Have One</div>

    And in the CSS have it as:

    #header {background:ulr(header.jpg) top center no-repeat; height: 100px; width:100%; ......}

    Change the height and width to whatever you want to make it work. That might also clean up the problems you are having with the one pixel.

    The specifics are at http://www.w3.org/TR/REC-CSS2/colors.html

  3. Rob Poitras
    Member
    Posted 9 years ago #

    hrm. well I just tried it.
    I did:
    #header1 {background-image: url(ourday_home.jpg) top center no-repeat;
    height: 150px;
    width: 760px;}

    then in the index.php file below the get header and above content

    <div id="header1"></div>

    I have finance class tonight, then I will read up some more I guess. I love css sometimes...

  4. Lorelle
    Member
    Posted 9 years ago #

    You didn't say. Did it work?

    Some browsers don't like a div without "anything" in it, just CSS references, so you "might" have to fake it out by having:

    <div id="header1">&nbsp;</div>

    A character code for non-breaking space. You'll have to test it across several browsers to see. If you have a height and width in the div, it ususally works fine.

  5. Rob Poitras
    Member
    Posted 9 years ago #

    its not working... Hrm.
    So I took out the div id stuff and put this in:

    <style type="text/css">
    body
    {
    background-image:
    url('http://ourday-online.com/info/wp-content/themes/default/ourday_home.jpg');
    background-repeat:
    no-repeat;
    background-position:
    top center;
    }
    </style>

    still nothing is showing up.

  6. Rob Poitras
    Member
    Posted 9 years ago #

    bump for afternoon crew.

  7. Lorelle
    Member
    Posted 9 years ago #

    I don't know why you took it out of what you are calling the DIV stuff. It should have worked fine. Did you do a TOTAL refresh of your browser?

    Did you put the file in your website in the right folder? I do that all the time. Mess with it on my computer and then think it's all on the server. I thunk myself on the forehead many a time because of little things like that.

    Okay, I looked at your site in MSIE and Firefox and probably because I'm not looking for the little nitpicky details, they look the same. If there isn't something there you want to see, then it's not there. I don't know what I'm looking, but I'm trying.

    I did run a validation on your site and you have some funky stuff and normal things that need to be cleaned up, which may or may not be giving you the grief. These errors were enough that the CSS Validator wouldn't validate your CSS until the other stuff is fixed. Pain, but has to be done. Part of the sherlock holmes fun of web site design.

    Fix these errors and then tell me what is missing. And you seriously might want to reconsider putting the graphic back in the div and out of the body. Not that it will hurt much, but you now have a div that is just sitting there, unless you removed it totally from the site. I tend to keep the body tag for the most critical things and not for design elements, just to stay clean. I don't think it's a rule or anything. But with the graphic in the background of a div, you can control it much better. The body tag controls EVERYTHING in your web page, so changing a little bit to make the graphic show up could totally screw your site.

  8. Rob Poitras
    Member
    Posted 9 years ago #

    hrm.
    So i got it to work using the div id and putting the right code into the css file. but its still being shifted by a pixel in IE but fine in mozilla.
    here is what my css is:
    #header1 { background: url("mexico.jpg") no-repeat top center;
    height: 150px;
    width: 760px;
    }

    should I use a fixed position then say how many pixels over it should be?

    edit: wow, this is crazy. I just changed the 760 --> to 761. and it worked! haha. works in both ie and mozilla.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.