Okay so Im trying to clean up my site www.smftutorials.com and add a better color scheme as well as some other stuff.. Im at the point to where I am going to add some styling to my text content, so I need to center some images, text and also change some font appearances as well as sizes etc... Now I was told that inline styling=poo so I am trying to de-inline style my site since I was using web expression3 before, and now I am using notepad++ what is the best way to apply style to text?? or center images?? for instance, I removed this from my index.html page and inserted it into my css: .style1 { text-align: center; } .style2 { color: #4C320D; } .style3 { text-align: center; } .style4 { text-decoration: underline; font-size: large; font-family: Baveuse; } .style5 { text-align: left; } .style6 { text-decoration: underline; font-size: x-large; font-family: Baveuse; } .style7{ color: #DBD2B0 } Code (markup): so does that mean that when I want to access each of these styles I would just do: <p class="style#"></p> Code (markup): Or is that still in line styling?? whats the best way to do that?? THANKS!
You can put the css in another file,save it as .css file and call that file inside your <head> tags,something like: <link rel="stylesheet" type="text/css" href="test.css" /> and you can access the styles like what you had explained. That is called external styling.
ok that's what I figured, so then its not considered in-line styling when I am doing the <p class="whatever"></p> thing... sweet... thanks!!!
While it is NOT inline styling, that IS what I would consider presentational markup. For me, the classes you apply should say what things are , NOT how they are going to appear. WHY are you centering it? WHY are you floating it? What IS it. Worse than presentational, they're completely vague; style# is about as vague as you can get - sure it's the defaults in Dreamweaver, that doesn't make it any good. Likewise, if you are needing to throw those classes at paragraph tags, your content is either unnecessarily convoluted, or you are using the wrong tags for things. For example 'style6' screams "heading tag" to me. You are using it on a heading - we have TAGS for headings. Just as menus are lists and paragraphs of flow text are paragraphs (which does NOT mean just start slapping <P> around images and anything that happens to be text) Basically though - it's not inlined styling, it's just a bad approach to external styling. Oh, btw, your code has some other issues - like STYLED quotes (those don't work as quotes), entities for characters that don't need to be (single quotes) with characters that SHOULD be entities inlined (copyright), and what's with all the language declaration spans - not only could that be put on the paragraphs directly, it's redundant to the header! Really there's not a lot of reason for the HTML on that to be much more than: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="English" /> <meta name="description" content="Read the best soap making tutorials and learn about soapmaking methods and soap making supplies, candle making tutorials, bath and body tutorials and other fun craft tutorials online." /> <meta name="keywords" content="soap, handmade, candles, scented, molds, making, organic, business" /> <link rel="shortcut icon" href="http://www.smftutorials.com/favicon.ico" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <!-- Don't forget to implement these later! <link type="text/css" rel="stylesheet" href="print.css" media="print" /> <link type="text/css" rel="stylesheet" href="handheld.css" media="print" /> --> <title> SMF Tutorials - Soap and Candle Making, Bath and Body Tutorials </title> </head><body> <!-- empty tags like SPAN and B below are image sandbags for sliding doors or glider-levin replacement - do not remove!!! Horizontal rules should be removed by CSS and are present for CSS off users only. --> <div id="pageWrapper"> <h1> SMF Tutorials <span></span> </h1><hr /> <ul id="mainMenu"> <li><a href="/">Home</a></li> <li><a href="/">Soap</a></li> <li><a href="/">Candles</a></li> <li><a href="/">Bath & Body</a></li> <li><a href="/">Forum How-To</a></li> <li><a href="/">FAQ</a></li> <li><a href="/">Links</a></li> <li class="last"><a href="/">SoapMakingForum.com</a></li> </ul><hr /> <div id="fauxColumns"> <div id="contentWrapper"><div id="content"> <h2>Welcome to SMFtutorials.com</h2> <img src="images/sr2.jpg" width="400" height="225" alt="Some colorful homemade soaps" class="plate" /> <p> Hello! Welcome to SMFtutorials.com, A sister-site of <a href="http://www.soapmakingforum.com">Soap Making Forum</a>. This Comprehensive Soap Making and Craft Tutorial Directory was put together in order for individuals interested in soap making and candle making, and other crafts to have easy access to the best tutorials found on the internet. </p><p> Instead of wasting time scouring the internet searching for these soapmaking and craft tutorials, we have put them all in one place so you can concentrate on learning and practicing the craft of your choice and most importantly, having fun! </p><p> ll of the tutorials found on this website have been included with special permission from their respective authors. Please visit their websites and show your support! </p> <div class="imageTriad"> <img src="http://www.smftutorials.com/images/line5a.JPG" width="170" height="127" alt="Soap that looks like whipped cream on coffee" /> <img src="Http://www.smftutorials.com/images/sand1a.JPG" width="200" height="100" alt="Soap shaped and colored like seashells" /> <img src="http://www.smftutorials.com/images/soap_scrollsa.jpg" width="206" height="142" alt="old paper scroll style soaps" /> <!-- .imageTriad --></div><hr /> <div class="plateAdvert"> <script type="text/javascript"><!-- google_ad_client = "pub-5056108458616211"; /* horizontal link */ google_ad_slot = "1902167907"; google_ad_width = 468; google_ad_height = 15; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js" ></script> <!-- .plateAdvert --></div> <div class="leadingAdvert"> <script type="text/javascript"><!-- google_ad_client = "pub-5056108458616211"; /* small square */ google_ad_slot = "6792444341"; google_ad_width = 200; google_ad_height = 200; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js" ></script> <!-- .leadingAdvert --></div> <div class="postLeadingAdvert"> <h2> On SMFtutorials.com you can learn: </h2> <ul> <li>How to choose soap making ingredients</li> <li>Where to find the best supplies for making soap, candles and bath & body products</li> <li>How to make: <ul> <li>Castile bar soap</li> <li>Liquid Castile soap</li> <li>Goat's Milk soap</li> <li>Glycerin soap</li> <li>Bath soap</li> <li>Casting Molds</li> <li>Candles</li> <li>Homemade body butter</li> </ul> </li> <li>The best sources for wholesale bath & body</li> <li>... and much, much more!</li> </ul> <!-- .postLeadingAdvert --></div><hr /> <h2><a href="http://www.soapmakingforum.com">Visit our Community</a></h2> <p> Have any questions about Soap Making or other crafts? Please feel free to visit us at <a href="http://www.soapmakingforum.com"> Soap Making Forum</a>, simply click the link below to be redirected. We are a family community of crafters over 4,000 strong and growing every day; dedicated to learn and teach each other more about the crafts we love! </p> <a href="http://www.soapmakingforum.com"> <img src="images/banner.gif" alt="Soap Making Message Board Banner" class="plate" /> </a> <ul class="bottomLinks"> <li> <a href="mailto:info@smftutorials.com?subject=SMF Tutorials Inquiry"> Contact </a> </li><li> <a href="/privacy-policy.html"> Privacy Policy </a> </li> </ul> <!-- #content, #contentWrapper --></div><hr /></div> <div id="sideBar"> <form action="http://www.google.com/cse" id="googleSearch"> <div> <input type="hidden" name="cx" value="partner-pub-5056108458616211:mz9sz8-ilus" /> <input type="hidden" name="ie" value="ISO-8859-1" /> <input type="text" name="q" size="15" /> <input type="submit" name="sa" value="Search" /> </div> </form> <h2>Tutorial Categories</h2> <ul> <li><a href="/soap-making-tutorials.html">Soap</a></li> <li><a href="/candle-making-tutorials.html">Candles</a></li> <li><a href="/bath-and-body-tutorials.html">Bath/Body</a></li> <li><a href="/forum-how-to-tutorials.html">Forum How-To</a></li> <li><a href="/faq.html">FAQ</a></li> <li><a href="/links.html">Links</a></li> </ul> <h2>Updates</h2> <ul> <li><a href="february-2010.html">February 2010</a></li> </ul> <div class="skyScraperAdvert"> <script type="text/javascript"><!-- google_ad_client = "pub-5056108458616211"; /* 120x600, smf sky image created 3/16/10 */ google_ad_slot = "6778346460"; google_ad_width = 120; google_ad_height = 600; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js" ></script> <!-- .skyScraperAdvert --></div> <!-- #sideBar --></div> <!-- #fauxColumns --><hr /></div> <div class="bottomAdvert"> <script type="text/javascript"><!-- google_ad_client = "pub-5056108458616211"; /* 728x90, SMF sig banner */ google_ad_slot = "6447024537"; google_ad_width = 728; google_ad_height = 90; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js" ></script> <!-- .bottomAdvert --></div> <div id="footer"> Copyright © 2010 LindleyWood Development, Inc. <!-- #footer --></div> <!-- #pageWrapper --></div> </body></html> Code (markup): I'm pulling a fast fade right now, but if I have the time tomorrow I'll toss together the CSS on how I'd approach that, fixing a number of 'issues' along the way - I'll then document it so you can learn from the choices I make when I do this type of design... You back-read some of my posts on these forums you'll find I do these little 'rewrites' with full docs from time to time - usually for people I think show a measure of promise and just need some fine-tuning and advanced techniques added to their arsenal. For your first attempt at moving away from presentational markup you're getting the idea, but starting down the wrong path - let's get you pointed back on the right path; the path of semantic markup and separation of presentation from content... and teach you a few fairly simple but really powerful CSS techniques while we're in there like gilder-levin image replacement, content first dynamic columns, and maybe even a negative margin and overflow trick that will make it so you don't need to declare all those pesky widths on the menu.
** YAWN ** Mornin folks. Belted this out while havin' my raisin bran. http://www.cutcodedown.com/for_others/smfcandles/template.html As with all my examples the directory is unlocked http://www.cutcodedown.com/for_others/smfcandles/ For easy access to the bits and pieces. Valid XHTML 1.0 Strict, would be valid CSS2 if not for the use of a couple of -moz properties to support legacy FF and an expression to make up for IE6's shortcomings. Tested working 100% across IE 5.5, 6, 7 & 8, Opera 9.6 and 10.51, FF 2 and 3.6, and the latest flavors of Safari and Chrome. Let's start with a breakdown of the HTML. The purpose of markup is to say what things are - and NOT how they are going to appear. We got away from that during the browser wars but really CSS exists to let us go back to that. There are many advantages to this, including reskinning the page with CSS without touching the content, being able to edit the content in a clearer fashion without all that pesky presentation in the way, and reducing bandwidth across multiple pages since CSS is cached. The original intent of HTML was that the user agent (aka browser) is supposed to determine the best way to show the content so moving back to SEMANTIC markup - saying what the content IS means that people with less capable browsers; screen readers, handhelds, etc, etc will get a more meaningful content presentation. A word on formatting: As a rule of thumb I like to use the carriage return and tab key a LOT. To me it makes the content clearer. You'll also notice on all the 'stock' elements I don't waste time indenting those in after HEAD or after BODY; These are the same on every site, there's no reason to play with them. Likewise I put no whitespace between <html><head>, </head><body> and <body></html> - there should NEVER be ANY content in-between these (by the rules of the specification) so making there be no white-space between them is a good reminder of that. A good clean consistent formatting style can prevent you from making mistakes in the first place and make it easier for other people to help you when you have a problem! You'll also see that I use id's and classes that say WHAT the elements are. Verbose names on elements (just like verbose function names and variable names in a programming language) can often remove the need for comments wholesale. You'll often see people coding like this: <!-- start content --> <div class="s06"> Pure rubbish. Really, opening a DIV is the start of a section!?! Who'd have thought it!?! No reason for that to be more than <div id="content"> Likewise you have the closing - </div> means you are closing something, so you don't need to say "end content"... but it MIGHT be handy to say WHAT ID you are closing so a comment IS a good idea, but there's a problem. IE will often completely throw a tizzy if you put comments between floats... so having "</div><!-- #content -->" can trip two pesky rendering bugs; Disappearing content and double render. To avoid this, I just put my closing comment BEFORE the tag. "<!-- #content --></div>" - clear as crystal, no rendering bugs, makes it really easy. When it comes to commenting, don't try to get TOO complicated. Your tags, classes and ID's should provide 90% of the commenting you need. Moving on - First thing we need is a Doctype. I choose XHTML 1.0 Strict for the structure it brings and the modern rules. Tranny is for supporting old outdated markup and site-building techniques and really has no place being used on any page made after about 2004. We follow this with out two content meta's making it clear what language we're using. Your document for some reason had all those oddball redundant span when you had basically the same thing in the header - still not sure what was up with that. Your description meta was fine, but your keywords was a train wreck. It's keywords - not keysentences... You had too many as eight is the recommended upper limit in most SEO circles, the relevance of them was low to the content of the written page, and it was well over the 80 character limit that is also on most recommended lists. I took the most common words and stuck them in. Favicon LINK you really don't need explained as yours was fine too. The LINK for the screen.css is a bit more complex than what you had for a reason. CSS has what are called 'media types'. There are really only five you 'need' to concern yourself with; "screen, projection, tv" which I prefer to treat all the same. Many Kiosks use projection instead of TV because they run locked in fullscreen mode, and there are STILL people using the old WebTV devices (the mind boggles). I give all those "screen.css". I really consider it bad practice to have more than TWO stylesheets per media target as that ends up a bunch of handshakes and a whole slew of separate files to deal with -again, if you use meaningful names - its not too hard to hit CTRL-F in your editor to find those names. I put in the print and handheld LINK's, but commented them out. For handheld really you should restrict yourself to FAC (fonts and colors) and some alignment - don't even TRY to do columns or anything that fancy since most handheld targets can't handle them. For print, I suggest hiding the menu, adverts, omitting background colors and other stuff the user probably wouldn't want to waste their ink on. Title attribute - I don't need to explain that On to the body. I usually like to comment on anything too unusual I do. I often use empty tags as image sandbags - completely valid markup, but some people seem to get their panties in a wad over it for god knows what reason (some goofy FF plugin bitches about it - *** em). I also mention that horizontal rules are present to divide up the content for people with CSS disabled - I don't tend to use horizontal rules in my content for screen, so when we get to the CSS we just set them to display:none. Our first element is #pageWrapper. This simple div will wrap all (or almost all) of the page. Everyone has a different name they choose - I like "pageWrapper" because it pretty much says what it's going to do. .borderTop and it's empty nested div are our presentational hooks for adding rounded corners and the shadow you had around the edge. I use a technique called 'sliding doors' to apply the top and bottom borders as well as the side borders - all working together to create what I call "eight corners under one roof". We'll get into that more when we cover the CSS. For now, just beware they are there as CSS hooks. .borderLeft and .borderRight are the wrappers for the side shadows. Again, we don't have to get TOO fancy to apply this. The reason I'm using all these elements for that is so that it can be dynamic width - you look at the page and resize the window, you'll find it's a semi-fluid layout between 752 and 1104px (800 and 1152 px friendly respectively). You have nothing that warrants a fixed width, so why bother. Personally even when I'm writing fixed width layouts I usually write them fluid, and then just fix the width of #pageWrapper. I find it simpler than fixed width (which runs contrary to what MOST people will tell you) Our H1 is the topmost heading on the page. Well, what would be the topmost heading apart from the site title/logo?!? You are only supposed to have on h1 on a page, and all lower order headings are supposed to be subsections of the higher order heading preceding it. If we made "Welcome to SMFtutorials.com" the H1, then "Tutorial Categories" in the sidebar would be a subsection of the welcome text? Doesn't make a whole lot of sense... so site title it is. I put an anchor in there so the heading can be clicked to take the user back to the home page, and you can see we have the text equivalent of your image. The dual span - and this is 'cute', is there so that the gradient background can be applied OVER the text hiding it, and then the logo image (as a background to the inner span) can be applied atop that. By 'hiding' the text behind the image it means people browsing with images off will get an attractive styled heading instead of nothing - or ugly ALT text. This is called 'gilder-levin image replacement' and is not considered to be 'cloaking' by search engines since the image says the same thing as the text... Fairly common technique. #mainMenu doesn't need any extra DIV, etc, around it. I use the .first and .last hooks to apply negative margins so that should the text render wider than the min-width only the padding on the first and last items gets cut off. The oddball formatting as the comment says is there to prevent unwanted 'spaces' appearing between the menu elements. Normally I would try to use word-spacing and letter-spacing to 'fix' that, but with FF 3.6 it's become a total retard about those, so back to doing it in the markup. You run it through some auto-formatting bullshit like pretty print, or load it in steaming piles of manure like dreamweaver, don't be too surprised if it breaks it... There's a reason I don't use those 'tools' (as Dan used to say, the only thing about Sreamweaver that can be considered professional grade tools are the people promoting it's use) #fauxColumns is present to deal with that DIV+CSS layouts as a rule cannot make elements the same height. The most common solution is to fake the appearance of them being the same height using a background-image you just repeat-y. This also gives us a float clearing hook so we don't have to dick with having extra <div class="clear"> type nonsense. #contentWrapper - this outer wrapper around content is so we can do content first dynamic columns in HTML/CSS. It's a simplified version of the "holy grail" type layouts that uses the one extra DIV (ooh) to avoid five or six lines of CSS hacks, trickery and other bull. Sure, you could do without it, but I say "suck it up, it's 30 extra characters, big deal!" #content - the actual center/widest column / primary content of the page. h2.welcome - Usually I don't throw a class on my headings, but you had this one bigger than the others despite it GRAMMATICALLY being kin to most of the other headings on the page. I treat this like you would the biggest headline in a newspaper - it's not the start of every other article headline on the page, so from a structural point of view it's same level - the only difference is presentation... so we use a class to say what it is as a hook to apply that presentation in the CSS. img.plate - Plate images are not flow text, and are not important to the text in most cases, so it doesn't warrant any extra wrapping element around it. One class, end of problem. P - we use paragraphs all across this. Paragraphs IMHO should be restricted to flow text, which should ALL be formatted the same on a page. This means you don't need an extra class on them or any extra wrapping elements. div.imageTriad - this is just to apply our centering for those images. The images nested inside here have that same oddball formatting so we can have our indents for the properties (making it a lot easier to read) without that pesky white-space. div.plateAdvert - and advertisement placed like you would a plate image. div.leadingAdvert - a leading advert is TYPICALLY floated left, but you could float it right in a RTL language page, or decide on some other fancy placement. It goes 'before' the content it's floating, so I treat it as a lead-in element. div.postLeadingAdvert - the content after the advert. h2 - this is just a flat heading - why bother getting too fancy with it? ul - I changed your flat paragraph to a UL since that run-on sentence wasn't just an eyesore, the grammar was atrocious. Bullet lists grab people's attention, so lets turn that messy one-sentence paragraph into a nicely ordered list. Doing so also pointed out that you were saying the same thing like four times. I nested the 'you can make' as a second list because, well, I could. div.visitCommunity - Simple wrapping box that allows us to clear the above floats, and gives us a hook for the h2 nested inside it. ul.bottomLinks - you had these in kind of an odd spot in your original, I moved them to where they were rendering. ... and we close out #content and #contentWrapper. when I'm opening two div or closing two div in pairs that are ALWAYS paired, I like to put that all on one line so I'm not wasting my time with extra indents that don't do anything. #sideBar - can you guess what this element is? #cse-search-box - I REALLY wanted to clean up that into a PROPER form, but being code from google I left it alone. #sideBar h2 - these are NOT subsections of any preceeding heading except our H1, so these too are h2's. The only difference is that because they are in the sidebar we'll give them a different styling. Again, that's presentation, not structure. Some people would use H3's or even H5's skipping heading numbers... we call these people "morons" #sideBar ul - what you had, just some flat lists. div.skyScraperAdvert - as with all the other ads, just a simple wrapping DIV so we can apply centering/other styling as desired. Then we close a whole BUNCH of things. SideBar, faux-columns, the left and right border - all gone. div.borderBottom - as with .borderTop, this is just a hook for our CSS to apply the borders. I close pagewrapper before the bottom advertisement and footer since you seemed to have those outside the body background. div.bottomAdvert - another advert hook. #footer - it's not content text, it's just a simple disclaimer line so all we need is the div. Close out HTML and BODY and we're done with the markup. I have time during my lunch break I'll belt out a section-by-section breakdown of the CSS for you.
Had a spare few minutes waiting to paint to set up on some tins so I can do the next coat... The CSS is a bit complex, but once you learn a few simple rules it's not as hard as most people make it out to be. First up I have a reset. I noticed you were using * {margin:0; padding:0} - while cute for quick testing, it resets form elements in a manner that makes dealing with forms a pain in the ass. My reset is a wee bit more complex, but certainly simpler/smaller than things like Eric Meyers "reset reloaded" which frankly sets values on a bunch of **** I don't want set that way, and half of which isn't even actually a reset, but setting things up 'his way'. Mine targets JUST the elements I am most likely to have padding/margin issues with, and strips borders off the two elements I dislike having borders on by default. hr - hide 'em. Those are for people with CSS disabled. P - I set padding on paragraphs INSTEAD of margins. Margin-collapse can be a real PITA, so use something that doesn't have collapse instead! a, a:pseudo - simple coloration to match the theme. body - the padding makes sure at least SOME of the background will show. The text align is as the comment says, just a wee bit of IE5.x support. On the font declaration I use percentage font sizes so that the content will dynamically enlarge for large font/120dpi users and will auto-shrink for the handful of handheld users who expect to to do so. The background probably doesn't need a lot of explanation. #pageWrapper - I set a min-width and max-width so we end up with a semi-fluid layout. With the auto-enlarge text and wide variety of resolutions one should PLAN on supporting this is a 'must design for' IMHO. Sure it pisses off the art ***'s who want their precious bandwidth wasting 1024x1500 fixed image - but again drawing pretty pictures in photoshop generally has jack ******* shit to do with web development and the people who do so usually make accessibility train wrecks and bandwidth hogging crap. * html #pageWrapper - IE6/earlier has no min/max-width, but by using an expression behind a "* html" hack we can fake it. Doesn't validate - but we know WHY it doesnt' validate. There is NO excuse for invalid markup, but when it comes to CSS vendor specific properties are effectively a way of life if you want to keep it working cross-browser with a minimum of muss and fuss. .borderTop and .borderBottom - these two share a lot of attributes in common, so declare the common values together. As a rule of thumb I do this when two like elements have more than two lines alike. The position:relative is so that absolute positioning inside these considers 0:0 the upper left corner of it's parent and not the page itself. I use z-index because I added rounded corners using the 'cut-out' approach. The transparent center area of the background-image is overlaid atop the H1 and the bottom of #fauxColumns to 'cut out' the corners with the rounded dropshadow. The height is fairly self expanatory, and the margin-right adds a bit of space so that our absolute positioned right-corner won't show through to the parent's background. IE has a bug where a element cannot be shorter than the font-size, so setting that to 1px removes that problem... and then the background, which shows the upper right corner of our border image. http://www.cutcodedown.com/for_others/smfcandles/images/borders.png .borderTop (only) - we set a negative bottom margin making this 'ride over' what comes after it - our content area. This is how we position it to 'cut out' the rounded edges. .borderBottom (only) - negative margin-top, basically the reverse of what we do on .borderTop. Since we want this to show the bottom-right corner of that image we slide the background up 14px to reveal the bottom half. .borderTop div, .borderBottom div - again these share some commonalities, so declare them together. These are absolute positioned over that right margin to draw the far corner 14x14 block. The background-position slides that same image over to show just that right edge. .borderBottom div (only) - as with it's parent, we need to slide the background up 14px to show the bottom half of our image instead of the top half. .borderLeft - the position:relative and z-index:1 are what makes .borderTop and .borderBottom appear OVER our content. Pad the left side and apply that same background-image tiled on the Y slid over - which is where I stuffed that left edge drop-shadow. .borderRight - the exact opposite padding and image. We have to use top right to position it which is why in that image the repeat-y must be on the right-hand side. The h1 and #fauxcolumn element's backgrounds will show over the extra bits of our borders.png that may show through. h1 - position:relative is so that we can absolute position those span over our text. IE can screw up absolute positioning if haslayout isn't tripped, so I use width:100% to do that. For more information on haslayout, this page sums it up rather nicely: http://www.satzansatz.de/cssd/onhavinglayout.html I do not explicitly declare our 100px height because I want to use padding instead of line-height to center our text due to really tall line-heights not being reliable for top to bottom centering. Because IE5 has the broken box model or god forbid we end up in quirks from someone else dicking with the page I try to avoid using padding/border the same time as width/height as MUCH as possible. Pretty easy though to make that 100px since 64px line-height plus 36px padding (18 top and bottom) gives us that height. I also load the tiled background at this point and set a color for when users have images disabled/unavailable. I use px metric fonts here because we have a background image interaction - which is one of the FEW excuses I allow for using pixels on fonts. h1 a - just stripping text decoration and setting a color. h1 span - our outer span is just positioned, has a size set, and loads the background. h1 span span - shares positioning with it's parent span overwriting it, so all we need to set here is loading the logo image. View the page with images disabled to see what I mean - this is called 'graceful degradation' - whenever you use things like images for text, CSS, javascript, flash, etc, etc - your page should do it's best to stay coherent/attractive should your visitor not have any of those "gee ain't it neat" technologies enabled/available. #mainMenu - turn off bullets, set up centering, use overflow and width to chop off if the elements end up wider than our width. Again we have a image interaction with a background so I set up px fonts, and of course the background - again with a fallback color for when images are disabled. #mainMenu li - these can cause real headaches with windows 7, so unless you plan on making a cascading menu my advice is set these to inline and then pretend they don't exist. #mainMenu a - inline-block with it's -moz equivalents lets us set top/bottom padding on the element. Instead of fixing their sizes to stretch I just gave them flat size padding since trying to make them 100% width is impractical on a semi-fluid layout without resorting to a table... and tables are bad, mmmkay? The colors and background are pretty simple. #mainMenu a:[psuedo], .current - Different background color and background-position for the hover states. I included :active and :focus so that people using the keyboard to navigate will also get this styling. #fauxColumns - overflow:hidden will cause div's to automatically wrap any floated children in every browser except IE7/earlier. It's a great simple way to pull it off without clearing div's or that clearfix nonsense... For IE7/earlier we just add a haslayout trigger which does the exact same thing. Position:relative fixed IE7 being a wierdo about the sidebar method, and of course we have to apply our content background color and the faux-column image. #contentWrapper - ok, this gets a little complicated since how this works is somewhat counterintuitive, but IMHO it's the best way to make a fluid center column without tables, especially if you want the content BEFORE the sidebars. Setting this to 100% width and float:left makes this container take up the full width of the page, so there are 0px left for anything to float next to it. #content - the right marging makes visual room for the sidebar. Note I said visual, that's apparance, this has no effect on actually putting the sidebar there. The top padding is just there to make it pretty. #sideBar - here's the fun part. We set the width to 160px and position:relative so it will depth-sort over #contentWrapper. We float it left - but remember, there's 0px free to fit a column... using a negative margin we can make the browser think the element is 0px wide while still having it 'render' full width. 160px width minus 160px negative left margin will make the element 0px for 'flow' while still rendering 160px wide. Boom, it slides up next to #contentWrapper and at the same time renders OVER #contentWrapper and #content. I explain that better here: http://battletech.hopto.org/html_tutorials/3coldiv/template.html Which covers using the same method to do THREE columns. #content h2 - just set up the h2 in our content area. I clear floats since a heading should be the start of a new section - this comes in handy with that floated advert later on. I don't set the font too large, and use em for padding - which if you do the math 0.4em is the same as the 0.5em I set on P above once you take the larger font into account. #content h2.welcome - this was the one with bigger text and that got centering. #content ul, #sideBar ul - just setting some padding on these. The extra padding on the left makes room for the bullets. #content ul ul - Nested ones probably don't need that bottom border. Since I made a nested list, this handles that. .plate - plate images. I center them with display:block and margin:auto. They don't center in IE 5.x - oh well. They still render and the page is usable. I might still follow a lot of rules to make IE5.x still USABLE, but I won't bend over backwards to pull it off. .imageTriad - we just center these with text-align since they are all inline-level elements. .plateAdvert - much like .plate, but since this is a wrapper we have to set the width to that of your advert. .leadingAdvert - here's the floating one. I set width and padding so that it will space out nicely from the content next to it. .postLeadingAdvert - the margin makes it so that should the content be taller than the advert it will NOT indent back in. I always think that looks goofy when it happens, and it's easy enough to avoid. The extra left padding makes up for the 1em on .leadingAdvert. You can't say "200px plus 1em" so using margin and padding simultaneously pulls off that addition. Cute trick to keep in mind when you need to mix your metrics. #content .postLeadingAdvert h2 - we have to target this the 'long way' so that it will override #content h2. This is called a 'specificity' issue. If we just said .postLeadingAdvert it would be ignored since ID's trump classes - and parent ID's trump child elements. All we set here is turning off it's float clearing since we WANT this one to appear next to the float. .visitCommunity - just some simple padding. .visitCommunity h2 - this one just looks better centered. .visitCommunity .plate - a bit of extra margin on the top spaces it out nicely. .bottomLinks - turn off bullets, center them. .bottomLinks li - set them display:inline so they appear next to each-other, use some padding to push them apart instead of screwing around with non-breaking spaces in the markup. Pushing things apart is padding/margin's job, NOT <BR> or &NBSP; #cse-search-box - nice of them to give us a ID we can use to hook on to. No extra classes are even needed on this form because of that. Text-align, pad the bottom to push the content away from it. #sideBar h2 - headings inside our sidebar get a slightly different padding than everything else, and are just 'bold' and not the 120% size used elsewhere. Of course, a splash of color never hurts. .skyScraperAdvert - our advertisement just needs centering. .bottomAdvert - the top padding is just to push it down. I didn't bother styling it's wrapper since that seemed kind-of pointless. #footer - Color, padding, whee!!! Both .bottomAdvert and #footer get their centering as a side effect of the text-align we use to center #pageWrapper for IE5 - two birds with one stone. ... and that's the CSS... I know this is all a long read, but hopefully you'll be able to pick up something from it. Any questions fire away. (that goes for anyone else reading this too)
thats so awesome!! thank you for the explanations!! One quick question, how do you make an image like the borders.png one? that is a neat trick to make it appear to have rounded corners!! I want to play with it and see what I can do with it I really want to thank you for explaining all that stuff like that! I am in the process of re-reading everything you have said (for like the 3rd time).... and testing all the stuff out this is so interesting and I greatly appreciate you taking the time to teach me and give me tips! you rock!