Difference between revisions of "User:R0o0di/Sandbox"
From Detective Conan Wiki
| 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
Contents
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>
