position border

[unknown gamer]

Hello, this is my first attempt at a css template.i have this code:

.header{background-color: transparent;background-image: url(images/Header.png);background-repeat: no-repeat;background-position:center; width: 600%;height:125%;border-style: double;border-width: 4px 4px 4px 4px;border-color: #AF936A;border-position: center;width:605px;height:130px;z-index:1;}

which gives you what i have here:HEREi'm trying to center the border and pic but i don't know how i tried border-position: center; that doesn't work and background-position: center; centers it within the border.- thanks

[Ingolme]

width: 600%;: Do you mean 600px?----width: 600%;height:125%;width:605px;height:130px;You're declaring width and height twice. The first ones will be ignored.----border-width: 4px 4px 4px 4px;: This is exactly the same as border-width: 4px;----border-position: center; This is useless, there's no such thing as a "border-position" property.----z-index:1;: This has no purpose at all unless you're using relative or absolute positioning.----I think you're trying to center the header class, here's your code fixed up:

body { text-align: center; }.header{background: url(images/Header.png) no-repeat center;border: double 4px #AF936A;width:605px;height:130px;margin: 0 auto;}

[unknown gamer]

neat, it works!!! thanks. how do you know this stuff?! its sooo confusing. can you please explain how you figure this out, if it's not too much trouble?

[Ingolme]

Lots of experiments and research over the years (well, about 3 years I've been at it). I occasionally check back at the W3Schools refrence, nobody can store a book in their heads.

[unknown gamer]

ya, whats the margin and padding things? i don't understand them.

[Ingolme]

Block elements (like <div>) are boxes.Margin will put extra space around the box (if it has a background color, you'll see the box actually get displaced).Padding will take away space from the edges of the inside of the box (if you have a background color you don't notice any difference with or without padding, however, the text inside will be pushed away from the edges).Border is also a part of the box, it goes within the margin and outside the padding. It also goes around the box.

[unknown gamer]

very confusing... what part of the code actually "centered" the whole box and picture?

[Ingolme]

very confusing... what part of the code actually "centered" the whole box and picture?

the line "margin: 0 auto" does it.I used shorthand proerty there, it means that the first value is for top and bottome, and the second is for left and right.I gave it no margin at the top and bottom of the box, and I gave it an auto margin for the left and right sides. This means that it is chosen automatically, the browser chooses to give both sides of the box an equal distance from the edges in the container.I added body { text-align: center; } because that's the way Internet Explorer centers everything, even boxes. The margin method doesn't work for Internet Explorer.

[unknown gamer]

ok, that explains it, thanks. i also went on the css tutorial and added padding to mess around with, it's pretty easy:)