Header with border alignment and background help

[Kaversen]

Hi there!

I am making a site in HTML5 and CSS3.
I´m only just in the beginning and i have a slight problem..
I have a header (h1) and i have put a border around it, still to come is shade, but before the borders was coded, the header was aligned using CSS, to center. Now, with borders, it isn’t. Any suggestions for a solution?

Oh and also how do i do something like the background on this site? (CSS-Tricks.com that is)

Thank you in advance!

[Paulie_D]

The background on CSS Tricks is done with a repeating background image.

Regarding your h1 tag (which is not a header by the way), most people don’t apply borders to them but if that’s your design then so be it.

You should be aware, however, that borders increase the dimensions of elements (unless specifically told not to…but that’s another story) and so if your h1 is positioned that precisely with CSS (which seems odd) then then you can expect some odd effects.

A link to a like site would be easiest to examine and advise but failing that, put the relevant code on Codepen and we can tinker with it.

[Kaversen]

Okay, so my HTML5 and CSS3 May be bad :) that backgrounds i’ve Got to figure out!

[Paulie_D]

Like I said, if you can give us a link to a live site or put your code on Codepen we might be able to assist further.

I’m not saying your code is bad (I haven’t seen it) but if you want to avoid borders and such causing these types of issues then you might want to consider adding

*{

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

to your CSS.

[Kaversen]

So now i think i am all set up on CodePen.io!
I´ve put in my HTML and CSS, so the site is produced :)
LINK: http://codepen.io/Kaversen/pen/soyFg

Help i greatly appreciated!

[Paulie_D]

Firstly, you have put the h1 tag inside something called head outside of the body. I think you meant to put it in a header element inside the body.

See: http://codepen.io/anon/pen/GKewF

Now, exactly what positioning issues are you having?

[Kaversen]

I want to center the header and button.. Is this using CSS or HTML?

When thats done, i just need to figure out some background stuff, and im all done!
(Im planning for using this on my school-website!)

Thanks for the help!

[Kaversen]

Now, i´ve also updated the code a bit. Is this how you ment the header should be placed in the code?
http://codepen.io/Kaversen/pen/soyFg

[wolfcry911]

http://codepen.io/wolfcry911/pen/stKji

[Author]

Posts