Pro HTML5 and CSS3 Design Patterns
CHAPTER 17 ■ LAYOUTS Template shows how to define positions using an alphabetical character and the position property. Layout E ...
CHAPTER 17 ■ LAYOUTS Fluid Layout Overview Problems You want to create fluid layouts that automatically adapt to different devic ...
CHAPTER 17 ■ LAYOUTS Outside-in Box HTML <h1>Outside-in Box</h1> <h2>Before</h2> <div class="containe ...
CHAPTER 17 ■ LAYOUTS Outside-in Box Alias Outer Width Problem You want to set the outer width of a float, an absolute, or a stat ...
CHAPTER 17 ■ LAYOUTS HTML <h1>Outside-in vs. Inside-out Design</h1> <h2>Two floats with 50% width and no margi ...
CHAPTER 17 ■ LAYOUTS OUTSIDE-IN VS. INSIDE-OUT DESIGN Fluid layouts are designed from the outside to the inside. This is because ...
CHAPTER 17 ■ LAYOUTS bugs that sometimes cause floats not to be placed side by side when they should be. For example, in the thi ...
CHAPTER 17 ■ LAYOUTS Floating Section Problem You want sections to be rendered in columns instead of rows. You want a browser to ...
CHAPTER 17 ■ LAYOUTS Float Divider HTML <h1>Float Divider</h1> <h2>First Row of Floats</h2> <div clas ...
CHAPTER 17 ■ LAYOUTS Float Divider Problem You want to put a divider between two sets of floats or between floats and content—mu ...
CHAPTER 17 ■ LAYOUTS Fluid Layout HTML <h1>Fluid Layout</h1> <div id="main"><div class="oi1"> <h2> ...
CHAPTER 17 ■ LAYOUTS Fluid Layout Problem You want to lay out sections in rows and columns that dynamically and fluidly adapt to ...
CHAPTER 17 ■ LAYOUTS Opposing Floats HTML <div id="header"> <h1 id="title">Opposing Floats</h1> <div id="se ...
CHAPTER 17 ■ LAYOUTS Opposing Floats Problem You want two elements to be positioned at opposite sides of a container. You want a ...
CHAPTER 17 ■ LAYOUTS Event Styling HTML <head> <!-- only script elements are shown --> <script type="text/javascr ...
CHAPTER 17 ■ LAYOUTS Event Styling cont. Solution cont. The first $('document').ready() function in page.js executes a generic f ...
CHAPTER 17 ■ LAYOUTS Rollup HTML <h1>Rollup</h1> <div id="main" class="rollup"> <h2 class="rollup-trigger"& ...
CHAPTER 17 ■ LAYOUTS Rollup Problem You want the user to dynamically interact with sections, FAQs, lists, and so forth by rollin ...
CHAPTER 17 ■ LAYOUTS HTML Header <head> <!-- only script elements are shown --> <script language="javascript" typ ...
CHAPTER 17 ■ LAYOUTS Rollup cont. Limitations Text placed directly inside the rollup container isn’t rolled up. In the example, ...
«
15
16
17
18
19
20
21
22
23
24
»
Free download pdf