960 grid designs
960 is a great number. You can divide it by 2, 3, 4, 5, 6, 8, 10, 12, etc. and 960 pixels fits inside most modern desktop screens. It's great for using with grids and there is a fantastic resource available called
960.gs where you can download all sorts of 960 related templates. To use a 960 grid create a div with an ID of wrapper in your HTML...
<body>
<div id="wrapper">
...and in your css use the auto attribute of the margin property, like so...
#wrapper {
width: 960px;
margin: 0 auto;
}
...which will automatically centre the div in the middle of your browser window!
Desktop Dinosaurs
I've been looking at responsive web design as there is a growing need to accomodate screen sizes smaller than desktops. 960px is fine if you have a decent screen, but no good for notebooks or smart phones. By using @media queries in your CSS you can specify different styles for different screen sizes (and different media such as the printed page) as
this a list apart article demonstrates. You can also be responsive so screen sizes by using %ages instead of fixed pixel widths on elements.
In the lecture/lab session
This week we looked at more CSS in the lecture and practiced it in the lab session. Dan spoke about inline and block elements again. A block element spans the page, whereas an inline element doesn't. Therefore block elements can contain inline elements, but inline elements cannot contain block elements. It's useful to be able to change an inline element such as an anchor to a block so that you can set it's width as demonstrated in this week's
lab session exercise: creating a horizontal navigation bar with hover-effects.
No comments:
Post a Comment