jimfog Posted January 11, 2012 Share Posted January 11, 2012 When you want to give your webpage a specific element-center it for example- where it is better to make the corresponding adjustments. To the HTML(root) element or the BODY element. SO far i have encountered approaches where all the adjustments are made to the body tag. But what about the html element? Do we ignore it when we write css code? Link to comment Share on other sites More sharing options...
Ingolme Posted January 11, 2012 Share Posted January 11, 2012 I generally use the body element as the main document container. If you define a width for the <body> element, then you should put the background color or image on the <html> element because if you put it on the body it will only take up the space of the body and not anything beyond its width or height. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 11, 2012 Share Posted January 11, 2012 Actually the background color and image defined for the body ARE NOT restricted to the width and height of the body element at all, only the child elements will be. Link to comment Share on other sites More sharing options...
Ingolme Posted January 11, 2012 Share Posted January 11, 2012 Here's an example of what I was talking about:http://dtfox-tests.totalh.com/body.html The body is limited to the width you set it and the height of the content within it. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 11, 2012 Share Posted January 11, 2012 That only happens when you define a background color for html, which I never in my life ever done, I just use the body for setting background-color/image, font styling family size etc and occasionally the height to achieve a sticky footer when needed, placing anything else inside html element except height again for sticky footer situation is not needed. Link to comment Share on other sites More sharing options...
Ingolme Posted January 11, 2012 Share Posted January 11, 2012 I'm just indicating that the body element is perfect for a content container while the <html> element is good for page-wide styles. The person was asking about the body and html elements. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 11, 2012 Share Posted January 11, 2012 I was just correcting what you stated about the body, the body as far as i am concerned is the the main workarea that cover the browser window, and so width adjustment should never be used, and from the sites i've seen it never has been, the width of the page content is should be restricted by an outer container usually called a wrapper, this element controls width, and alignment primarily itself, so why assign it to the body? Link to comment Share on other sites More sharing options...
Ingolme Posted January 11, 2012 Share Posted January 11, 2012 The body works just fine as a container in all elements and I don't see a justification as to why it would be incorrect to treat it as a wrapper. The <html> element can easily serve as the window's working area. Excerpts from CSS Creator: The body tag. Needed to separate the head section (page info) from the body (page content).Keep in mind that both the <html> and <body> tags are containers, as this is commonly ignored and can actually be used to your advantage.<div id="container"> Ah, the obligatory container div. Used commonly to contain the entire site, and, when used with a fixed width, to center the site.Remember what I said about the <html> and <body> tags? Keep that in mind, we'll get back to this later on The container divUsually a container div is used to "contain" the entire site. It is usually a fixed width (bad) and centred with margin: auto; and the text-align: center; hack (if you're supporting IE5 - which, let's face it, is pants)Now keep in mind the "container" tag will hold all of your HTML.Hang on a minute, what's that tag before the "container"?A <body> tag?Yes, often overlooked is the humble <body> tag, which does exactly what your container div does - holds all your HTML.Speaking of HTML, the <html> tag could also be used as a container. But let's stick with <body> for now. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 11, 2012 Share Posted January 11, 2012 OK! what happens if using your wonderful css creator example i use the body as a container width set everything wonderful background image/ color set for html, Right we need background image for top, and background image that will adjust to height of content, and it must stretch to total width of browser! Just wasted time applying background image/color to html, setting width of body, because you need the body width to be the total width of browser window, add background color/image to body add extra container to apply second background image, and end up adding wrapper container, which is the option you should have used in the first place, strange how all the sites i've looked at the body is never used with set width container to hold child elements, all this time there being ding it wrong tut, tut. DON'T adjust the width of body, it is the main foundation area for the whole site, let it keep its whole width you never know when you will need it. text-align: center; hack (if you're supporting IE5 - which, let's face it, is pants) Gees! when was this article published? Link to comment Share on other sites More sharing options...
Ingolme Posted January 11, 2012 Share Posted January 11, 2012 I haven't taken a good look at their specific method of layout so I don't know if you're complaining about that, but I'm just pointing out that other developers use the <html> and <body> elements as containers. In my own pages, all that's being done is taking the styling up one level in the tree. The <html> element is taking the original role of the <body> and the <body> is taking the original role of the <div id="wrapper">. There's virtually no difference. /* Example 1 */body { background-color: blue;}#wrapper { background-color: #0F9; margin: 0 auto; width: 960px;} /* Example 2 */html { background-color: blue;}body { background-color: #0F9; margin: 0 auto; width: 960px;} Obviously, if you plan your layout to have elements taking up the whole width of the screen, you'll leave the body at its original size and only set the width of specific elements. Link to comment Share on other sites More sharing options...
jimfog Posted January 12, 2012 Author Share Posted January 12, 2012 I see that in the same issue there are different approaches. Using the body tag as a container was sth i read in a css book. I am not so experienced to say what solution works best-that is why i opened the topic in the first place of course. Probably the solution adopted will vary according to needs. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.