/* CSS for Assignment 3 NED 12 Final Website - Kerridge O'Shea - CAOS Site redesign - August 2010 */ /* Some browsers automatically add small margins and padding to pages. This is insurance to fix that */ html { margin: 0; padding: 0; } /* I used a sans-serif font because these are seen to be preferred for on-screen reading (Freeman and Freeman,2005, p344) and Verdana is preferred(Niles, 2008). The text has a basic black color, which is easy to read and is not usually confused with hyperlinks. In other words, its important to make clear what's clickable (Krug 2006, p37) Line-height has been set at 140% to enhance readability(Castro 2007, p158). The background image is centered to provide maximum visual "thunderhead" effect. */ body { font-family: Verdana, Arial; color: black; padding: 10px; Line-height: 140%; background-color: #f2f2f1; /*background-image: url(images/KeroTV_and_tagline.jpg); */ background-repeat: no-repeat; background-position: top center; text-align: center; /* part of fix to get IE to centre a fixed width page properly */ } /*I decided that centering the layout using the jello option (Freeman and Freeman,2005, p526) would allow space on both sides of Charlotte's art. This space and the margin-top of 250px is important to the visual effect of the 'thunderhead' background image and the overall appearance of the site, including the navigation elements being positioned in the clearing bottom fringe of the cloud. The width of 1000px has been set to provide optimal visual effect. */ #container { margin: auto; /*margin-top: 250px; */ width: 1000px; text-align: left; /* part of fix to get IE to centre a fixed width page properly */ } h1,h2,h3{ font-family: Verdana, Arial; color: #3a3838; } /*This allows better differentiation between heading sizes - feedback received during NED11 website development*/ h2,h3 { font-size: 95%; line-height: 100%; color: #3a3838; } /* Links will not be underlined, as the use of standard colours for links will identify them and they are where people expect to see links(Neilsen 2004). Usability tests on the CAOS site confirmed the links are readily identified by users */ a:link{text-decoration: none;} a:visited{text-decoration: none;} /* I used the margin-left to position the top navigation bar in the clearing fringe of the background image "thunderhead" and centre it over the page content. The font size is slightly enlarged for improved user identification and clarity (Castro 2007, p158). */ .menu { margin-left: 40px; font-size: 110%; clear: both; } /* The site ID is positioned as -alongside the logo- one of the dominant visual features on the page, so it is sized and weighted accordingly */ .site_id { padding: 15px 25px 0px 0px; font-size: 250%; color: #3a3838; font-weight: bold; } /* The tagline is positioned just below the Site ID to reinforce the role of the site (Krug 2006) and the large margin-left is used to achieve this position. I have used a font-size of 110% to improve the legibility of the tagline. */ .tag { padding: 0px 0px 0px 0px; font-size: 110%; color: #3a3838; margin: auto; margin-left: 520px; } /* I have given the
div a thin grey bottom border to help define the "docking point" between the background image and the page content. */ #header { border-bottom-color: gray; border-bottom-width: 2px; border-bottom-style: solid; padding: 10px 0px 25px 25px; width: 1000px; } #page_heading { text-align: center; /* part of fix to get IE to centre a fixed width page properly */ } /* I have floated the logo left alongside the site id in the header. The fixing of width is necessary when floating an element (Freeman and Freeman 2005, p 495) */ #logo_box { float: left; padding: 0px 20px 0px 0px; width: 130px; } /* I have floated the div left alongside the div and have provided a margin-top to ensure appropriate visual space. The fixing of width is necessary when floating an element (Freeman and Freeman 2005, p 495) */ #home_headline { float: left; text-align: left; /* part of fix to get IE to centre a fixed width page properly */ margin-top: 20px; } #intro { float: left; width: 480px; text-align: left; /* part of fix to get IE to centre a fixed width page properly */ margin-top: 20px; } /* I have floated the div left alongside the div and have provided a margin-top to ensure appropriate visual space. The fixing of width is necessary when floating an element (Freeman and Freeman 2005, p 495) */ #about_me { float: left; width: 520px; text-align: left; /* part of fix to get IE to centre a fixed width page properly */ margin-top: 20px; } /* This
is centred within the containing and given top and bottom margins to provide visual clearance. */ #three_d_art { margin: 20px 0px 20px 0px; margin-left: auto; margin-right: auto; text-align: center; /* part of fix to get IE to centre a fixed width page properly */ } /* Margin provided for visual clearance. */ #two_d_art { margin-bottom: 30px; } /* Padding set to provide space around contained elements. */ #main_content { padding: 20px; margin: 0px 0px 0px 0px; width: 1000px; text-align: center; /* part of fix to get IE to centre a fixed width page properly */ } /* Margin provided for visual clearance. */ #stop_press { margin-left: 30px; margin-top: 50px; } /* Margin provided for visual clearance. */ #media { margin-left: 30px; margin-top: 50px; } /* Margin provided for visual clearance. */ #banners { margin-top: 20px; margin-bottom: 20px; } /* I have given the small half banner "flash_fat advertisement a thin purple border to provide better definition. Floating elements are kept away from both sides of this element by way of the "clear" property(Meyer 2008, p71). The margins are set to provide visual clearance. */ /* The flash_Cambodia medium rectangle is floated so that other block elements can move to the right of it. The width is provided as this is essential when floating a block element (Freeman and Freeman 2005, p 495). */ #flash_Cambodia { width: 300px; float: left; } /* The .current_page class is used to mark the crippled link that is the current page and it used to provide strong "where I am" feedback to the site user (Krug 2006). */ #surveyMonkeyInfo { float: right; width: 490px; margin-top: 40px; } .current_page { font-size: 110%; font-weight: bold; color: black; } /* This span class is used to provide suitable visual margins around the element (Freeman and Freeman 2005, p466) */ .image_3d { margin: 20px 0px 20px 0px; } /* This span class is used to provide suitable visual margins around the element (Freeman and Freeman 2005, p466) */ .image_2d { margin: 20px 20px 20px 20px; } /* This span class is used to provide suitable visual margins around the element (Freeman and Freeman 2005, p466) */ .image_banner { margin: 20px 20px 20px 20px; } /* Floating elements are kept away from both sides of the footer by way of the "clear" property(Meyer 2008, p71). The margins are set to provide visual clearance. The contained element is kept away from the edge of