So as I sit down to write this it is once again snowing, layering a couple more inches on top of the snow that canceled our class last week. And, since we had no assigned readings this week, I will concentrate in this post on the web page project I worked on in lieu of class. Reverse engineering a website offers some significant challenge compared to an objective based design, especially for a novice digital historian such as myself. Since I could see the outcome but not the method I had to use several stages of trial and error to recreate the Columbine page.
Creating the header and nav were fairly straight forward as we did essentially the same design in class. Getting the text aligned properly was more difficult, especially someone of my rudimentary skill level. I was eventually able to get it where I wanted it by creating a CSS for #content-inner and floating it right with a width termed in percentages that aligned it off of the nav bars. However, this caused the text from my footer to pull up underneath the nav bar and beside the text, looking all messy and out of place. I’m sure there is a more elegant way to do it, by I eventually got it back down at the bottom of the page where I wanted it by inserting enough <br> to push it below the content text. I also had to play around with the various margins to get the nav bars and the text to align evenly below the header.
The pull quote was relatively easy, although I played around with the font-weight to get it somewhere in between the body text and the header texts (I decided on 500). Borders were easy to insert, and I choose a lighter variant of the background color for the header and footer. I’m not entirely satisfied with way the words lay out, I might still go back and play with the leading and letter spacing to make it more even and visually appealing.
Finally, I inserted the columbine flower image and resized it to fit inside the header bar. The one thing I could not figure out was how to get the content’s ivory background to extend above the header and below the footer. I tried playing with the margins and padding of the header and footers to no effect; I was able to get it there by making the body color ivory, but that threw off the borders across the rest of the page (and was also clearly not the method used in the screen shot example, which has a gray body visible around the ivory content). Maybe I can still figure it out before Monday’s class, or one of my classmates can post in the comments how they figured it out.