Support » Themes and Templates » Header position

  • Resolved mesiasarg

    (@mesiasarg)


    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

Viewing 11 replies - 1 through 11 (of 11 total)
  • 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>

    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 (:

    <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

    <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

    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

    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

    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;
    }

    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

    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.)

    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.

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

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Header position’ is closed to new replies.