Join Joseph Lowery for an in-depth discussion in this video Applying the faux column technique, part of Layouts with CSS in Dreamweaver.
The strategy of using the float property to create a multiple column layout as…illustrated in the Developing Basic Layouts chapter has what many designers…would consider a major flaw, that is, the content area expands to fit the…longest column and any other columns are left behind like this.…In this video I'll show you two different faux column techniques, one for…fixed width sites and another for liquid sites, let's start with the fixed width version.…
I'm in design view and as I just showed you, I do have the two columns the…column on the left the content area extends further down than the one on the…right, the sidebar and we want them both to appear to be the same equal length.…So what we're going to do is create a faux or fake column, and the way you do…that is you take an image that's a small slice of the current background and…then put it in the containing element as a background image and repeat it on a…-- in this case vertical axis, the Y axis, so that it fills out the space.…
So the first task is creating that image, luckily you can do that right from…
- Exploring HTML5 templates in Dreamweaver
- Understanding document flow
- Using floats properly
- Resetting CSS styles
- Creating a 1-, 2-, or 3-column layout
- Deciding on a fixed width versus variable width design
- Coding layouts for HTML5 and CSS 3
- Incorporating floated elements
- Applying the faux column technique
- Using Spry widgets
- Using Multiscreen Preview
- Modifying desktop layout for tablets
- Developing smart phone layouts
Skill Level Intermediate
Site Navigation with CSS in Dreamweaverwith Joseph Lowery3h 24m Intermediate
Typography with CSS in Dreamweaverwith Joseph Lowery2h 30m Intermediate
Dreamweaver CS5 Essential Trainingwith James Williamson15h 22m Beginner
1. Dreamweaver Example Layouts
2. Layout Concepts
3. Basic Layouts
4. Interior Layouts
5. Alternative Screen Layouts
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.