Welcome to WebmasterWorld Guest from 54.167.82.170

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Alignment

     

Cira

3:48 pm on Apr 21, 2011 (gmt 0)



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

4:01 pm on Apr 21, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month



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

4:12 pm on Apr 21, 2011 (gmt 0)



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

4:34 pm on Apr 21, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month



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

4:39 pm on Apr 21, 2011 (gmt 0)



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

8:53 pm on Apr 21, 2011 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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

9:08 pm on Apr 21, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month



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="">
 

Featured Threads

Hot Threads This Week

Hot Threads This Month