WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Header position (12 posts)

  1. mesiasarg
    Member
    Posted 5 years ago #

    I've got into troubles trying to center my header..
    I want to have in centred and on the top

    Have a look on what happened>> see

  2. vietknight
    Member
    Posted 5 years ago #

    You should be looking here:

    <div id="header">
      <div class=image>    <img src=http://archi212.funpic.de/aex/wp-content/themes/motion/header.png width="658" height="139" alt="Architecture eXclusive" /> </div>
    </div>

    When you declare a class, you need to include quotes:

    Change the following to:

    <div id="header">
      <div class="image">    <img src=http://archi212.funpic.de/aex/wp-content/themes/motion/header.png width="658" height="139" alt="Architecture eXclusive" /> </div>
    </div>
  3. mesiasarg
    Member
    Posted 5 years ago #

    Thks for your information.
    I changed it, but i still have the header in the same place..

    If you could give me a solution to this I would really appreciate it (:

  4. vietknight
    Member
    Posted 5 years ago #

    <div id="header">
      <div class=<strong>"</strong>image<strong>"</strong>>
        <div<strong> align="center"</strong>><img src=http://archi212.funpic.de/aex/wp-content/themes/motion/header.png width="658" height="139" alt="Architecture eXclusive" /> </div>
      </div>
    </div>

    You need to change the word image to "image" with quotes, as I stated in the last post. You won't need to use div align="center" because the class image has already declared it as centered.

    Also, inside your Style.css file, I'll bold the one you're missing so you can add it.

    you are missing a ;

    .image {
    text-align: center;
    position: absolute;
    top: 0;
    display:block;
    	margin-left: auto;
    	margin-right: auto<strong>;</strong>
    }

    Everything here that I've bolded, you need to change.

    Hopefully that helps

  5. vietknight
    Member
    Posted 5 years ago #

    <div id="header">
    <div class="image">
    <div align="center"><img src=http://archi212.funpic.de/aex/wp-content/themes/motion/header.png width="658" height="139" alt="Architecture eXclusive" /> </div>
    </div>
    </div>

    You need to change the word image to "image" with quotes, as I stated in the last post. You won't need to use div align="center" because the class image has already declared it as centered.

    Also, inside your Style.css file, I'll bold the one you're missing so you can add it.

    you are missing a ;

    .image {
    text-align: center;
    position: absolute;
    top: 0;
    display:block;
    margin-left: auto;
    margin-right: auto;
    }

    Everything here that I've bolded, you need to change.

    Hopefully that helps

  6. vietknight
    Member
    Posted 5 years ago #

    You need to change the word image to "image" with quotes, as I stated in the last post. You won't need to use div align="center" because the class image has already declared it as centered.

    From:

    <div id="header">
      <div class=image>
        <div align="center"><img src=http://archi212.funpic.de/aex/wp-content/themes/motion/header.png width="658" height="139" alt="Architecture eXclusive" /> </div>
      </div>
    </div>

    To:

    <div id="header">
      <div class="image">
        <img src=http://archi212.funpic.de/aex/wp-content/themes/motion/header.png width="658" height="139" alt="Architecture eXclusive" /> </
      </div>
    </div>

    Also, inside your Style.css file, I'll bold the one you're missing a semicolon, so add it in at the end after margin-right:

    From:

    .image {
    text-align: center;
    position: absolute;
    top: 0;
    display:block;
    	margin-left: auto;
    	margin-right: auto
    }

    To:

    .image {
    text-align: center;
    position: absolute;
    top: 0;
    display:block;
    	margin-left: auto;
    	margin-right: auto;
    }

    Everything here that I've bolded, you need to change.

    Hopefully that helps

  7. mesiasarg
    Member
    Posted 5 years ago #

    Thx for your help, I really appreaciate it.. I've changed the things you told me, but I've still got the header image on the left side..:S

    I don't know.. it's there somthing missing..

    Thx a lot for your help

  8. vietknight
    Member
    Posted 5 years ago #

    I've tested it this time and this method should work with no possibility of error.

    Change this in your css from:

    .image {
    text-align: center;
    position: absolute;
    top: 0;
    display:block;
    	margin-left: auto;
    	margin-right: auto;
    }

    To

    .image {
    text-align: center;
    }
  9. mesiasarg
    Member
    Posted 5 years ago #

    Seems to be better now thx a lot (:
    But the image is still not centered. It's now on the left side and it's not over the text, which is good.

    Thx

  10. vietknight
    Member
    Posted 5 years ago #

    Wow, this is alot more tedious than I thought it would be...

    Check your CSS file for this:

    img {
    	float:right;
    	padding:5px;
    	background:#fff;
    	margin:0 0 20px 20px;
    	border:1px solid #eee;
    }

    Change to this:

    img {
    	float:center;
    	padding:5px;
    	background:#fff;
    	margin:0 0 20px 20px;
    	border:1px solid #eee;
    }

    It seems you have so many things that are declaring styles for that one image, as you can see, you have img and .image both at once. Hopefully this will fix it now!

    I wouldn't recommend you use img though because it is universal, which means that every image you put on that page will be subjected to those css styles. Perhaps, it would be better if you just copied that and put it into the "image" css declaration if you get what I mean. (This is unless you are only planning to have that one image showing on that page, in which case you can leave everything as is.)

  11. RoseCitySister
    Member
    Posted 5 years ago #

    For #header, put margin-left: auto and margin-right: auto in the stylesheet, and a text-align: center on the body. That will fix it.

  12. mesiasarg
    Member
    Posted 5 years ago #

    Cool I really appreciate your help.. now it works :)
    If I could vote for you I would do it.. thanks a lot

Topic Closed

This topic has been closed to new replies.

About this Topic