SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: xhtml header

  1. #1
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    xhtml header

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

  2. #2
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    HTML Code:
    <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 Cascading Style Sheets, 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:

    Code css:
    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! :D

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi alluremedspa123. Welcome to the forums.

    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,168
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Hi alluremedspa123. Welcome to the forums.

    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •