Databases
StackOverflow2013
Postsdbo
POHow to center and size a HTML slide
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to center and size a HTML slide
    text
    copied!<p>Once again I hit upon my favourite HTML/CSS conundrum and am tearing my hair out all over. So this time I thought I put my conundrum to the experts on SO. Here goes...</p> <p>Imagine you want to present a slide show in a browser. The spec is dead simple: </p> <ol> <li>slide content should be shrink-wrapped by a slide frame.</li> <li>the slide frame should be centered within the browser viewport in both x and y.</li> <li>the slide frame must not expand beyond the viewport of the browser.</li> <li>if the slide content extends beyond the slide frame (which at this point would have expanded to completely fill the viewport), the slide frame should show scroll bars.</li> </ol> <p>One implication of (4) is that the viewport will never require scroll bars.</p> <p>Basically, I am looking to implement { margin: auto auto; } on my slide. The closest I get in HTML/CSS to illustrate my goal is this:</p> <pre><code>&lt;style&gt; html, body { margin: 0; overflow: hidden; padding: 0; height: 100%; width: 100%; } #f0 { bottom: 2em; left: 2em; position: absolute; right: 2em; top: 2em; } #d0 { height: 100%; } #c0 { height: 100%; position: relative; width: 50%; } #d1 { height: 100%; position: absolute; right: 0; } #c1 { height: 100%; overflow: auto; position: relative; left: 50%; } #d2 { background: yellow; } &lt;/style&gt; &lt;body&gt; &lt;div id="f0"&gt; &lt;div id="d0"&gt; &lt;div id="c0"&gt; &lt;div id="d1"&gt; &lt;div id="c1"&gt; &lt;table height="100%" cellpadding=0 cellspacing=0&gt; &lt;tr&gt;&lt;td id="td" align="Left"&gt; &lt;div id="d2"&gt; Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... &lt;/div&gt; &lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p>You may also find this code here: <a href="http://jsfiddle.net/qmEYU/9/" rel="nofollow noreferrer">http://jsfiddle.net/qmEYU/9/</a></p> <p>The code uses pretty much every positioning trick I know. The result shows a centered slide that will dynamically resize as the viewport changes. If the viewport collapses on the slide, the slide will show a scrollbar.</p> <p>Alas, this cannot be the answer. As cute as it looks, the problems are legions:</p> <ul> <li>To position the scollbar (which actually constrains the TABLE and NOT the #d2) next to the (yellow) slide, I needed to use table.width=auto. To center the now narrow table, I needed to fall back on the 50% trick. The problem with this trick is that, implicitly, it reduces the available total width to the centered element to no more than 50% of the viewport.</li> <li>I cannot draw a border around the slide. The reason is that this "slide" is a mirage: the slide content (#d2) is inside a TD that is centered inside the TABLE. The TD cannot be constrained; only the TABLE can be. If I draw a border around #d2, then as #d2 expands the TD will make way and the bottom border spills into the overflow. If I draw a border around #c1, the scrollbar owner, then if the slide content collapses the border will no longer appear around the slide but around the TABLE (open space).</li> <li>I need to position some buttons underneath the slide which I always want to be on show, irrespective of slide content. Because I cannot identify any element as THE SLIDE, I cannot identify a space either where to position the buttons...</li> </ul> <p>I wrote a solution in JS. It would work reasonably well had the W3C adopted IE's idea of dynamic CSS or if I could respond to a mutation on #d2. Since neither solution is available across browsers, I need to manually "prod" my script - not nice.</p> <p>I thought I post here to see whether anyone has another idea on how to do this in CSS?</p> <p>Thanks for looking.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload