How to make a "full-browser" website?

[NikMac]

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.

Edited September 26, 2009 by NikMac

[falkencreative]

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

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:

website here...

 

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:

header here


content here

[NikMac]

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.

[virtual]

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.

[falkencreative]

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:

 

   // any additional items within this div will use classes


   // any additional items within this div will use classes


   // any additional items within this div will use classes

[newseed]

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.

[falkencreative]

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.

[newseed]

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.

[falkencreative]

@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:

website here...

[Wickham]

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.

Edited September 26, 2009 by Wickham

[NikMac]

[Logo and menubar/nav will go here...]

[website content will go here...]

Edited September 27, 2009 by NikMac

[PicnicTutorials]

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' date=' 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.[/quote']

 

yep, only ie5 needed text-align center.

[jlhaslip]

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

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.