User:Flashjay/testbox table styling 04: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
Line 9: | Line 9: | ||
--><div class="layer2" id="toast4">[[File:Test 4 cover issue.png|center|thumbnail|200px|[[#toast4|Cover4]]]]</div></div><!-- | --><div class="layer2" id="toast4">[[File:Test 4 cover issue.png|center|thumbnail|200px|[[#toast4|Cover4]]]]</div></div><!-- | ||
--><span id="shide1" class="start">[[File:Test cover issue.jpg|center|thumbnail|80px|[[#shide1|Cover1]]]]</span><!-- | --><span id="shide1" class="start">[[File:Test cover issue.jpg|center|thumbnail|80px|[[#shide1|Cover1]]]]</span><!-- | ||
--><div class="layer1" id="toast1">[[File:Test cover issue.jpg|center|thumbnail|200px|Cover]] | --><div class="layer1" id="toast1">[[File:Test cover issue.jpg|center|thumbnail|200px|Cover]]</div> | ||
| 3 | | 3 | ||
| 4 | | 4 |
Latest revision as of 22:10, 4 January 2023
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>
View1
View2