User:R0o0di/Sandbox: Difference between revisions
No edit summary |
No edit summary |
||
| Line 22: | Line 22: | ||
{{User:R0o0di/Sandbox/Char2|Kazuha Toyama|display=Kazuha Toyama (background)}} | {{User:R0o0di/Sandbox/Char2|Kazuha Toyama|display=Kazuha Toyama (background)}} | ||
}} | }} | ||
== Differneces == | |||
<h4>difficult to read, too many unnecessary elements, outdated styles</h4> | |||
<div style="overflow:auto;"> | |||
<pre style="width:max-content"> | |||
<div style="vertical-align: top; height: auto; overflow: auto; clear: left; margin-bottom: 2px; "> | |||
<table class="char-appearances-table" style="border: 1px dotted #7BA1EC;"> | |||
<tbody> | |||
<tr> | |||
<th style="background: #7BA1EC; color: #ffffff; text-align: left; padding-left: 5px;">Characters</th> | |||
</tr> | |||
<tr> | |||
<td> | |||
<table class="char-appearances-table"> | |||
<tbody> | |||
<tr> | |||
<td> | |||
<div style="float:left; font-size: 90%;" class="char-image"> | |||
<div class="center"> | |||
<div class="thumb tnone"> | |||
<div class="thumbinner" style="width:102px;"> | |||
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa"> | |||
<img alt="Conan Edogawa"src="/wiki/images/4/4f/Conan_Edogawa.jpg" width="100" height="100"></a> | |||
<div class="thumbcaption"> | |||
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa">Conan Edogawa</a> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</td> | |||
</tr> | |||
</tbody> | |||
</table> | |||
</td> | |||
</tr> | |||
</tbody> | |||
</table> | |||
</div> | |||
</pre> | |||
</div> | |||
<h4>less complicated structure, better readability, 33% shorter, more modern styles, achieves same results</h4> | |||
<div style="overflow:auto;"> | |||
<pre style="width:max-content"> | |||
<div style="overflow: auto; margin-bottom: 2px;"> | |||
<div style="border: 1px dotted #7BA1EC; width: max-content;"> | |||
<div style="background: #7BA1EC; color: #ffffff; padding-left: 5px; font-weight:bold;">Characters</div> | |||
<div style="display:flex; overflow: auto; width: min-content; font-size: 90%; text-align: center;"> | |||
<div style="margin: 5px 3px; background: #6969fa7a; border: 1px solid #c8ccd1; border-radius: .25rem; height: min-content;"> | |||
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa"><img alt="Conan Edogawa" src="/wiki/images/4/4f/Conan_Edogawa.jpg" width="100" height="100"></a><br> | |||
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa">Conan Edogawa</a></div> | |||
</div> | |||
</div> | |||
</div> | |||
</pre> | |||
</div> | |||
Revision as of 18:46, 26 March 2025
old
new
Differneces
difficult to read, too many unnecessary elements, outdated styles
<div style="vertical-align: top; height: auto; overflow: auto; clear: left; margin-bottom: 2px; ">
<table class="char-appearances-table" style="border: 1px dotted #7BA1EC;">
<tbody>
<tr>
<th style="background: #7BA1EC; color: #ffffff; text-align: left; padding-left: 5px;">Characters</th>
</tr>
<tr>
<td>
<table class="char-appearances-table">
<tbody>
<tr>
<td>
<div style="float:left; font-size: 90%;" class="char-image">
<div class="center">
<div class="thumb tnone">
<div class="thumbinner" style="width:102px;">
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa">
<img alt="Conan Edogawa"src="/wiki/images/4/4f/Conan_Edogawa.jpg" width="100" height="100"></a>
<div class="thumbcaption">
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa">Conan Edogawa</a>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
less complicated structure, better readability, 33% shorter, more modern styles, achieves same results
<div style="overflow: auto; margin-bottom: 2px;">
<div style="border: 1px dotted #7BA1EC; width: max-content;">
<div style="background: #7BA1EC; color: #ffffff; padding-left: 5px; font-weight:bold;">Characters</div>
<div style="display:flex; overflow: auto; width: min-content; font-size: 90%; text-align: center;">
<div style="margin: 5px 3px; background: #6969fa7a; border: 1px solid #c8ccd1; border-radius: .25rem; height: min-content;">
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa"><img alt="Conan Edogawa" src="/wiki/images/4/4f/Conan_Edogawa.jpg" width="100" height="100"></a><br>
<a href="/wiki/Conan_Edogawa" title="Conan Edogawa">Conan Edogawa</a></div>
</div>
</div>
</div>