Basic Page Layouts - Part 2

Basic Page Layouts - Part 2 - CGS 2585: Desktop/Internet...

Info iconThis preview shows pages 1–5. Sign up to view the full content.

View Full Document Right Arrow Icon
CGS 2585: Basic Page Layouts – Part 2 Page 1 © Mark Llewellyn CGS 2585: Desktop/Internet Publishing Spring 2011 Basic Page Layouts – Part 2 Department of Electrical Engineering and Computer Science University of Central Florida Instructor : Dr. Mark Llewellyn [email protected] HEC 236, 407-823-2790 http://www.cs.ucf.edu/courses/cgs2585/spr2011
Background image of page 1

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
CGS 2585: Basic Page Layouts – Part 2 Page 2 © Mark Llewellyn • A layout which is designed to fit a smaller screen can look like a postage stamp on a large screen. The solution to this is to create a liquid layout that can change its width to more closely fit the width of any screen. • This is a user-friendly approach to website design. A Two-Column Liquid Layout
Background image of page 2
CGS 2585: Basic Page Layouts – Part 2 Page 3 © Mark Llewellyn To modify the two-column fixed-width layout that we covered in the previous section of notes, we’ll need to do only one thing: 1. Remove the fixed-width setting on the main_wrapper <div> element, so the layout’s width can change with the browser window’s width. Creating the liquid layout from the fixed-width layout is that simple! The layout now instantly changes width as the browser window width changes. The now undimensional main_wrapper becomes the full width of its parent (the <body> element), which is by default the full width of the browser. A Two-Column Liquid Layout
Background image of page 3

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full DocumentRight Arrow Icon
Page 4 © Mark Llewellyn Since both columns in the layout are sized in percentages, they now both change size proportionately with any changes in the browser window width, and “liquidness” is obtained. Note that the margin-left:auto; and margin- right-auto; CSS rules do nothing now in the liquid layout (since the layout always fills the available horizontal space in the browser) and can be removed without problems from the stylesheet. The next page is a browser rendering of the two-column liquid layout. A Two-Column Liquid Layout
Background image of page 4
Image of page 5
This is the end of the preview. Sign up to access the rest of the document.

This note was uploaded on 07/16/2011 for the course CGS 2585 taught by Professor Llewellyn during the Spring '11 term at University of Central Florida.

Page1 / 25

Basic Page Layouts - Part 2 - CGS 2585: Desktop/Internet...

This preview shows document pages 1 - 5. Sign up to view the full document.

View Full Document Right Arrow Icon
Ask a homework question - tutors are online