Pro HTML5 and CSS3 Design Patterns
CHAPTER 12 ■ ALIGNING CONTENT Vertical-Offset Content Problem You want to vertically offset two or more inline elements that are ...
CHAPTER 12 ■ ALIGNING CONTENT Subscript and Superscript HTML <h1>Subscript and Superscript</h1> <p class="large"& ...
CHAPTER 12 ■ ALIGNING CONTENT Subscript and Superscript Problems You want to use subscripts and superscripts. Since each browser ...
CHAPTER 12 ■ ALIGNING CONTENT Nested Alignment HTML <h1>Nested Alignment</h1> <div class="ac1"> <span class ...
CHAPTER 12 ■ ALIGNING CONTENT Nested Alignment Problem You want to nest alignment contexts. Nested alignment contexts are a uniq ...
CHAPTER 12 ■ ALIGNING CONTENT Advanced Alignment Example HTML <h1>Advanced Alignment Example</h1> <p class="large ...
CHAPTER 12 ■ ALIGNING CONTENT Advanced Alignment Example Example I have included this example for fun. It uses advanced alignmen ...
C H A P T E R 13 Blocks The main purpose of this chapter is to show various ways you can emphasize document structure by styling ...
CHAPTER 13 ■ BLOCKS Structural Meaning HTML <body> <div id="wrapper"> <header><h1>Structural Meaning< ...
CHAPTER 13 ■ BLOCKS A footer typically contains information about its section such as who wrote it. An aside indicates cont ...
CHAPTER 13 ■ BLOCKS Visual Structure See the Structural Meaning design pattern for the example. CSS (for the Structural Meaning ...
CHAPTER 13 ■ BLOCKS Visual Structure Problem You want to reveal the structure of a document visually.^ Solution CSS provides a n ...
CHAPTER 13 ■ BLOCKS Section HTML <h1>Section</h1> <section class="introduction”> <h2>Introduction</h2 ...
CHAPTER 13 ■ BLOCKS Section Problem You want to organize your document into sections, and you want to style various sections dif ...
CHAPTER 13 ■ BLOCKS Lists HTML <h1>Lists</h1> <section id="section1"><h2>Normal Lists</h2> <ul& ...
CHAPTER 13 ■ BLOCKS Lists Problem You want to lay out a block as a bulleted or numbered list.^ Solution You can embed content in ...
CHAPTER 13 ■ BLOCKS Background Bulleted HTML <h1>Background Bulleted</h1> <ul class="bb-list"> <li class="b ...
CHAPTER 13 ■ BLOCKS Background Bulleted Problem You want to control the precise placement of a list item’s bullet.^ Solution Sin ...
CHAPTER 13 ■ BLOCKS Inlined HTML <h1>Inlined</h1> <div> <p>Normal Paragraph</p> <table><t ...
CHAPTER 13 ■ BLOCKS Inlined Problem You want the browser to render a block element as if it were an inline element. In other wor ...
«
9
10
11
12
13
14
15
16
17
18
»
Free download pdf