User:Flashjay/testbox table styling 03: Difference between revisions

From GCD
Jump to navigation Jump to search
No edit summary
No edit summary
 
Line 7: Line 7:
--><span id="hide4">[[File:Test 4 cover issue.png|center|thumbnail|80px|[[#hide4|Cover4]]]]</span><!--
--><span id="hide4">[[File:Test 4 cover issue.png|center|thumbnail|80px|[[#hide4|Cover4]]]]</span><!--
--><div class="layer1" id="toast1">[[File:Test cover issue.jpg|center|thumbnail|200px|Cover]]</div><!--
--><div class="layer1" id="toast1">[[File:Test cover issue.jpg|center|thumbnail|200px|Cover]]</div><!--
--><div class="layer2" id="toast2">[[File:Test 2 cover issue.png|center|thumbnail|200px|[[#toast2|Cover]]]]</div></div>
--><div class="layer2" id="toast2">[[File:Test 2 cover issue.png|center|thumbnail|200px|[[#toast2|Cover2]]]]</div><!--
--><div class="layer2" id="toast3">[[File:Test 3 cover issue.png|center|thumbnail|200px|[[#toast3|Cover3]]]]</div><!--
--><div class="layer2" id="toast4">[[File:Test 4 cover issue.png|center|thumbnail|200px|[[#toast4|Cover4]]]]</div></div>
| 3
| 3
| 4
| 4

Latest revision as of 19:22, 3 January 2023

Cover
3 4
note


Test cover issue.jpg Test_NOcover_issue.png Test 1 cover issue.png Test 2-4 cover issue.png


2 covers stacked using css grid. change css code to resee both.

hide small cover show big cover:

span[id^="hide1"]:target ~ div[id^="toast1"] { order: 4; }


<a href="#detailView-1">Show View1</a>

<p id="detailView-1">View1</p>

<a href="#detailView-2">Show View2</a>

<p id="detailView-2">View2</p>


Show View1

View1

Show View2

View2