Pikachu2000 Posted March 19, 2011 Share Posted March 19, 2011 I've been going through Sam's Teach Yourself CSS in 10 Minutes (I'm not impressed with it, BTW) and in this layout they use 2 images to create the 3 background colors. I'm just wondering if this is the proper way to do it, or if it would be better to use 3 divs, each with it's own background color value in the CSS. It just seems like unnecessary overhead to load the two 50x2000 pixel images simply to provide solid colors. The two images are attached below also. Any thoughts? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Listing 21.1</title> <style type="text/css" media="screen"> body { margin: 0; padding: 0; font: 90% helvetica, arial, sans-serif; background: #387A9B; color: #333333; } h1 { margin: 0; padding: 0.5em 3%; background: #D36832; border-bottom: 5px solid #387A9B; } h2, h3 { margin-top: 0; } #container { background: url(back01.gif) repeat-y 50% 0; } #container2 { background: url(back02.gif) repeat-y 80% 0; } #content { width: 44%; margin: 1em 3%; display: inline; float: left; /*background: #336699;*/ } #news { width: 24%; float: left; margin: 1em 3%; } #nav { width: 14%; float: left; margin: 1em 0 1em 3%; } #nav ul { margin: 0; padding: 0; list-style-type: none; line-height: 150%; } #nav ul li a { color: #387A9B; text-decoration: none; border-bottom: 1px solid #387A9B; } #footer { clear: both; background: #387A9B; color: #FFFFFF; padding: 5px 3%; text-align: right; } </style> </head> <body> <h1> Sitename </h1> <div id="container"> <div id="container2"> <div id="content"> <h2> Page heading </h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> </div> <div id="news"> <h3> News </h3> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> </div> <div id="nav"> <h3> Sections </h3> <ul> <li><a href="#">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Staff</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact us</a></li> </ul> </div> <div id="footer"> Copyright © Sitename <?php echo date('Y'); ?> </div> </div> </div> </body> </html> [attachment deleted by admin] Quote Link to comment https://forums.phpfreaks.com/topic/231104-background-images-in-liquid-layout-necessary/ Share on other sites More sharing options...
dbrimlow Posted March 19, 2011 Share Posted March 19, 2011 Remember, one of the most important aspects of CSS based layout is to reduce markup clutter and eliminate unnecessary tagging. Once you start to understand the concept of "separating content from style", you learn to consolidate your styling elements by using minimal or existing tags. Avoiding "DIVITUS" is a constant vigilance. Divs are html placeholders and NOT to be used willy nilly for styling. In your example above, the use of the two existing container ids along with the content id is much cleaner within the markup because they encompass the content elegantly while providing a convenient unobtrusive vehicle for background styling. It is the same with slapping text directly into divs without using proper text content tags (h1 - h6, p, ul-ol-dl li). A web page is mostly about the content ... so content should be first consideration and first to get any html tagging. CSS relies upon content. And LIQUID layouts even more so. You need to carefully consider how the text "breathes" within the containers as they shrink or expand. Adding containers that are created for styling along will become ungainly once the content and page design progresses. The more containers you add, the deeper your content descends and the more unwieldy the text sizing specificity becomes. What takes people longest to learn about CSS is its simplicity. It took me a year to realize the awesome power of simple text content tags. I recommend every beginner start where many of us finally had our "eureka" moment after trial and error - max design selectutorial. Learn this and you will avoid weeks of frustration and be able to concentrate on the more advanced and tricky aspects of CSS. It uses an easy to follow format and the concepts are well explained - here is the entire tutorial (1 page for each concept): Selectutorial - CSS selectors Selectors are one of the most important aspects of CSS as they are used to "select" elements on an HTML page so that they can be styled. Find out more about selectors including the structure of rules, the document tree, types of selectors and their uses. There is also a step-by-step tutorial showing how selectors are used in the process of building a 3-column layout. Rules * What is a rule or "rule set"? * Grouping declarations * Grouping selectors * Shorthand properties * CSS Comments The document tree - it's a family thing * Introduction * Ancestor * Descendant * Parent * Child * Sibling * Multiple descriptions Selectors * Type selectors * Class selectors * ID selectors * Descendant selectors * Child selectors * Universal selectors * Adjacent sibling selectors * Attribute selectors * Pseudo-classes * Pseudo-elements Advanced stuff * Should you use ID or class? * Inheritance * Cascade * What happens when conflicts occur? Selectors in action - a step by step tutorial * Introduction * Step 1 - the html code * Step 2 - drop in content * Step 3 - styling the <body> element * Step 4 - styling the <a> element * Step 5 - styling the banner <div> * Step 6 - styling the heading * Step 7 - styling the first container * Step 8 - styling the second container * Step 9 - styling the navigation <div> * Step 10 - styling the <ul> element * Step 11 - styling the <li> element * Step 12 - styling the <a> element * Step 13 - styling the hover state * Step 14 - styling the “more” <div> * Step 15 - styling the <h3> element * Step 16 - styling the content <div> * Step 17 - styling the <h2> element * Step 18 - setting the line height * Step 19 - clearing the contents * Step 20 - styling the footer <div> * Step 21 - styling the <ul> element * Step 22 - styling the <li> element Quote Link to comment https://forums.phpfreaks.com/topic/231104-background-images-in-liquid-layout-necessary/#findComment-1189648 Share on other sites More sharing options...
Pikachu2000 Posted March 19, 2011 Author Share Posted March 19, 2011 I will have a look at that site. I'm really trying not to overcomplicate this, since I know I have a tendency to do exactly that Quote Link to comment https://forums.phpfreaks.com/topic/231104-background-images-in-liquid-layout-necessary/#findComment-1189658 Share on other sites More sharing options...
Philip Posted March 20, 2011 Share Posted March 20, 2011 Can you provide an example (screenshot/image or live page with it) of what you're trying to accomplish? Quote Link to comment https://forums.phpfreaks.com/topic/231104-background-images-in-liquid-layout-necessary/#findComment-1189819 Share on other sites More sharing options...
cssfreakie Posted March 20, 2011 Share Posted March 20, 2011 I like to see some mark up to really, I must admit i here and than use an extra div to give a certain part a special color, instead of an extra header request. IF you use it scarcely i don't see any problem in that Quote Link to comment https://forums.phpfreaks.com/topic/231104-background-images-in-liquid-layout-necessary/#findComment-1189858 Share on other sites More sharing options...
Pikachu2000 Posted March 20, 2011 Author Share Posted March 20, 2011 I've put a copy online HERE for anyone who'd rather see it online. I've also commented out a background value above that shouldn't have made it into the post . . . @KP - I'm not really trying to accomplish anything specific with it, my question is just that since one of the purposes of CSS is to reduce the overhead involved with html layout, I'm not sure why the book would add two images to provide background colors when it seems that using a background-color would be less data to transfer. I'm really just starting to learn CSS past the point of just modifying an already made template, etc, and I don't want to learn bad habits that I'll have to unlearn later. Quote Link to comment https://forums.phpfreaks.com/topic/231104-background-images-in-liquid-layout-necessary/#findComment-1189935 Share on other sites More sharing options...
cssfreakie Posted March 20, 2011 Share Posted March 20, 2011 hmm i think the author could have done the same by assigning a background color to div's #content #news and #nav in combination with the use of padding, instead of using margin and setting a background image to #container and container2. so instead of this on #content #nav #news: #nav, #content, #news{ margin: 1em 3%; min-height: 400px; } i am pretty sure this could have been done without extra header requests or divs: #nav, #content, #news{ padding: 1em 3%; min-height: 400px; } + assignment of background color Quote Link to comment https://forums.phpfreaks.com/topic/231104-background-images-in-liquid-layout-necessary/#findComment-1189953 Share on other sites More sharing options...
Pikachu2000 Posted March 20, 2011 Author Share Posted March 20, 2011 See that's what I was kind of thinking could be done. It just didn't make sense to me to use bandwidth to transfer background images to give each section a solid color BG. If the images were a pattern, or a logo, etc. it would have made perfect sense because then it clearly would have been necessary. Quote Link to comment https://forums.phpfreaks.com/topic/231104-background-images-in-liquid-layout-necessary/#findComment-1189957 Share on other sites More sharing options...
cssfreakie Posted March 20, 2011 Share Posted March 20, 2011 See that's what I was kind of thinking could be done. It just didn't make sense to me to use bandwidth to transfer background images to give each section a solid color BG. If the images were a pattern, or a logo, etc. it would have made perfect sense because then it clearly would have been necessary. Yep that's what i thought, when i read you first post Quote Link to comment https://forums.phpfreaks.com/topic/231104-background-images-in-liquid-layout-necessary/#findComment-1189976 Share on other sites More sharing options...
Pikachu2000 Posted March 20, 2011 Author Share Posted March 20, 2011 There's a lot of ambiguity in this book. Very little explanation of *why* to do something to go along with *how* to do it . . . Quote Link to comment https://forums.phpfreaks.com/topic/231104-background-images-in-liquid-layout-necessary/#findComment-1189977 Share on other sites More sharing options...
nogray Posted March 20, 2011 Share Posted March 20, 2011 The reason why the author added two images is because the height issue with fluid layout. If you assign a background color to the news and side divs, and the content was too long. The news and side background won't extend down with the content. You can try to remove the background images and assign background colors to the news and side divs, add extra content and resize the window to see the effect. If you want the same style layout (three color background to extend all the way for the three divs regardless of content and size of window) you would need to use the same images width. You can resize the height to 1px if that will save some kb. P.S. I never read the book, but got the author intentions from your post and the sample you posted Quote Link to comment https://forums.phpfreaks.com/topic/231104-background-images-in-liquid-layout-necessary/#findComment-1190027 Share on other sites More sharing options...
Pikachu2000 Posted March 22, 2011 Author Share Posted March 22, 2011 OK, that makes more sense now. If they had only added that paragraph to the book . . . Quote Link to comment https://forums.phpfreaks.com/topic/231104-background-images-in-liquid-layout-necessary/#findComment-1190896 Share on other sites More sharing options...
cssfreakie Posted March 22, 2011 Share Posted March 22, 2011 OK, that makes more sense now. If they had only added that paragraph to the book . . . I am pretty sure you can do the same with min-height. And maybe even a position relative of 100% to the parent element. But I havent tried it yet, but i pretty sure it's possible. But maybe a little more tricky. Quote Link to comment https://forums.phpfreaks.com/topic/231104-background-images-in-liquid-layout-necessary/#findComment-1190897 Share on other sites More sharing options...
cssfreakie Posted March 22, 2011 Share Posted March 22, 2011 OK, that makes more sense now. If they had only added that paragraph to the book . . . I am pretty sure you can do the same with min-height. And maybe even a position relative of 100% to the parent element. But I havent tried it yet, but i pretty sure it's possible. But maybe a little more tricky. I stand corrected, the height is indeed the issue here. Quote Link to comment https://forums.phpfreaks.com/topic/231104-background-images-in-liquid-layout-necessary/#findComment-1190929 Share on other sites More sharing options...
dbrimlow Posted March 23, 2011 Share Posted March 23, 2011 Clean, simple markup reduces overhead considerably ... load once 75k background images are not a heavy burden on bandwidth. You example is based on Dan Cederholm's brilliant "faux columns" technique. It is the most elegant way to get the elusive "equal height containers" - regardless of content - without slapping unnecessary divs or spans within the content markup. There are a few other clever techniques, like Stu Nichols's CSSplay Layouts, but Stu's markup is semantically incorrect and there are too many unnecessary divs used for styling alone, which defeats the point of separation of content from presentation. The key to efficient CSS is clean simple HTML markup. The font and style tag soup horror of the past needs to be eliminated forever, not replaced by inline styling, span-oramas and div-itus. Quote Link to comment https://forums.phpfreaks.com/topic/231104-background-images-in-liquid-layout-necessary/#findComment-1191486 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.