Jump to content

Which style sheet is best?


Recommended Posts

Does an experienced webmaster know which style sheet is best?Note that the image bg.bmp is just a white rectangle with a width of 1000 pixels. So in both cases a white text area of 1000 pixels wide on a gray or silver background will be created. So far, I always use the method with the image but i.m.o.the other way is more straight forward (and therefore less vulnerable?).CSS 1:

html {  background: #808080 url("images/bg.bmp") repeat-y top center;}body {  margin:0 auto;}

CSS 2:

html {  background: #808080;}body {  margin:0 auto;  background: #ffffff;  width:1000px;}

Link to post
Share on other sites

use the body for setting background, font, text color use a container element for setting a white background, width: 100px; and margin: 0 auto; to centre it

body {  background: #808080;}#wrapper {  margin:0 auto;  background: #ffffff;  width:1000px;}

<html> <body><div id="wrapper"></div> </body></html>

Link to post
Share on other sites

Sorry for the delay. I had to solve another problem first.I wonder why I should create an extra layer (div). What is wrong with using the body tag itself as the container. What you suggest is actually the following:

<html><body><div id="extra_layer">Here goes your text.</div></body</html>

But apart from that minor issue, I wanted to know a totally different thing. In the meantime I tested a few things and one thing became clear: when I use the CSS with the background image, my white text area fills the screen from top to bottom, even when the page only contains one line of text. In case the other method is used (mine or yours, that does not make any difference) the height of the white text area depends of the number of lines. Underneath the last line the gray (grey, how do you spell this word?) background reappears. Therefore I prefer the method with the background image, but is it watertight? Regards,Egbert

Link to post
Share on other sites

the html is initially the container that holds all other html elements, the body is the canvas in which you apply your design. you can achieve the same result as method1 with

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">html, body {height: 100%;}body {background-color:#808080; margin: 0; padding: 0;font-family: Verdana,Arial,Tahoma,sans-serif;}p {    font-size: 12px;    margin-bottom: 12px;    margin-top: 0;    text-indent: 0;}#extra_layer {overflow:hidden;    background-color:#FFFFFF;    min-height:100%;        margin: 0 auto;    padding-left: 9px;    padding-right: 9px;    width: 981px;    }</style></head><body><div id="extra_layer"><p>The white text area of this page is created by a background command in an extra layer.<br>Like in method 2, its height also depends of the number of text lines.<br>As an extra drawback the gray background is not only visible underneath but also above the white text area.</p></div></body></html>

"grey" and "gray" are both correct "gray" is mainly used in US and countries that use US English, while grey is UK English spelling, but this begs the question, WHY are US "Greyhound" coaches not named "Grayhound" instead.

Link to post
Share on other sites

The real benefit to using a CSS method is that it saves your users from having to download a large image that serves no other purpose than to create a (plain-) colored background.

Link to post
Share on other sites

I want as less as possible layers, so I removed the extra layer for the text area. Can you agree with this code?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"><html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Test without extra layer</title> <style type="text/css">html {  height: 100%;  background-color:#808080;} body {  margin: 0 auto;  min-height: 100%;    background-color:#ffffff;  width: 981px;	  padding-left: 9px;  padding-right: 9px;  font-family: Verdana,Arial,Tahoma,sans-serif;} p {	font-size: 12px;	margin-bottom: 12px;	margin-top: 0;	text-indent: 0;} </style></head><body><p>I prefer to use as less as possible layers.<br/>So, therefore it's all in the body tag.<br/>There's no div-tag called "extra_layer".<br/>Obviously this works, but is it safe?</p> </body></html> 

And yes, ShadowMage, your thoughts about avoiding redundant bg-pictures are making sense.

Link to post
Share on other sites
I want as less as possible layers, so I removed the extra layer for the text area. Can you agree with this code?
If it gives you the effect you desire, then I suppose it will work. However, I seem to remember reading somewhere that setting styles such as a background on the html element is not recommended best practice, though if it works I don't really see why you couldn't. I personally prefer to use the extra div as a wrapper, but ultimately it's your call. Edited by ShadowMage
Link to post
Share on other sites

Thanks, dsonesuk and ShadowMage, for your useful contributions and code. I modified a set of pages, using a CSS with the html- and body tags as shown in message #7. Tested it with 5 browsers: IE8, Opera, Chrome, Firefox and Safari (for Windows). Works like a charm and, most important, page layout is (almost) the same in these different browsers. See: http://weblog.egbertzijlema.nl (note: Dutch text). Regards,Egbert

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...