table exercise
Written by Anna Andreen
Monday, 23 March 2009 23:57
Normal 0
In recreating the table web page, I first stripped the code down to its basic html and css properties to eliminate anything and everything associated with tables. I separated the page into divs so I could then use the float property to position the content of the page. I used the float property so the layout would be elastic and change depending on the size of the browser window when I set the widths of the navigation and content divs in percentages. I ran into the problem of not being able to extend the background of the navigation box without setting a specific height. Had I done this, the layout would not be as elastic as it could be. I then used the faux column method in the Bulletproof text to create an image in the background that would repeat down the y-axis to fake a navigation column that fully extended. I also ran into the problem of my content spilling over into the navigation bar when the browser size was changed (since most of the bar is really just an image). I set padding on the left side of the content so that there would be space between it and the navigation. The text starting with the h2 element also kept running into the image and first short paragraph, so I used ‘#content h2’ to select it specifically and set it to have a clear property so it wouldn’t run into the text above it.
