Friday, November 19, 2010

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

I've noticed on the wordpress website and facebook that the headers take up the full width of the screen of any computer or laptop screen i view the websites on and the center of the website stays fixed.



What is the easiest way to do this in xhtml/html/css?



Is there a website that will guide me through the process?



Help is appreciated.How do I create an html/xhtml/css header that automatically adjusts to any screen resolution?
Create a div that has a 100% width, give it the id #header and give it a background-color you like. Inside THAT div, create another div with a class called .container. Center the container with 'margin: 0 auto' and give it a width of around 975px so people will be able to see it on 1024 x 768 monitors without side scrolling. Then put your logo and website title inside the container.



Note: You can download the Firebug extension for Firefox and see exactly how FB does it if you wantHow do I create an html/xhtml/css header that automatically adjusts to any screen resolution?
I recently had the same problem, so I Googled this: fluid css layouts

There are many examples along with the code to use directly on your pages.
  • home theater
  • Microfibre or feather duvet quilt
  • No comments:

    Post a Comment