At the January meeting, we worked on two-column fixed width layouts, which are more difficult than liquid layouts. We still use the float and clear properties, employ the DIV tag extensively, and manipulate the CSS box model.
A fixed-width layout needs an outside DIV to create an outer box within which we build our page, and we reviewed the container/wrapper concept.
We looked again at an example from last month of a page with one float and a large left margin. We then moved on to layouts that float both columns and saw that in browsers other than Internet Explorer, floated elements in a DIV collapse the DIV. Two solutions are (a) a spacer DIV which keeps the wrapper from collapsing, or (b) an inner wrapper that is floated and that can then be used to style the page because it does not collapse.
The samples we used are posted for download and experimenting in the Sample Pages section of this site. The files are listed under Layout Techniques. Look at the source of each page for annotations.
Next month we will look at page templates and then review the template that Saul Rosenbaum demonstrated at Web Design. After that, we will do background-image to make the templates look better, another topic that Saul discussed at Web Design.
January 22, 2007
January 16, 2007
January 20 Meeting Announcement
The next meeting of the PACS CSS Workshop will be this Saturday, January 20, at 9 - 10 am.
We have been talking about page layout for the last two meetings, and this month I want to tie things together to develop a basic CSS page template. To do so, we will talk about some gotchas that come up with the CSS box model, particularly with different browsers. As a lucky coincidence, one such issue came up at last month's Web Design meeting where Saul Rosenbaum demonstrated how he develops a webpage. I have his sample page, and we can review how Saul handles floats and positioning.
And a note about this site: I have reorganized the Index of Sample Pages (see sidebar) to make it easier to find the demo pages that we have used in past meetings.
We have been talking about page layout for the last two meetings, and this month I want to tie things together to develop a basic CSS page template. To do so, we will talk about some gotchas that come up with the CSS box model, particularly with different browsers. As a lucky coincidence, one such issue came up at last month's Web Design meeting where Saul Rosenbaum demonstrated how he develops a webpage. I have his sample page, and we can review how Saul handles floats and positioning.
And a note about this site: I have reorganized the Index of Sample Pages (see sidebar) to make it easier to find the demo pages that we have used in past meetings.
January 04, 2007
Article from Builder.com on understanding floated elements in CSS
A recent article called Build a better Web site by understanding floated elements in CSS might be of interest to members of the workshop. This Builder.com tutorial is a simple one-page introduction to float and clear in CSS. The examples are easy to follow, and they reinforce what we have been covering at our recent meetings.
Note the last example which uses clear to position floated elements relative to each other.
Note the last example which uses clear to position floated elements relative to each other.
Subscribe to:
Posts (Atom)