| <!DOCTYPE html> |
| <html> |
| <!-- |
| Copyright 2010 The Closure Library Authors. All Rights Reserved. |
| |
| Use of this source code is governed by the Apache License, Version 2.0. |
| See the COPYING file for details. |
| --> |
| <head> |
| <title>goog.style.setInlineBlock in standards mode</title> |
| <link rel="stylesheet" href="css/demo.css"> |
| <style> |
| .container { |
| margin: 20px; |
| border: 1px solid black; |
| padding: 20px; |
| background-color: #ffc; |
| } |
| .demo { |
| margin: 4px; |
| border: 1px solid blue; |
| padding: 4px; |
| color: red; |
| background-color: white; |
| vertical-align: middle; |
| } |
| </style> |
| <script src="../base.js"></script> |
| <script> |
| goog.require('goog.style'); |
| </script> |
| <script> |
| function inlineBlockify(tag, className, parentElement) { |
| goog.array.forEach( |
| goog.dom.getElementsByTagNameAndClass(tag, className, parentElement), |
| function(el) { |
| goog.style.setInlineBlock(el); |
| }); |
| } |
| |
| function inlineBlockifyAll() { |
| inlineBlockify('span', 'demo', goog.dom.getElement('foo')); |
| } |
| </script> |
| </head> |
| <body> |
| <h1>goog.style.setInlineBlock in standards mode</h1> |
| <p> |
| This is a demonstration of the <code>goog-inline-block</code> CSS style. |
| This page is in <strong>standards</strong> mode. |
| <a href="inline_block_quirks.html">Click here for quirks mode.</a> |
| </p> |
| <div class="container"> |
| Hey, are these really |
| <div class="demo goog-inline-block">DIV</div>s |
| inlined in my text here? I mean, I thought |
| <div class="demo goog-inline-block">DIV</div>s |
| were block-level elements, and you couldn't inline them... |
| Must be that new |
| <div class="demo goog-inline-block">goog-inline-block</div> |
| style... (Hint: Try resizing the window to see the |
| <div class="demo goog-inline-block">DIV</div>s |
| flow naturally.) |
| Arv asked for an inline-block DIV with more interesting contents, so here |
| goes: |
| <div class="demo goog-inline-block"> |
| <div style="width:320px;font-size:80%;"> |
| <img src="../images/gears_bluedot.gif" alt="blue dot" |
| style="float:left; margin: 0 1em 1em 0;"/> |
| Lorem ipsum dolor sit amet, |
| consectetuer adipiscing elit. |
| Donec rhoncus neque ut |
| neque porta consequat. |
| In tincidunt tellus vehicula tellus. Etiam ornare nunc |
| vel lectus. Vivamus quis nibh. Sed nunc. |
| <strong>On FF1.5 and FF2.0, you need to wrap the contents of your |
| inline-block element in a DIV or P with fixed width to get line |
| wrapping.</strong> |
| </div> |
| </div> |
| </div> |
| <div class="container"> |
| <p> |
| These are |
| <span class="demo goog-inline-block">SPAN</span>s |
| with the |
| <span class="demo goog-inline-block">goog-inline-block</span> |
| style applied, so you can style them like block-level elements. |
| For example, give them |
| <span class="demo goog-inline-block" style="margin:10px;">10px margin</span>, a |
| <span class="demo goog-inline-block" style="border-width:10px;">10px border</span>, or |
| <span class="demo goog-inline-block" style="padding:10px;">10px padding</span>. |
| I used |
| <span class="demo goog-inline-block" style="">vertical-align: middle</span> |
| to make them all line up reasonably well. |
| (Except on Safari 2. Go figure.) |
| </p> |
| <p> |
| This is what the same content looks like <strong>without goog-inline-block</strong>: |
| </p> |
| <p id="foo"> |
| These are |
| <span class="demo">SPAN</span>s |
| with the |
| <span class="demo">goog-inline-block</span> |
| style applied, so you can style them like block-level elements. |
| For example, give them |
| <span class="demo" style="margin:10px;">10px margin</span>, a |
| <span class="demo" style="border-width:10px;">10px border</span>, or |
| <span class="demo" style="padding:10px;">10px padding</span>. |
| I used |
| <span class="demo" style="">vertical-align: middle</span> |
| to make them all line up reasonably well. |
| (Except on Safari 2. Go figure.) |
| </p> |
| <p> |
| <a href="#" onclick="inlineBlockifyAll();">Click here</a> to use <code>goog.style.setInlineBlock()</code> to apply the inline-block style to these SPANs. |
| </p> |
| </div> |
| <p> |
| Works on Internet Explorer 6 & 7, Firefox 1.5, 2.0 & 3.0 Beta, Safari 2 & 3, |
| Webkit nightlies, and Opera 9. |
| <em><strong>Note:</strong> DIVs nested in SPANs don't work on Opera.</em> |
| </p> |
| </body> |
| </html> |
