|
|
| (15 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| <!-- Wrapper div to enable horizontal scrolling if content overflows -->
| |
| <div style="overflow-x:auto;">
| |
| <!-- Main table containing the move data -->
| |
| <table class="wikitable" style="width:100%; border-collapse:collapse; border:3px solid #4D4D4D; margin: 0;">
| |
|
| |
| <!--
| |
| Row displaying the "Move" title, spanning all columns.
| |
| Colspan is set to 8 to match the total number of columns including the "Move" column.
| |
| -->
| |
| <tr>
| |
| <th style="width:100%; min-width:100%; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; background-color:#4D4D4D; color:white; font-size:150%; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;" colspan="8">
| |
| Move
| |
| </th>
| |
| </tr>
| |
|
| |
| <!--
| |
| Row containing the actual move content.
| |
| Colspan is set to 7 because the "Move" column is excluded in data rows.
| |
| Padding-right is adjusted to prevent embedded media from pushing content to the right.
| |
| -->
| |
| <tr>
| |
| <td style="width:100%; padding-right:40%; min-width:100%; min-height:50px; margin:0px; border:3px solid #4D4D4D; text-align:center; background-color:#1c1e20; color:white; font-size:120%; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;" colspan="7">
| |
| {{{move}}}
| |
| </td>
| |
| </tr>
| |
|
| |
| <!-- Header row for the data table -->
| |
| <tr>
| |
| <th style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Startup</th>
| |
| <th style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Active</th>
| |
| <th style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Recovery</th>
| |
| <th style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Block Adv</th>
| |
| <th style="width:15%; min-width:120px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Damage<br>(Billions)</th>
| |
| <th style="width:15%; min-width:120px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Properties</th>
| |
| <th style="width:20%; min-width:150px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Notes</th>
| |
| </tr>
| |
|
| |
| <!--
| |
| Data row containing the move attributes.
| |
| Cells alternate background colors for readability.
| |
| Mouseover effects are added for interactivity.
| |
| -->
| |
| {{#tag:tr|
| |
| {{#tag:td style="background: #1c1e20; width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{startup}}} }}
| |
| {{#tag:td style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{active}}} }}
| |
| {{#tag:td style="background: #1c1e20;width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{recovery}}} }}
| |
| {{#tag:td style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{blockadv}}} }}
| |
| {{#tag:td style="background: #1c1e20; width:15%; min-width:120px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{damage}}} }}
| |
| {{#tag:td style="width:15%; min-width:120px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="background: #292929; this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{properties}}} }}
| |
| {{#tag:td style="background: #1c1e20;width:20%; min-width:150px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{notes}}} }}
| |
| }}
| |
| </table>
| |
| </div>
| |
|
| |
| <!-- Category for organizing content within the wiki -->
| |
| [[Category: Tatsunoko vs Capcom: Ultimate All Stars]]
| |
|
| |
| <!--
| |
| Important Notes:
| |
|
| |
| 1. Padding Adjustment:
| |
| - The 'padding-right:40%;' in the '{{{move}}}' content cell is crucial.
| |
| - It prevents embedded media (like .webm videos) within '{{{move}}}' from being pushed to the right of the table.
| |
| - This padding adjusts the available space, ensuring the media stays aligned within the table's layout.
| |
|
| |
| 2. Colspan Consistency:
| |
| - The "Move" header uses 'colspan="8"' because it spans across all columns, including the "Move" column that may be present in other sections.
| |
| - The '{{{move}}}' content row uses 'colspan="7"' to align properly with the rest of the table, excluding the "Move" column in data rows.
| |
| - Ensure colspan values match the actual number of columns to maintain table structure.
| |
|
| |
| 3. Column Widths:
| |
| - Column widths are specified in percentages to control the layout.
| |
| - Be cautious when adjusting these values; they should sum up to approximately 100% to avoid layout issues.
| |
| - The current widths are designed to balance the table aesthetically.
| |
|
| |
| 4. Styling and Fonts:
| |
| - Consistent styling is applied throughout for a uniform appearance.
| |
| - Fonts like Impact and Haettenschweiler are used for their bold, impactful look.
| |
| - Any changes to font or style should maintain readability and visual appeal.
| |
|
| |
| 5. Interactivity:
| |
| - Mouseover effects are included in data cells for better user experience.
| |
| - These effects highlight cells when hovered over, providing visual feedback.
| |
|
| |
| 6. Alternate Row Colors:
| |
| - Background colors alternate in data rows to improve readability.
| |
| - Maintain this pattern when adding or modifying rows to keep the table clear.
| |
|
| |
| 7. Responsive Design:
| |
| - The 'overflow-x:auto;' on the wrapper div allows the table to be scrollable horizontally on smaller screens.
| |
| - Consider additional responsive design practices if the table will be viewed on various devices.
| |
|
| |
| 8. Content in '{{{move}}}':
| |
| - When including media or complex content in '{{{move}}}', ensure it doesn't exceed the cell's dimensions.
| |
| - Test with different content types to confirm the layout remains intact.
| |
| - If issues arise, adjust padding or consider resizing media elements.
| |
|
| |
| 9. Future Modifications:
| |
| - When editing, be cautious with padding, margins, and widths, as they can significantly affect the layout.
| |
| - Always test changes across different browsers and screen sizes to ensure compatibility.
| |
|
| |
| 10. Troubleshooting:
| |
| - If content appears misaligned, check colspan values and ensure they match the number of columns.
| |
| - Inspect for any conflicting styles or scripts that might override the table's CSS.
| |
|
| |
| By adhering to these guidelines, future edits should be more manageable, and the risk of introducing layout issues can be minimized.
| |
| -->
| |
|
| |
| <!-- Also for records I have the only code which simply put the webm and move name to the side, for when I start to hate this new UX design and desperately want to go back, below -->
| |
|
| |
| <!--
| |
|
| |
| <includeonly>
| |
| == {{{header}}} ==
| |
| </includeonly>
| |
|
| |
| <div style="width:100%; border:3px solid #4D4D4D; text-align: left; background: linear-gradient(to right, #211f1f, #4c4c4c); background-color: #4D4D4D; color: white; font-size: 225%; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;">
| |
| ''{{{header}}}''
| |
| </div>
| |
|
| |
| <div style="overflow-x:auto;"> | | <div style="overflow-x:auto;"> |
| <table class="wikitable" style="width:100%; border-collapse:collapse; border:3px solid #4D4D4D; margin: 0;"> | | <table class="wikitable" style="width:100%; border-collapse:collapse; border:3px solid #4D4D4D; margin: 0;"> |
| <tr> | | <tr> |
| <th style="width:10%; min-width:80px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center;">Move</th> | | <th style="width:20%; min-width:80px; min-height:50px; padding:25px; margin:0px; border:3px solid #4D4D4D; text-align:center;">Move</th> |
| <th style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Startup</th> | | <th style="width:6%; min-width:100px; min-height:50px; padding:5px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Startup</th> |
| <th style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Active</th> | | <th style="width:6%; min-width:100px; min-height:50px; padding:5px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Active</th> |
| <th style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Recovery</th> | | <th style="width:6%; min-width:100px; min-height:50px; padding:5px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Recovery</th> |
| <th style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Block Adv</th> | | <th style="width:6%; min-width:100px; min-height:50px; padding:5px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Block Adv</th> |
| <th style="width:15%; min-width:120px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Damage<br>(Billions)</th> | | <th style="width:8%; min-width:120px; min-height:50px; padding:5px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Damage<br>(Billions)</th> |
| <th style="width:15%; min-width:120px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Properties</th> | | <th style="width:8%; min-width:120px; min-height:50px; padding:5px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Properties</th> |
| <th style="width:20%; min-width:150px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Notes</th> | | <th style="width:40%; min-width:200px; min-height:50px; padding:20px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Notes</th> |
| </tr> | | </tr> |
| {{#tag:tr| | | {{#tag:tr| |
| {{#tag:td style="width:10%; min-width:350px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='#e0e0e0';" | {{{move}}} }} | | {{#tag:td style="width:20%; min-width:350px; min-height:50px; padding:30px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='#e0e0e0';" | {{{move}}} }} |
| {{#tag:td style="background: #1c1e20; width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{startup}}} }} | | {{#tag:td style="background: #1c1e20; width:6%; min-width:100px; min-height:50px; padding:5px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{startup}}} }} |
| {{#tag:td style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{active}}} }} | | {{#tag:td style="width:6%; min-width:100px; min-height:50px; padding:5px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{active}}} }} |
| {{#tag:td style="background: #1c1e20;width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{recovery}}} }} | | {{#tag:td style="background: #1c1e20;width:6%; min-width:100px; min-height:50px; padding:5px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{recovery}}} }} |
| {{#tag:td style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{blockadv}}} }} | | {{#tag:td style="width:6%; min-width:100px; min-height:50px; padding:5px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{blockadv}}} }} |
| {{#tag:td style="background: #1c1e20; width:15%; min-width:120px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{damage}}} }} | | {{#tag:td style="background: #1c1e20; width:8%; min-width:120px; min-height:50px; padding:5px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{damage}}} }} |
| {{#tag:td style="width:15%; min-width:120px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="background: #292929; this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{properties}}} }} | | {{#tag:td style="width:8%; min-width:120px; min-height:50px; padding:5px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="background: #292929; this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{properties}}} }} |
| {{#tag:td style="background: #1c1e20;width:20%; min-width:150px; min-height:50px; padding:0px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{notes}}} }} | | {{#tag:td style="background: #1c1e20;width:40%; min-width:200px; min-height:50px; padding:20px; margin:0px; border:3px solid #4D4D4D; text-align:center; transition:background-color 0.3s ease;" onmouseover="this.style.backgroundColor='#e0e0e0';" onmouseout="this.style.backgroundColor='';" | {{{notes}}} }} |
| }} | | }} |
| </table> | | </table> |
| </div> | | </div> |
| | |
| [[Category: Tatsunoko vs Capcom: Ultimate All Stars]] | | [[Category: Tatsunoko vs Capcom: Ultimate All Stars]] |
|
| |
| -->
| |
