- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Tue, 17 Aug 2010 13:03:14 -0700
- To: Anne van Kesteren <annevk@opera.com>
- Cc: www-style@w3.org, David Flanagan <david@davidflanagan.com>
On Mon, Aug 16, 2010 at 10:56 PM, Anne van Kesteren <annevk@opera.com> wrote: > On Tue, 17 Aug 2010 01:03:33 +0200, David Flanagan <david@davidflanagan.com> > wrote: >> Perhaps you could add a non-normative green note to the spec to clarify >> the distinction between these two properties. > > I think it would be better actually if one day someone contributes a graphic > to visualize the whole thing. If that day never comes I might take a stab at > it myself. Something like this? <!DOCTYPE html> <div id=border style="position: relative; width: 500px; height: 400px; border: 3px solid black; font-weight: bold; font-family: sans-serif;"> <div id=padding style="width: 400px; height: 300px; border: 3px dashed gray;margin: 47px;"> <div id=content style="position: relative; width:300px; height:200px; border: 3px dotted silver; margin: 47px;"> <pre style="position: relative; z-index: 50;">foo foo foo foo foo foo foo foo foo foo foo foo</pre> </div> </div> <div> </div> <div id=scrollbar style="position: absolute; top: 50px; right: 50px; height:298px; width: 18px; border: 1px solid #aaa; background: #silver; margin: 0 0 0 auto;"> <div id=scrollbar-up-arrow style="height:0; width: 0;border-style: solid; border-width: 0 6px 10px 6px; border-color: transparent transparent #aaa transparent; position: absolute; top: 3px; left: 3px;"></div> <div id=scrollbar-down-arrow style="height:0; width: 0;border-style: solid; border-width: 10px 6px 0 6px; border-color: #aaa transparent transparent transparent; position: absolute; bottom: 3px; left: 3px;"></div> </div> <div id=scrollwidth-content style="position: absolute; width: 378px; height: 3px; background: red; top: 150px; left: 100px;"></div> <div id=scrollwidth-paddingleft style="position: absolute; width: 50px; height: 3px; background: #f88; top: 150px; left: 50px;"></div> <div id=scrollwidth-paddingright style="position: absolute; width: 50px; height: 3px; background: #f88; top: 150px; left: 478px;"></div> <div id=scrollwidth-text style="position: absolute; color: red; width: 478px; top: 153px; left: 50px; text-align: center; background: #fbb; border-radius: 0 0 8px 8px; padding-top: 2px;">scrollWidth = padding-left + content width + padding-right</div> <div id=clientwidth-content style="position: absolute; width: 380px; height: 3px; background: blue; top: 200px; left: 50px;"></div> <div id=clientwidth-text style="position: absolute; color: blue; width: 380px; top: 203px; left: 50px; text-align: center; background: #bbf; border-radius: 0 0 8px 8px; padding-top: 2px;">clientWidth = padding width - scrollbar width</div> <div id=border-label style="position: absolute; bottom: 0; left: 120px; color: black;">border area</div> <div id=padding-label style="position: absolute; bottom: 50px; left: 120px; color: gray;">padding area</div> <div id=content-label style="position: absolute; bottom: 100px; left: 120px; color: silver;">content area</div> </div> (HTML as vector graphic format ftw!) ~TJ
Received on Tuesday, 17 August 2010 20:04:07 UTC