• Registered: 2009-09-21
  • Posts: 9

Topic: How to make a "full-browser" website?

So, I've started learning HTML/CSS for my next website project... I'm not sure if this is an HTML or CSS issue, feel free to move it.

Take a look at http://www.anglianwater.co.uk/. Notice how the header and background image extend to the ends of your browser (when maximised).

How did they do that?

Right now my websites have a set height/width, and if there's any room left in the browser it's just a white background (http://www.all-water.org/Home.html).

Edit - after looking at the source I think it has something to do with "width=100%".  But I'm still confused as to how the header image repeats like that.

Can anyone point me in the right direction?

Thanks.

Last edited by NikMac (2009-09-25 23:26:48)

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: 2008-12-19
  • Posts: 2,343

Re: How to make a "full-browser" website?

There are a couple ways to do this... It depends the design of your site. The easiest way is to have a background image on the <body> tag that uses "background-repeat:repeat-x;" to repeat the background horizontally, and then the website is centered.  Something like this:

CSS:

body {
  background-image: url(image.jpg);
  background-repeat: repeat-x;
  margin:0; padding:0;
  text-align: center; /* centers the website in IE */
}
.wrapper {
  text-align: left; /* adjusts text align, overriding what was set in the body tag */
  width: 960px;
  margin: 0 auto; /* gives the wrapper 0 top and bottom margin, and centers it left/right in browsers other than IE */
}

HTML:

<body>
  <div class="wrapper">website here...</div>
</body>

That particular website uses a couple divs that have a 100% width with repeating backgrounds (as I said above, they use "background-repeat: repeat-x;"). Then, inside that div, they have a second div that is centered where the main content goes.  This is a rough approximation of their code:

CSS:

.header {
  background-image: url(header-image.jpg);
  background-repeat: repeat-x;
  margin:0; padding:0;
  text-align: center; /* centers the website in IE */
}
.content {
  background-image: url(header-image.jpg);
  background-repeat: repeat-x;
  margin:0; padding:0;
  text-align: center; /* centers the website in IE */
}
.header-inner {
  text-align: left; /* adjusts text align, overriding what was set in the body tag */
  width: 960px;
  margin: 0 auto; /* gives the wrapper 0 top and bottom margin, and centers it left/right in browsers other than IE */
}
.content-inner {
  text-align: left; /* adjusts text align, overriding what was set in the body tag */
  width: 960px;
  margin: 0 auto; /* gives the wrapper 0 top and bottom margin, and centers it left/right in browsers other than IE */
}

HTML:

<body>
  <div class="header">
    <div class="header-inner">header here</div>
  </div>
  <div class="content">
    <div class="content-inner">content here</div>
  </div>
</body>
  • Registered: 2009-09-21
  • Posts: 9

Re: How to make a "full-browser" website?

Hi,

Thanks for your reply - it really cleared a few things up about the classes/layouts in css. Just a few more questions:

If I have my background "gradient.jpeg" in a folder, "images" (in my root folder), then is this the correct css?

background-image: url('images/gradient.jpeg');

Also, in your second example, is it better to use id's instead of classes there?

Finally - you say margin: 0 auto "gives the wrapper 0 top and bottom margin, and centers it left/right in browsers other than IE"
Could this cause problems for people using IE?

Thanks.

  • Gender: Female
  • From: Tenerife, Spain
  • Registered: 2008-12-29
  • Posts: 358

Re: How to make a "full-browser" website?

If I have my background "gradient.jpeg" in a folder, "images" (in my root folder), then is this the correct css?

background-image: url('images/gradient.jpeg');

This is correct if your css file is in the root folder, if your css file is in a different folder then the correct way is
background-image: url(../images/gradient.jpeg);

ID's are only used once on a page, eg for the header, content or footer of which there will only be one.
Classes can be used many times, so they are for repeated content.

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: 2008-12-19
  • Posts: 2,343

Re: How to make a "full-browser" website?

Finally - you say margin: 0 auto "gives the wrapper 0 top and bottom margin, and centers it left/right in browsers other than IE"
Could this cause problems for people using IE?

No, it will be fine for ppl who view the site in IE. If I remember correctly, IE doesn't center the site using "margin:0 auto;" -- it appears on the left instead. That's why you need text-align:center to center the site in IE. You just have to use both "text-align:center" and "margin:0 auto" to take care of both IE and non-IE browsers.

is it better to use id's instead of classes there?

Depends... The code I presented is just a simple example.  In most cases, I use ids for main sections in the document (that won't repeat, since id's have to be unique per page), and then classes for everything else.

For example, say I divide up my code like this:

<div id="wrapper">
  <div id="header">
    // any additional items within this div will use classes
  </div>
  <div id="content">
    // any additional items within this div will use classes
  </div>
  <div id="footer">
    // any additional items within this div will use classes
  </div>
</div>
  • From: Florida
  • Registered: 2008-12-19
  • Posts: 2,593

Re: How to make a "full-browser" website?

falkencreative wrote:

Finally - you say margin: 0 auto "gives the wrapper 0 top and bottom margin, and centers it left/right in browsers other than IE"
Could this cause problems for people using IE?

No, it will be fine for ppl who view the site in IE. If I remember correctly, IE doesn't center the site using "margin:0 auto;" -- it appears on the left instead. That's why you need text-align:center to center the site in IE. You just have to use both "text-align:center" and "margin:0 auto" to take care of both IE and non-IE browsers.

Actually, you do not require a text-align: center to the body and IE does center a page when you set your main div wrapper to have margin: 0 auto;.  Using margin auto in the body doesn't work which is why a fixed width wrapper (or container) is used to center it.

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: 2008-12-19
  • Posts: 2,343

Re: How to make a "full-browser" website?

Actually, you do not require a text-align: center to the body and IE does center a page when you set your main div wrapper to have margin: 0 auto;.  Using margin auto in the body doesn't work which is why a fixed width wrapper (or container) is used to center it.

Sorry, my mistake.

  • From: Florida
  • Registered: 2008-12-19
  • Posts: 2,593

Re: How to make a "full-browser" website?

What you said was indeed a truth at one time but I think that applied to old table layouts as well as css not being fully supported by earlier versions of IE.

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: 2008-12-19
  • Posts: 2,343

Re: How to make a "full-browser" website?

@NikMac

In that case, this is a better example (just removed the text-align):

CSS:

body {
  background-image: url(image.jpg);
  background-repeat: repeat-x;
  margin:0; padding:0;
}
.wrapper {
  width: 960px;
  margin: 0 auto; 
}

HTML:

<body>
  <div class="wrapper">website here...</div>
</body>
  • Gender: Male
  • From: Salisbury UK
  • Registered: 2008-12-20
  • Posts: 1,231

Re: How to make a "full-browser" website?

newseed wrote:

What you said was indeed a truth at one time but I think that applied to old table layouts as well as css not being fully supported by earlier versions of IE.

Yes, I think it's IE5 that doesn't operate the CSS style margin: auto and needs align="center" as an inline style, but no one bothers about IE5 now.

Last edited by Wickham (2009-09-26 13:10:22)

  • Registered: 2009-09-21
  • Posts: 9

Re: How to make a "full-browser" website?

Thanks for the replies everyone - I'm starting to get it. Here's my HTML/CSS code - can someone check that it's okay? I'd hate to start working on it and then find out I made a big error somewhere.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd[/url]">
<html>
<head>
 [Title and meta content here...]
    <link rel="stylesheet" type="text/css" href="styles/aagstyle.css" />
</head>
<body>    
    <div id="header">
        <div id="header-inner">
               [Logo and menubar/nav will go here...]
        </div>
    </div>    
    <div id="wrap">
    [website content will go here...]
    </div>
</body>
</html>

-The first line of code (<?xml version="1.0" encoding="UTF-8"?>) is necessary, for whatever reason, for my editor (Komodo Edit) to display previews. Would there be any harm if I left this when I uploaded the site to the web? Or should I take it out each time I upload?

html {font-size:100.01%;height:101%;}
body { 
    height:100%;
    font:62.5%/1.4 Arial,Tahoma,Geneva,Helvetica,sans-serif;
    background-image: url(../images/backgrounds/bg_body.jpg);
    background-repeat: repeat-x;
    background-position:0px 100px;
    width:960px;
    width:100%;
    color:#333
}
#wrap {width:960px;margin:0 auto;}
#header {
    background-image: url(../images/backgrounds/bg_header.jpg);
    background-repeat: repeat-x;
    height:100px;
    margin:0; padding:0;
    width:100%
}
#header-inner {
    text-align:center;
    width:960px;
    margin: 0 auto;
    padding-top:20px
}

-I had some issues making the body background appear underneath the header background (which is 100px high), but I think what I've done is correct. At least, it appeared so in my browser.

-I read your discussion... do I still need "text-align:center" in #header-inner? I suppose I could use a class for centering the text/logo...

-This is somewhat unrelated, but I'd like my content underneath the header to be inside a box with rounded-top corners. I've googled a bit - will "Nifty Corners" work okay? Is there anything better you would recommend?

Thanks.

Last edited by NikMac (2009-09-26 19:58:48)

  • Eric
  • Advanced Member
  • Offline
  • Gender: Male
  • From: Carlsbad, CA
  • Registered: 2008-12-19
  • Posts: 2,038

Re: How to make a "full-browser" website?

Wickham wrote:
newseed wrote:

What you said was indeed a truth at one time but I think that applied to old table layouts as well as css not being fully supported by earlier versions of IE.

Yes, I think it's IE5 that doesn't operate the CSS style margin: auto and needs align="center" as an inline style, but no one bothers about IE5 now.

yep, only ie5 needed text-align center.

  • Registered: 2009-01-13
  • Posts: 486

Re: How to make a "full-browser" website?

You should remove this line from the staart of the file:

<?xml version="1.0" encoding="UTF-8"?>

It puts IE into quirks mode and might affect the page rendering.
W3C allows it to be removed. And your page is not XML anyways.