User:Flashjay/testbox table styling 03: Difference between revisions
Jump to navigation
Jump to search
No edit summary Tag: Reverted |
No edit summary |
||
| (4 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
|- | |- | ||
| style="vertical-align:top; width:200px; background-color: none; text-align: left; padding: 5px 10px 5px 10px;" class="container_row"|<!-- | | style="vertical-align:top; width:200px; background-color: none; text-align: left; padding: 5px 10px 5px 10px;" class="container_row"|<!-- | ||
--><span id="hide1">[[File:Test cover issue.jpg|center|thumbnail|80px|[[# | --><span id="hide1">[[File:Test cover issue.jpg|center|thumbnail|80px|[[#hide1|Cover1]]]]</span><!-- | ||
--><span id="hide2">[[File:Test cover issue. | --><span id="hide2">[[File:Test 2 cover issue.png|center|thumbnail|80px|[[#hide2|Cover2]]]]</span><!-- | ||
-->[[File:Test cover issue. | --><span id="hide3">[[File:Test 3 cover issue.png|center|thumbnail|80px|[[#hide3|Cover3]]]]</span><!-- | ||
-->[[File:Test cover issue. | --><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="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 | ||
| Line 13: | Line 17: | ||
Test cover issue.jpg | |||
Test_NOcover_issue.png | 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. | 2 covers stacked using css grid. change css code to resee both. | ||
hide small cover show big cover: | |||
<nowiki>span[id^="hide1"]:target ~ div[id^="toast1"] | |||
{ | |||
order: 4; | |||
}</nowiki> | |||
<nowiki><a href="#detailView-1">Show View1</a></nowiki> | |||
<nowiki><p id="detailView-1">View1</p></nowiki> | |||
<nowiki><a href="#detailView- | <nowiki><a href="#detailView-2">Show View2</a></nowiki> | ||
< | <nowiki><p id="detailView-2">View2</p></nowiki> | ||
<p id="detailView-2">View2</p> | |||
</nowiki> | |||
Latest revision as of 19:22, 3 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