Basic Steps to Create the Site-in-an-Hour
I have to start by saying that the Site-in-an-hour exercise was one of the most valuable lessons that I have completed in a long time. I really learned a lot.
I forgot to include several images in the img folder; please copy the siteinanhour folder to your user directory again.
Here’s what you should do:
Type the XHTML code in TextPad; save the file as index.html in the siteinanhour folder. Proofread your code carefully. After you have completed the XHTML code file, preview it in both Firefox and Internet Explorer. Your document should have no styling and look very bland; you can see my unstyled XHTML document here. Even after the CSS code has been created and attached, the older “legacy” browsers will still see this bland version. This is because of the method that was used to import the default.css file:
After completing the XHTML file, start building the CSS. As you add each new declaration, preview the index.html file in Firefox to see the changes to the page. This is a really important part of the building process and it will help you to understand what each declaration is controlling and styling. Remember to add your own comments to each section of the code.
There is a tricky CSS ruleset used to clear the floated elements:
ul#nav:after, #outer:after, #sub:after, form:after, form div:after {
content:".";
display:block;
visibility:hidden;
clear:both;
height:0;
}
In all honesty, this confused me, but Andrew points to this article at CSS Creator that outlines the method used. I was still confused, but then I found an article at position is everything which helped to clear the fog a bit.
In the CSS code we are applying a border and a background color to the #outer div. Unfortunately, this border will not “grow” to accommodate all the floated elements within, so you end up with a border/background that is shorter than the actual contents of the page. We’ve seen this happen on a number of class projects; the background does not grow to fit the contents. It’s probably easier for me to show you; take a look at the bottom of this page and you will notice that the background does not enclose the footer elements. The above code will fix the issue and should be applied to all of the “floated” elements within the #outer div.
From what I understand there is an easier method to achieve the same results that has recently been discovered. I found some information on this method at Quirksmode. I think that the overflow:auto; could be added to the #outer CSS ruleset like this:
#outer {
margin:0 auto;
width:94%;
min-width:40em;
max-width:70em;
border:10px solid #fff;
border-width:0 10px;
background:#fff;
overflow:auto;
}
I tried this and it worked, but the bottom margin was slightly different with overflow than the original in Firefox; you can see my test with overflow:auto used here. With the original code you can actually see the background image at the bottom of the page. This overflow:auto also made my Internet Explorer very cranky. I will need to do some more research on this because I have a feeling I’m missing something. I’ll update you with my findings. For today’s exercise, use the original code. Please see the comments below for more information on my adventures with overflow.
You can see my final document here. This was a wonderful exercise and I learned a ton and I think you will too Thank you to Andrew Krespanis of leftjustifed.net for allowing my class to experiment with his wonderful presentation!
Please add your comments and questions below.
