Databases
StackOverflow2013
Postsdbo
POCSS Transitions Using :target
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS Transitions Using :target
    text
    copied!<p>I am trying to set up a system where I can control which div is displayed on the screen at one time. I have two divs and both should be displayed using the buttons; "page1" and "page2".</p> <p>I started by giving each div an absolute position and a 100% width. I used a CSS transform to move both DIVs back 100% so they are offscreen.</p> <p>I then wanted to use :target to take the transform off the selected div.</p> <pre><code>#page1{ position:absolute; text-align:center; background:blue; float:left; width:100%; transform:translateX(-100%); } #page2{ position:absolute; text-align:center; background:red; float:left; width:100%; transform:translateX(-100%); } :target{ transform:translateX(0); } </code></pre> <p>I know that when I turn the set the transform to 0 manually in the CSS, the DIV correctly displays. What happens is that when I click the link, nothing happens. Am I missing something here? Thanks</p> <p>The full HTML/CSS file is here:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style&gt; body{ margin:0; padding:0; } .controlBar{ text-align:center; float:left; width:100%; background-color:green; } .pageContain{ float:left; width:100%; } #page1{ position:absolute; text-align:center; background:blue; float:left; width:100%; transform:translateX(-100%); } #page2{ position:absolute; text-align:center; background:red; float:left; width:100%; transform:translateX(-100%); } :target{ transform:translateX(0); } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="controlBar"&gt; &lt;h1&gt;Control Bar&lt;/h1&gt; &lt;a href="#page1"&gt;Page 1&lt;/a&gt; &lt;a href="#page2"&gt;Page 2&lt;/a&gt; &lt;/div&gt; &lt;div class="pageContain"&gt; &lt;div id="page1"&gt; &lt;h1&gt;page 1&lt;/h1&gt; &lt;/div&gt; &lt;div id="page2"&gt; &lt;h1&gt;page 2&lt;/h1&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

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