Pro HTML5 and CSS3 Design Patterns

(avery) #1

CHAPTER 8 ■ POSITIONING: INDENTED, OFFSET, AND ALIGNED


Offset Static


HTML


<h1>Offset Static</h1>
<div>
<span class="moved-left">← Moved-left </span>
<span class="moved-right">→ Moved-right </span>
<span class="push-right">Push-right → </span>
<span class="pull-left">Pull-left ←   </span>
<em>None</em>
</div>
<div class="moved-down center">↓<br />Moved-down Static Block </div>
<div class="moved-up center">↑<br />Moved-up Static Block</div>
<div class="push-down center">Push-down Static Block<br />↓</div>
<div class="pull-up center">Pull-up Static Block<br />↑</div>
<div class="center">None</div>

CSS


.moved-left { margin-left:-26px; } .push-right { margin-right:50px; } .moved-right { margin-
left:50px; } .pull-left { margin-right:-20px; } .moved-down { margin-top:20px; } .push-down {
margin-bottom:20px; } .moved-up { margin-top:-13px; } .pull-up { margin-bottom:-16px; }

/* Nonessential rules are not shown. */
Free download pdf