CSS Alignment

[Cira]

Hi Everybody,

I suppose this is a good enough post to start with as any. Im sorry if this has been done to death by everybody and im sure it will have been.

Ok so yesterday i started to make my first web page based on a PS design i made.

I have written all of the HTML and im now moving onto the CSS.

For some reason unknown to me i cant get my header graphic to center. Below is the HTML code for the specific area followed by the CSS.

Thanks for looking and hopefully helping lol.

Dave

HTML....

<div =id"header" class="header center">
<img src ="images/header.png" width ="872" height ="138" alt ="header" class="pngimg"></div>
<div =id"body" class="body_layout">

CSS....

#header {
 position: absolute;
 margin-left: -436px;
 left: 50%;
 top: +0px;
 width: 872px;
 height: 138px;
 z-index: 1;
}

[robzilla]

Hello Dave, welcome to WebmasterWorld.

Firstly, you need to make sure your HTML syntax is correct.

Your code:

<div =id"header" class="header center">
<img src ="images/header.png" width ="872" height ="138" alt ="header" class="pngimg"></div>
<div =id"body" class="body_layout">

Corrected:

<div id="header" class="header center">
<img src="images/header.png" width="872" height="138" alt="header" class="pngimg"></div>
<div id="body" class="body_layout">

Apart from correcting the syntax of

=id"header"

to

id="header"

, I've also removed the spaces you inserted intro attribute definitions such as

width ="872"

(should be

width="872"

).

Also, I see you are referring to the classes named "header", "center" and "pngimg", but I don't see these actually defined in your CSS code. Have you left these out intentionally?

[Cira]

Ohh my days i feel so stupid now.

Haha thank you very much that has fixed it!

Regarding the "pngimg" no i haven't does that not need to be in there? or does it and i just need to define it?

Regards

[robzilla]

Great. When troubleshooting your code, always make sure your HTML and CSS validate (find more tips in CSS Troubleshooting [webmasterworld.com]).

Regarding the "pngimg" no i haven't does that not need to be in there? or does it and i just need to define it?

That depends on whether or not you wish to style the image using your CSS file.

Note that this will also work to center your header:

#header {
width: 872px;
height: 138px;
margin: auto;
}

If you're new to CSS, have a look at this thread: CSS Crash Course - Introduction [webmasterworld.com]

[Cira]

Excellent that you very much for your help.

I will check that out im undergoing a crash course at the moment but a very much trial and error process.

[lucy24]

I've also removed the spaces you inserted intro attribute definitions such as width ="872" (should be width="872")

Why? Is there a browser in actual use that can't deal with the spaces? The validator doesn't care, and it makes the html easier to read.
____

Cira, the word "class" refers to anything that is actually in your CSS on the right-hand side of the dot.
So CSS

p.center {your individual blahblah here}

goes with HTML

<p class = "center">

If you want all your paragraphs, or images, or headers to behave the same, say so in the CSS only as

p {blahblah here}

When looking up a property in the CSS Index [w3.org] (bookmark this page!) always look at what it gives for "initial". That's what the user's browser will do if you don't say anything to the contrary. Or, ahem, what it should do.

[robzilla]

it makes the html easier to read

Does it? Not for me. Spaces separate attributes, not attributes and values. Without spaces, they're logically connected. And every space is a byte; on a complex page, you'd be adding hundreds of unnecessary bytes.

<img src ="image.png" width ="10" height ="10" alt ="">

vs.

<img src="image.png" width="10" height="10" alt="">