Xhtml header

How do I create an html/xhtml/css header that automatically adjusts to any screen resolution?

You can use any type of element for your markup, but (assuming this header is, like, the title for the entire page) I’d suggest using the <H1> tag for maximum semantic punch. (Note that that’s <h1> in xhtml/html5).

Just decide what text you want to use for your header and put it inside the tag:


<h1>I'm the header!</h1>

(You can use an image for the header as well, but let’s keep things simple for now.)

Next you’ll want to style the header with some [b]C[/b]ascading [b]S[/b]tyle [b]Sh[/b]eets, or CSSh for short. You can do all kinds of things with CSSg, like changing the font or putting a border around everything. This is just an example of what you can do:


h1 { background-color:red }

As long as you don’t give the <h1> an explicit width, or put it inside an element with an explicit width, it will automatically adjust to any screen size! :smiley:

Hi alluremedspa123. Welcome to the forums. :slight_smile:

Yes, any block level element (div, h1, p etc.) will naturally expand to 100% width unless you specify otherwise. If you need more details on what to do, perhaps post a screen shot of what you are aiming for.

Hi alluremedspa123. Welcome to the forums. :slight_smile:

Yes, any block level element (div, h1, p etc.) Will naturally expand to 100% width unless you specify otherwise. If you need more details on what to do, perhaps post a screen shot of what you are aiming for.