• Registered: September 21, 2009
  • 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 (September 25, 2009 11:26 pm)

Vote up Vote down

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: December 19, 2008
  • Posts: 2,807
  • Reputation: 13

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>
Benjamin Falk | Falken Creative : Twitter
Skills: Photoshop, Illustrator, HTML, CSS, jQuery, PHP and CodeIgniter

Vote up Vote down

  • Registered: September 21, 2009
  • 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.

Vote up Vote down

  • From: Tenerife, Spain
  • Registered: December 29, 2008
  • Posts: 577
  • Reputation: 1

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.

Lynne
180virtual

Vote up Vote down

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: December 19, 2008
  • Posts: 2,807
  • Reputation: 13

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>
Benjamin Falk | Falken Creative : Twitter
Skills: Photoshop, Illustrator, HTML, CSS, jQuery, PHP and CodeIgniter

Vote up Vote down

  • From: Florida
  • Registered: December 19, 2008
  • Posts: 2,680
  • Reputation: 2

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.

Imagine Building and Managing an Online Business
The Kasper Group

Vote up Vote down

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: December 19, 2008
  • Posts: 2,807
  • Reputation: 13

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.

Benjamin Falk | Falken Creative : Twitter
Skills: Photoshop, Illustrator, HTML, CSS, jQuery, PHP and CodeIgniter

Vote up Vote down

  • From: Florida
  • Registered: December 19, 2008
  • Posts: 2,680
  • Reputation: 2

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.

Imagine Building and Managing an Online Business
The Kasper Group

Vote up Vote down

  • Gender: Male
  • From: Chico/Sacramento, CA
  • Registered: December 19, 2008
  • Posts: 2,807
  • Reputation: 13

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>
Benjamin Falk | Falken Creative : Twitter
Skills: Photoshop, Illustrator, HTML, CSS, jQuery, PHP and CodeIgniter

Vote up Vote down

  • From: Salisbury UK
  • Registered: December 20, 2008
  • Posts: 1,330

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 (September 26, 2009 1:10 pm)

Vote up Vote down

  • Registered: September 21, 2009
  • 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 (September 26, 2009 7:58 pm)

Vote up Vote down

  • Eric
  • Advanced Member
  • Offline
  • From: Carlsbad, CA
  • Registered: December 19, 2008
  • Posts: 2,180
  • Reputation: 1

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.

www.visibilityinherit.com/tools.php

Vote up Vote down

  • Gender: Male
  • From: Golden, BC
  • Registered: January 13, 2009
  • Posts: 526

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.

My signature goes here --> X

Vote up Vote down