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.
December 22, 2006
December 2006 Meeting Report:
Fixed-width Layouts
At the December meeting of the PACS CSS Workshop, we continued on the topic of using CSS to lay out a page, emphasizing that the basic concept is moving boxes -- repositioning the boxes that are created by HTML tags.
We reviewed our work at the November meeting where we used CSS for a two-column liquid layout, that is, one that expands as the browser expands. We then showed that making the columns fixed widths is more complicated.
We took a slight detour and showed how a page can be set up to look like two fixed-width columns without actually creating columns, but by employing float and clear. The file we worked one is uploaded to the Samples Pages section (see index in sidebar) in case anyone wants to download it and experiment with the styles.
We then showed an example of settng up two fixed-width columns, with one floated and one having a wide left margin. This technique has its limits, but it works across browsers and is easy to set up. This sample file has also been uploaded.
Next month, we will continue on laying out fixed width pages using CSS.
We reviewed our work at the November meeting where we used CSS for a two-column liquid layout, that is, one that expands as the browser expands. We then showed that making the columns fixed widths is more complicated.
We took a slight detour and showed how a page can be set up to look like two fixed-width columns without actually creating columns, but by employing float and clear. The file we worked one is uploaded to the Samples Pages section (see index in sidebar) in case anyone wants to download it and experiment with the styles.
We then showed an example of settng up two fixed-width columns, with one floated and one having a wide left margin. This technique has its limits, but it works across browsers and is easy to set up. This sample file has also been uploaded.
Next month, we will continue on laying out fixed width pages using CSS.
December 14, 2006
December 16 Meeting Announcement
The next meeting of the PACS CSS Workshop will be this Saturday, December 16, at the 9-10 hour.
Last month we worked on two-column liquid layouts using CSS. This month, we will continue by looking at fixed-width layouts. They are trickier to do, and we will look at a few ways to accomplish the task. Depending on time, we might also throw in a couple of other tips on using CSS.
We will be back to the full complement of sessions this month, with JavaScript, Flash, ASP.net, and Web Design. Be sure to stay for Web Design because we will have Saul Rosenbaum returning for another outstanding presentation, and we will be raffling off another new CSS book, CSS Mastery: Advanced Web Standards Solutions.
Last month we worked on two-column liquid layouts using CSS. This month, we will continue by looking at fixed-width layouts. They are trickier to do, and we will look at a few ways to accomplish the task. Depending on time, we might also throw in a couple of other tips on using CSS.
We will be back to the full complement of sessions this month, with JavaScript, Flash, ASP.net, and Web Design. Be sure to stay for Web Design because we will have Saul Rosenbaum returning for another outstanding presentation, and we will be raffling off another new CSS book, CSS Mastery: Advanced Web Standards Solutions.
December 09, 2006
November 2006 Meeting Report:
Two-column Layouts
At our November meeting, we took the float and clear properties, combined them with the DIV tag and the box model, and began formatting text on a page.
We started with a single column and centered it by making left and right margins auto. We pointed out that these properties do not work in Internet Explorer unless a DOCTYPE is declared.
We then worked on a two-column, fluid layout. In the process, we discussed another Internet Explorer box model problem, that being the way IE calculated width in earlier versions of the browser. Again, declaring a DOCTYPE solves the problem.
We had an extra thirty minutes this month, and we spent the time reviewing CSS editors and validation sites. Links to these utilities have been added to the CSS Resources Page of this site (see sidebar).
We started with a single column and centered it by making left and right margins auto. We pointed out that these properties do not work in Internet Explorer unless a DOCTYPE is declared.
We then worked on a two-column, fluid layout. In the process, we discussed another Internet Explorer box model problem, that being the way IE calculated width in earlier versions of the browser. Again, declaring a DOCTYPE solves the problem.
We had an extra thirty minutes this month, and we spent the time reviewing CSS editors and validation sites. Links to these utilities have been added to the CSS Resources Page of this site (see sidebar).
November 17, 2006
November 18 Meeting Announcement
Tne next meeting of the PACS CSS Workshop will be this Saturday, November 18. The topic will be two-column layouts.
We have a special schedule this month. Because the Javascript Workshop will not be meeting, CSS and Flash will each expand by thirty minutes. So we will spend the usual 9-10 period for our regular workshop where we will be putting together the CSS properties we have been working on and use them to create two-column layouts in a few different ways. By the end, we will have templates to quickly create pages, letting you just paste content right into the templates.
For our extra half hour, we will change gears and look at tools for editing CSS. Up to now, we have been composing our style sheets by hand with just a text editor. A dedicated CSS editor can make the job easier. We will look at a couple of those editors.
And we can talk about other tools as time permits.
Flash will then start at 10:30. Mike has some special topics of interest for his extra 30 minutes.
Finally, at Web Design, Reed will continue on page layouts, and we will raffle off a copy of a new book on CSS, Beginning CSS Web Development: From Novice to Professional.
We have a special schedule this month. Because the Javascript Workshop will not be meeting, CSS and Flash will each expand by thirty minutes. So we will spend the usual 9-10 period for our regular workshop where we will be putting together the CSS properties we have been working on and use them to create two-column layouts in a few different ways. By the end, we will have templates to quickly create pages, letting you just paste content right into the templates.
For our extra half hour, we will change gears and look at tools for editing CSS. Up to now, we have been composing our style sheets by hand with just a text editor. A dedicated CSS editor can make the job easier. We will look at a couple of those editors.
And we can talk about other tools as time permits.
Flash will then start at 10:30. Mike has some special topics of interest for his extra 30 minutes.
Finally, at Web Design, Reed will continue on page layouts, and we will raffle off a copy of a new book on CSS, Beginning CSS Web Development: From Novice to Professional.
November 11, 2006
October 2006 Meeting Notes:
Layout Properties
At the October session, we continued with the the CSS attributes of float and clear. I have uploaded to the Sample Pages section (see sidebar)a couple of the files we used at the meeting, for those who want to review them and work with these styles.
We used a sample file to compare the HTML use of align and clear with the CSS use of float and clear. That file might be of interest if you want to play with the basics of each. We also used a file to show how to use float and clear to create a drop-cap effect.
We then began putting these properties together to create two column layouts. We will expand on this topic at the November meeting when we work on different types of layouts using CSS.
We used a sample file to compare the HTML use of align and clear with the CSS use of float and clear. That file might be of interest if you want to play with the basics of each. We also used a file to show how to use float and clear to create a drop-cap effect.
We then began putting these properties together to create two column layouts. We will expand on this topic at the November meeting when we work on different types of layouts using CSS.
October 18, 2006
October 21 Meeting Announcement
The next meeting of the CSS Workshop will be this Saturday, October 21, from 9 to 10 am.
We will continue this month on the topic of using CSS to lay out webpages. If you missed last month's session, we will do a quick review before moving on, so you should be able to catch up quickly.
We will work with the float and clear properties, and then possibly get into position. It will be an interesting hour, and we will be laying the foundation for some advanced uses of CSS.
We will continue this month on the topic of using CSS to lay out webpages. If you missed last month's session, we will do a quick review before moving on, so you should be able to catch up quickly.
We will work with the float and clear properties, and then possibly get into position. It will be an interesting hour, and we will be laying the foundation for some advanced uses of CSS.
September 18, 2006
September 2006 Meeting Notes:
Beginning CSS Layout
At our September meeting, we started on using CSS to define the layout of a webpage. We began by reviewing the use of tables to format a page, a technique that is still useful and can be used to structure a page which is then styled with CSS. This kind of hybrid approach has its advantages, as is pointed out in this article at Builder.com.
To move on to pure CSS layout techniques, we started by looking at the HTML align attribute. Align is used with images and tables to move the element to the margin and let subsequent text wrap around it. We then looked at the clear attribute that is used with <BR> to begin text after an aligned item.
CSS introduces the float property that allows any element to be positioned along a margin with text wrapping around the element. And the clear property can be used with any element, not just line break. We did some work with these properties to show how they are used with images instead of using HTML align.
At our next meeting, we will start with a brief review of the box model, the basis for page layout. To see some visual representations of the box model, do a Google image search for "css box model." For a review of the box model, see this Builder.com article. For practice with the different properties of boxes, go to the Index of Sample Pages on this site (link in sidebar), and go down to Basic Boxes and the subsequent samples. Download them and check the comments to try out different properties that affect boxes.
To move on to pure CSS layout techniques, we started by looking at the HTML align attribute. Align is used with images and tables to move the element to the margin and let subsequent text wrap around it. We then looked at the clear attribute that is used with <BR> to begin text after an aligned item.
CSS introduces the float property that allows any element to be positioned along a margin with text wrapping around the element. And the clear property can be used with any element, not just line break. We did some work with these properties to show how they are used with images instead of using HTML align.
At our next meeting, we will start with a brief review of the box model, the basis for page layout. To see some visual representations of the box model, do a Google image search for "css box model." For a review of the box model, see this Builder.com article. For practice with the different properties of boxes, go to the Index of Sample Pages on this site (link in sidebar), and go down to Basic Boxes and the subsequent samples. Download them and check the comments to try out different properties that affect boxes.
Subscribe to:
Posts (Atom)