homepage Welcome to WebmasterWorld Guest from 23.20.61.85
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS Alignment
Cira



 
Msg#: 4301932 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4301932 posted 4:01 pm on Apr 21, 2011 (gmt 0)

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



 
Msg#: 4301932 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4301932 posted 4:34 pm on Apr 21, 2011 (gmt 0)

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



 
Msg#: 4301932 posted 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

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



 
Msg#: 4301932 posted 8:53 pm on Apr 21, 2011 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4301932 posted 9:08 pm on Apr 21, 2011 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved