I'm new at CSS. Here is the site I'm doing http://justgamerz.com/abap/ as you can see "Hello world" is out of place, I want to make it to the right, as this picture http://justgamerz.com/mudiw.com/web del cole.jpg Also, look at the pic, and see where it says "Ultimas noticias" do you see the gap between the start of the bg and the text, how do I do that? Thanks, Best Regards
Well for starters, you've got no doctype, don't open HTML, and have no head element. You can pretty much kiss off consistent styling cross browser or even proper behavior of CSS thanks to those omissions. Next, if you are going to use CSS, you should STOP using presentational attributes like ALIGN to do CSS' job, and STOP using vague meaningless classnames like 'style3'. Likewise you should investigate 'semantic markup' before tackling CSS since it's easier to style things with CSS if you actually use the correct tags around elements and don't have to throw half a dozen unnecessary classes in there. CSS also means you shouldn't be doing things like <p> </p> anymore like it was still 1997. I have time tomorrow I'll go through and do a rewrite of what you have with a line-by-line explanation of why/what choices were made.
Oh okay, thanks for that. I used <p> </p> since I didn't knew the code, so I used it to at least have the site ready, and then modify it and correct those errors. I will make the changes, I will separate the CSS from the html when I'm done. About style3, it was made by dreamweaver, I will fix that also. I was having the hope to have something ready (even if the code is temporary bad) in less than 8 hrs, just to show it in this meeting, instead of waiting for the next monday. Thanks for your help.
Ok, sorry for the delay... lemme run it down for you. First off - do yourself a HUGE favor and pitch dreambeaver in the trash - there's nothing useful it provides and nothing you should learn from it. Second, when I say pitch the markup and start over it's usually for a good reason. CSS is applied to HTML, and bad/inappropriate non-semantic HTML often just makes CSS harder to apply - as does adding unneccessary or redundant wrappers or excessive classes. Clean semantic markup is damned near a joy to apply CSS to, especially once you reach the point of knowing some common layout tricks (sliding doors, eight corners, content first columns, faux columns) letting you effectively write 99% of the final HTML before you even start applying CSS to it. NOTHING sucks more than trying to write CSS while playing with the markup at the same time. Next your document NEEDS a doctype and a header. Without one it's going to break cross browser without endless needless hacks. I like XHTML 1.0 Strict. The XHTML is for consistency of rules and structure - the STRICT is so I don't waste time trying to use markup elements that NO NEW PAGE SHOULD EVER use. (Font, Center, attributes like align) To speed up the process, I'll just start with my baseline template and move your content over to it. <!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="es" xml:lang="es" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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> Baseline Template </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 and .jumpto menus should be removed by CSS and are present for CSS off users only. --> <div id="pageWrapper"> <h1> Site Title <span></span> </h1><hr /> <div id="content"> Page Content Here <!-- #content</div><hr /></div> <div id="sideBar"> SideBar Content Here <!-- #sideBar --></div> <div id="footer"><hr /> Footer Content Here <!-- #footer --></div> <!-- #pageWrapper --></div> </body></html> Code (markup): When writing a page I NEVER inline ANY css or presentation and work with my CSS in a separate file. I find that constantly scrolling up and down and up and down to look at the markup then the CSS then the markup then the CSS to be a royal pain in the ass. Simply using two separate instances of a text editor means I can look at both side-by-side. (There's a reason I like crimson editor over the others - it doesn't shove tabs down my throat) On plugging in content I make it a habit of writing out ALL the content as semantic markup FIRST - with ZERO concern for appearance apart from a handful of standard 'hooks' I use to apply it. A few empty spans inside headings, maybe an extra empty DIV or wrapping DIV, but that's about it. Where possible anything with CDATA (character data) inside it should be a tag to say WHAT the element is, Anchor, paragraph, heading, and NOT how it is going to appear. I use this same rule for my classnames and ID's - NOTHING in the markup should be about what it's going to look like, it should be about what it IS. So our first step for plugging in content is the h1 and the title attribute. Both get as their primary content that same "Academia Bilingue Arabe Panameña". I use a H1 in the body for the site title becuase of how headings are supposed to work. As a rule you should only have one H1 on a page, and it's even better if that h1 is the FIRST cdata tag in your content since all lower numbered headings are SUBSECTIONS of it. This is where the people who would make your blue "Bienvenidos a nuestro sitio" fall flat on their face, as "informacion sobre algo" is not a subsection of it (I don't think) much less are "eventos" or "Ultimas Noticas" subsections either - all of those most likely being H2's. With the site name/logo I like to put actual text in there instead of relying on alt text, and then using image-replacement techniques to apply the image version. To that end we dump an empty span in as a presentational hook. Span has 'no meaning' and singe almost always you have a site logo, we can apply that now - that's about as close to presentation as we'll get in the markup. I also would include the other text from that heading image, with a hook so we could style it too. Since it's smaller but still part of the heading, that's a subtext. For subtext we have this handy tag called 'small'. So that ends up <h1> Academia Bilingue Arabe Panameña<br /> <small>Todos del mismo Lado</small> <span></span> </h1> Code (markup): The horizontal rule is there for people browsing with images disabled to break up each of our sections. We will set all horizontal rules to 'display:none' in the visual CSS since we'll be applying our own styling for that. There's also the extra information, I'd use a separate div for that: <div class="contactInfo"> Info@abap.edu.pa<br /> 474-0712<br /> 474-0713 </div><hr /> Code (markup): I moved the hr after it because it looks better on non-css devices that way. The top three column areas should probably be set up to grow/shrink in height as the content changes. To that end I would add a wrapping div with an ID to say what it contains. <div id="menuBannerNoticas"> Code (markup): First, the menu. Since you appear in your html version to want to apply icons we'll put classes on each of those so we can do a 'sliding background' image for all those different images. Less handshakes to the server, faster pageloads and simpler markup are the selling points here. Since that's obviously a menu get the anchors in there NOW. <ul id="mainMenu"> <li class="inicio"> <a href="\">Inicio</a> </li> <li class="i-mereb"> <a href="\iMereb">i-Mereb</a> </li> <li class="vision"> <a href="\visionYMision">Vision y Mision</a> </li> <li class="manual"> <a href="\manual">Manual de convivencia</a> </li> <li class="fotos"> <a href="\fotos">Fotos</a> </li> <li class="contactenos"> <a href="\contactenos">Contactenos</a> </li> </ul><hr /> Code (markup): Next to make the centered image easier to deal with, we'll do the ultimate notices FIRST. Since it has a heading, we use a heading tag... and the paragraphs go in paragraph tags. <div id="ultimasNoticias"> <h2>Ultimas noticias</h2> <p> Lorem ipsum sit amet, consecteur adipiscing elit. Sed sodales odio et nunc placerat non imperdiet tellus bandit. </p><p> Lorem ipsum sit amet, consecteur adipiscing elit. Sed sodales odio et nunc placerat non imperdiet tellus bandit. </p><p> Lorem ipsum sit amet, consecteur adipiscing elit. Sed sodales odio et nunc placerat non imperdiet tellus bandit. </p> <!-- #ultimasNoticas --></div><hr /> Code (markup): Finally that center area. For that I would actually NOT use an IMG tag for it since that's more presentational affectation than content, and instead just slap a DIV in there to apply that to as a background. This would also work better for things like small screen/handhelds since a large image could cause navigation issues. After that we can close our #menuBannerNotices wrapping div (which will later be used to apply faux-columns) <div class="middleImage"></div> <!-- #menuBannerNoticas --></div> Code (markup): You probably noticed my closing comment style. A lot of people's comments in their code are outright silly - for example there's no need to say "end" because that's what </div> already means. You also have to worry that comments between floating elements can cause rendering errors in IE (YES, I said COMMENTS causing errors!) - putting the comment BEFORE you close the </div> makes it more readily apparent what's going on. Next is the main content area (at least that's what I'm calling it). We'll toss a div around both columns called #contentWrapper and then have two div inside it, the main column we'll call #content and the sidebar, appropriately named #sideBar. I'd put the content area in the source code FIRST because it's more important than the information in the smaller sidebar. Again, CSS let's us re-arrange stuff however we want, freeing us to put this stuff in a better order. So to start this section: <div class="contentWrapper"> <div id="content"> Code (markup): Below that you have articles - so I'd wrap each 'article' in a DIV with a 'article' class, appending the unique 'first' class to the first one since it we may (as your image did) want to style it differently. Each article has a heading, and it's text. Since we used our H1, and these are not a subsection of #ultimasNoticias the appropriate heading level for this is h2 on BOTH - since they are siblings in the grammatical sense. <div class="article first"> <h2><span></span>Bienvenidos a nuestro sitio</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <!-- .article --></div> <div class="article"> <h2><span></span>Informacion sobre algo</h2> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <!-- .article --></div> Code (markup): You'll notice the spans inside the h2 - this is a hook for any images or icons you want to apply to your headings. We then close our content and open our sidebar. <!-- #content --></div> <div id="sideBar"> Code (markup): Your next item is the heading for BOTH events - which you had 'hello world' at, but your image says "eventos". In either case that's a heading, not a subsection of anything but our h1 so h2 it is. The date's here appear to be headings, and since they would be subsections of 'eventos' that means they should be h3. Every time you have a heading that's a subsection, increase the number (lowering the heading 'level'). The 'more information' text I assume is going to be an anchor - so lets make those an anchor NOW and not later. This is where visual design in crap like dreamweaver can lead you down the garden path, as all those elements you designed without the right tags could break the momemnt you add your anchors. <div class="article"> <h3>12/10/2009</h3> <p> Lorem ipsum sit amet, consecteur adipiscing elit. Sed sodales odio et nunc placerat non imperdiet tellus bandit. </p> <a href="/helloWorld" class="masInfo"> Mas informacion </a> <!-- .article --></div> <div class="article"> <h3>12/10/2009</h3> <p> Lorem ipsum sit amet, consecteur adipiscing elit. Sed sodales odio et nunc placerat non imperdiet tellus bandit. </p> <a href="/helloWorld" class="masInfo"> Mas informacion </a> <!-- .article --></div> Code (markup): Below that are your directions. The directions heading looks like kin to eventos heading so that's a h2, the Colon, Panama text looks like a heading so we'll make that a h3 as well... the plate image is what's called a 'trailing plate' so we'll attach a class with that name to it... and again the body text of this section is a paragraph. <h2><span></span>Direccion</h2> <div class="article"> <h3>Colon, Panama</h3> <img src="images/panama.jpg" alt="Panama Map" class="trailingPlate" /> <p> Colon, alhambra, A la derecha del club Arabe de colon </p> <!-- .article --></div> Code (markup): From there we just close the sidebar and the contentwrapper. <!-- #sideBar --></div> <!-- #contentWrapper --></div> Code (markup): Finally your footer. The image has nothing too fancy going on so for now we'll just slap it's content into a DIV. I would NOT use a paragraph because structurally this is not 'copy' and gramattically it is not a paragraph. <div id="footer"> © 2007-2010 MudiW Co. Ltd. All Rights Reserved <!-- #footer --> Code (markup): You'll notice I axed the copyright text and re-arranged. It's kind of silly to say copyright twice like that - © copyright. ... and finally we close out our pagewrapper, our body tag, and our HTML tag. <!-- #pageWrapper --></div> </body></html> Code (markup): You probably noticed I tend to put <head> and <body> on the same line, as well as </body> and </html> - this is to remind myself that NOTHING should EVER go between those elements. (just as nothing should EVER come after </html>) That's it for the HTML rewrite - next up is making the layout and applying the graphics with the CSS, during which some minor changes to the markup may occur but for the most part that's the complete HTML 99.99% complete. I'll post up the next section with it's breakdown/explanation after dinner, as well as a link to a live copy of the rewrite.
Dude.... You are AMAZING. I can't still believe you are helping me free, since nothing in life is free. But if you are interested, I can hire you for future help on any other project. I'm doing the changes, I just had to google few things that were new to me, but is going awesome. Thanks a lot, I will keep waiting the second part and the demo. What I'm really loving from his, is that you are explaining with a lot of details each thing you do, is so great. Thanks again Best Regards //GotOwned
Alright, face stuffed, on to the CSS. I start every one of my CSS files using a 'reset' - which is to say I target a bunch of elements to set their margins and padding to zero, and to strip borders off elements I usually don't want borders on. /* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul, table,tr,td,th,p,img { margin:0; padding:0; } img,fieldset { border:none; } Code (markup): There are bigger resets - I've never needed more. There's the smaller reset that hits all elements - that makes form elements a pain in the ass to work with. It's a nice safe middle-ground. Next, I remove horizontal rules. hr { display:none; } Code (markup): I do this because I include them to divide up things when CSS is NOT present - it also looks nice when printing. The body tag we don't need to do a whole lot with here. I set text-align so the layout will center in IE 5.x - a lot of people say don't bother, overall we'll use maybe four lines of code total to support IE 5.5 - BIG DEAL, MAKE THE EFFORT. IE in 'quirks mode' centers fixed width div's based on text-align, this is incorrect, but we can use it to our advantage since IE 5 only has 'quirks' since it predates 'standards mode'. I set the content fonts up as %/EM by default so 99% of our content (pretty much anything in a paragraph tag) will be that size - said size automatically enlarging for large-font/120dpi users and automatically shrinking for certain handheld users. body { text-align:center; /* center #pageWrapper IE 5.x */ font:normal 85%/130% arial,helvetica,sans-serif; } Code (markup): Oh, I also switched it to a sans-serif fontset as the default - serif fonts are difficult to read on screen, which is why you rarely see them used in web design. You'll notice across the whole stylesheet I always declare the full property - it ends up about as much code as declaring size, weight and height anyways, and I ALWAYS declare line-height becuase the browser defaults CANNOT be trusted. For the pagewrapper we set the width. I made it narrower than the original image so it's 1024 friendly - though PERSONALLY I would not make it a fixed width, it's your layout, your call. Taking 32px off of it does a good job of making it 'fit' around the borders, scrollbars and other elements you might encounter on a browser. The auto margins center this element in standards compliant browsers, and I set text-align to throw everything back to the 'normal' behavior after our body element centering. #pageWrapper { width:992px; /* 1024 - 32px for browser chrome */ margin:0 auto; text-align:left; } Code (markup): Next up is our h1. h1 { position:relative; width:100%; /* trip haslayout */ padding:36px 0 6px; letter-spacing:-1px; font:bold 46px/48px arial,helvetica,sans-serif; color:#8A1; background:url(images/h1Background.png) 0 0 repeat-x; } Code (markup): I set position:relative so I can position that span over it with absolute positioning. This is called 'Gilder-levin image replacement' and allows us to have the nice pretty styled image, while still having a valid H1, text for screen readers to read without saying "image" first (or skipping it outright) and good images off appearance - much less hooks to make handhelds look better too when/if you make a handheld.css The 100% width trips haslayout, a funny little 'quirk' of IE that makes it render some elements PROPERLY that normally it screws up on. I padded the top to make room for that top image, which you can see is applied as the background element at the bottom. On the text I formatted it to look pretty much close to the logo, so people on restricted data plans browsing with images off get something pretty to look at instead of some ugly box and uglier alt text. You'll see me doing stuff like that across the whole page. The text size and line-height set here are for the top line, as is the color. Which is where our small tag comes into play for the second line. h1 small { display:block; padding-left:32px; font:bold 30px/32px arial,helvetica,sans-serif; color:#236; } Code (markup): The display:block removes some oddball excess padding from the first line's line-height. The padding mimicks the image, as does the font size declaration and color. Next that span sandbag, which is our Gilder-levin image replacement in action. We just use this to place the image OVER the text hiding it for people who want to see images. h1 span { position:absolute; top:36px; /* same as top padding on h1 */ left:0; width:852px; height:80px; background:url(images/h1Logo.png) 0 0 no-repeat; } Code (markup): Pay attention to the use of 'top' to push the image down past h1's background. I changed the spacing a bit on this because I thought it looked better with an even 6px top/bottom padding than it did with none at the top and 12px at the bottom as per the original image. .contactInfo { float:right; /* position:relative and margin trick to move our info into place. Looks better if we DON'T make it flush top */ position:relative; height:86px; /* a few extra PX to push down #menuBannerNoticas */ margin-top:-78px; text-align:center; white-space:nowrap; font:bold 16px/20px arial,helvetica,sans-serif; color:#999; } Code (markup): The contactInfo we simply float, then use a negative margin to ride up over our H1. This means we don't need to play with the width of the h1 or float it, while still letting us position that text. I pulled that text from the image because that's important content, and someone might want to cut/paste from there into an application like skype to make the call. The nowrap prevents the float from collapsing narrower than the widest line, which gives us width without declaring a width. The fonts are declared in px - this is generally a no-no for content since they don't automatically enlarge, but given the amount of space and interaction with the image next to it, this, along with the menus and a few other elements like the headings are the exception to the rule. Generally if you HAVE to declare PX, use 14px or larger. Let's face it, few people are going to complain about 16px being too small. #menuBannerNoticas { position:relative; clear:both; /* eliminate .contactInfo's float from interfering */ overflow:hidden; /* wrap floats */ width:100%; /* trip haslayout, wraps floats in IE */ background:url(images/ultimasMenuFauxColumns.png) 0 0 repeat-y; } Code (markup): The position:relative on this one is because I chose to absolute position the center image for a reason - we'll get to that reason in a moment. The clear is for just in case the h1's height is ingored thanks to the negative margin on the contact info - again, thanks IE for being a retard. Overflow:hidden will make most standards compliant browsers wrap our floats, so this element will always be the height of any floats it contains... IE screws this up, but haslayout makes it have the same behavior. We can use width to trigger haslayout since we aren't declaring any side padding or borders. Last is a background image that is used for what is called 'faux columns'. CSS columns do not automatically all stretch to the same height, which can result in some less than attractive appearance. Putting a background image behind all three on the element wrapping them 'fakes' that appearance. On to the menu: #mainMenu { list-style:none; float:left; width:188px; padding-top:12px; font:normal 14px/16px arial,helvetica,sans-serif; background:#2A3C62 url(images/mainMenuBackground.png) 0 0 repeat-x; } Code (markup): list-style strips the bullets off the list, we float it left to make room for our content with a nice fixed width, and we pad the top to make room for that little 'bar' image your original .jpg had. Again, I fix the font size because we are inside a fixed width layout - and 14px is 'big enough' that even LF/120dpi users like myself won't kvetch about it... last is the background which we set our color and that top little stripe. #mainMenu li { /* display:inline will strip most formatting from them don't even waste time trying to style them further */ display:inline; } Code (markup): The comment says it all. LI's are a pain in the ass, unless you are going to have a flyout menu, don't waste your time on them. #mainMenu a { display:block; /* so we can set dimensions on it */ position:relative; /* so we can position our spans */ zoom:1; /* trip haslayout */ padding:8px 8px 8px 32px; text-transform:uppercase; text-decoration:none; color:#FFF; border-bottom:2px solid #568; } #mainMenu a:active, #mainMenu a:focus, #mainMenu a:hover { background:#248; } Code (markup): Display:block makes it auto-expand to the width of the column, position:relative is for placement of our button images. Some padding to make them a nice size, the rest is just fonts, colors and the bottom border as per the source image. I also added a hover state, just to make it nice. #mainMenu a span { position:absolute; top:4px; left:4px; width:24px; height:24px; background:url(images/menuIcons.png) 0 0 no-repeat; } Code (markup): The span is absolute positioned and loads our strip of images. This is often called 'css sprites' (technically incorrect since sprites are supposed to actively move). This allows us to use all those classes to change the image while only having one image file. Thus: #mainMenu .iMereb a span { background-position:0 -24px; } #mainMenu .vision a span { background-position:0 -48px; } #mainMenu .manual a span { background-position:0 -72px; } #mainMenu .fotos a span { background-position:0 -96px; } #mainMenu .contactenos a span { background-position:0 -120px; } Code (markup): Which slides that background image around to show the individual icons from this image: http://www.cutcodedown.com/for_others/gotOwned/images/menuIcons.png #ultimasNoticias { width:188px; float:right; padding-top:12px; color:#FFF; background:#2A3C62 url(images/mainMenuBackground.png) 0 0 repeat-x; } Code (markup): The notices are next. I made them the same width as the menu so the site has some symmetry. Pretty simple, opposite float, same top image, colors. Nothing to write home about. #ultimasNoticias h2 { text-align:center; padding:4px 0; font:bold 18px/20px arial,helvetica,sans-serif; color:#8A1; } Code (markup): Because we are in a fixed-width area, the h2 gets px fonts as well, this time 18px - again, nobody will complain about 18px being too big. Center the text, give it some color and some top/bottom padding. #ultimasNoticias p { padding:0.5em; } Code (markup): I gave the paragraph padding in EM since the fonts will be shown in EM. The larger padding for larger fonts always looks better. I use padding instead of margin on these because they don't collapse, give a nice small top/bottom while still having a full EM in-between paragraphs. The middle image is next. #menuBannerNoticas .middleImage { position:absolute; top:0; left:196px; width:600px; height:100%; background:url(images/bannerMiddle.jpg) center center no-repeat; } Code (markup): I chose to absolute position it because I'm making the image auto grow/shrink which means at different font sizes or as the content changes more/less of that image will be shown. I took the time to restore it's aspect ratio too. In standards compliant browsers our height:100% will make it grow to fit the height of #menuBannerNoticas - but IE6/earlier botches this... Solution? Javascript expression to the rescue: * html #menuBannerNoticas .middleImage { /* IE6 doesn't calculate height right, but we can fake it with an expression. First, let's make a fixed height */ height:380px; /* then our expression */ height:expression( this.parentElement.offsetHeight+'px' ); } Code (markup): * html is a hack that says 'this CSS is for IE6/earlier' - many people would put that in a separate stylesheet and use a IE conditional in the markup... I hate that **** since it's more markup and puts it into a separate file (I like to see everything together!). The comments in that section explain it pretty good. on to our #contentWrapper. #contentWrapper { clear:both; /* shouldn't HAVE to do this, thanks IE 5 */ padding-top:11px; background:url(images/contentDivider.png) 0 0 repeat-x; } Code (markup): The comment on the clear says it all. It's just in case for some bizzare reason #menuBannerNoticas doesn't contain it's floats. Top padding is for that divider image, which we also apply as a background. #content { float:right; width:744px; } Code (markup): content is pretty simple. Float it, set it's width. Fixed width layout means we don't need to get fancy with it. #contentWrapper h2 { position:relative; /* so we can position our span */ height:1%; /* trip haslayout */ padding:3px 6px 3px 35px; font:bold 18px/22px arial,helvetica,sans-serif; background-position:0 -28px; background-repeat:repeat-x; } Code (markup): Since the H2 in both our sidebar and content are get pretty much similar styling, we will nab them on masse off #contentWrapper. The position:relative is for the icon on each heading. Because it's absolute positioned we need a haslayout trigger - we can't use width because of side padding, but because we have NOT declared an overflow state on this element, we can use height:1%; - percentage heights on elements who's parent's don't have a fixed height, position:relative OR overflow defaults back to height:auto, but it still trips haslayout. Again because images are involved we use px for the fonts, again nobody will complain 18px is too small. I also set the background-position and background-repeat. The negative background position is to allow us to use the same image for both the icon and the repeating tiled gradient. You'll notce I don't declare a fixed height - padding + line-height is a better choice since we want to use padding for 'better' centering of the text. Normally I would condense background properties to single lines, but becuase I'm playing with both color and position, it's better to state them separately. The span is similar to what was done on the menu, #contentWrapper h2 span { position:absolute; top:0; left:0; width:28px; height:28px; background-position:0 0; background-repeat:no-repeat; } Code (markup): position:absolute inside it's relative positioned parent, fixed width/height, and a couple default background values. Letting us do our default values for the h2: #content h2 { color:#236; background-color:#7B1; background-image:url(images/h2ContentBackground.png); } #content h2 span { background-image:url(images/h2ContentBackground.png); } Code (markup): the .first one with it's different color gets the same treatment. #content .first h2 { color:#9D4; background-color:#06C; background-image:url(images/h2FirstBackground.png); } #content .first h2 span { background-image:url(images/h2FirstBackground.png); } Code (markup): Color, background-color, images. Nothing fancy. #content p { padding:0.5em; } #content .article { padding-bottom:1em; } Code (markup): Just some padding on our elements to space things nicely, which finishes off #content, on to #sideBar #sideBar { float:left; width:240px; } Code (markup): Width, float, nothing fancy. I made the width narrower than the available space so we don't need to play with padding - it also prevents the 'ride down' error some people hit up against in IE. Since they too have h2's... #sideBar h2 { color:#8A1; background-color:#246; background-image:url(images/h2SideBarBackground.png); } #sideBar h2 span { background-image:url(images/h2SideBarBackground.png); } Code (markup): We apply their colors and backgrounds - all the rest is picked up off our previous declaration. That's where the 'cascading' part of CSS is nice. #sideBar h3 { padding-top:0.5em; color:#236; font:bold 100%/120% arial,helvetica,sans-serif; } #sideBar p { padding:0.25em 0.5em; } #sideBar .article { padding-bottom:0.5em; } Code (markup): Padding, font, colors - nothing too fancy here. #sideBar .article .masInfo { display:block; text-align:center; color:#8A1; } #sideBar .article .masInfo:active, #sideBar .article .masInfo:focus, #sideBar .article .masInfo:hover { color:#236; } Code (markup): The display:block lets us center the content inside the anchors, apart from that it's colors, though I did add hover state and keyboard navigational aids. .trailingPlate { float:right; padding:0 0 4px 4px; } .leadingPlate { float:left; padding:0 4px 4px 0; } .plate { display:block; margin:0 auto 4px; } Code (markup): I included all three of my standard 'plate' layouts - we only used one, but they are handy to have predeclared for adding/removing plate images. Believe it or not, all that's left is the footer. #footer { clear:both; height:1%; /* trip haslayout */ padding:8px 0.5em; background:#E5E6EA; border-top:32px solid #2B3D63; } Code (markup): The clear should also be unneccessary, but I put it in for good measure. The haslayout trigger fixes IE for some reason treating the border as double padding... from there it's pretty simple. I added the 32px top border to replicate the blue bar from the original image - wasn't sure if you were going to add content there or if that was just decoration. ... and that's it. The full CSS. You can see a copy in action here: http://www.cutcodedown.com/for_others/gotOwned/template.html As with all my examples the directory: http://www.cutcodedown.com/for_others/gotOwned ... is unlocked so you can grab the gooey bits. You'll really want to dig into the images directory since I re-optimized so the whole page is now less than 85k. It's valid XHTML 1.0 Strict, would be valid CSS 2.1 if I hadn't resorted to expression and zoom for IE support (there is no excuse for invalid markup - invalid CSS is fine as long as you know WHY it's barfing on an element). Tested working perfect in IE 5.5, 6, 7 & 8, Opera 9.6 and 10.10, FF 2 and 3.5, and the latest flavors of Safari and Chrome. Hope this helps - I know it's a lot to digest, but hopefully you can learn from it. I did my best to document as I went. Funny part is it took me longer to write the explanation than it did to write the code itself. Give a man a fish, he eats for a day. Teach a man to fish, he'll bore you to death on the Outdoor Life Network.