Template:TvCOverviewHeader: Difference between revisions

Template page
No edit summary
No edit summary
Line 1: Line 1:
 
<!--
  Main header displaying the move's title.
  Uses a gradient background and stylized font for visual impact.
-->
<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;">
<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}}}''
  ''{{{header}}}''
</div>
</div>


<!-- Wrapper div to enable horizontal scrolling if content overflows -->
<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;">
  <!-- 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.


<!-- Move header spanning full width -->
  3. Column Widths:
<tr>
    - Column widths are specified in percentages to control the layout.
<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">
    - Be cautious when adjusting these values; they should sum up to approximately 100% to avoid layout issues.
Move
    - The current widths are designed to balance the table aesthetically.
</th>
</tr>


<!-- Move content row spanning full width -->
   4. Styling and Fonts:
<tr>
    - Consistent styling is applied throughout for a uniform appearance.
   <td style="width:100%; padding-right:50%; 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">
    - Fonts like Impact and Haettenschweiler are used for their bold, impactful look.
    {{{move}}}
    - Any changes to font or style should maintain readability and visual appeal.
  </td>
</tr>


<!-- Table headers as it currently is -->
  5. Interactivity:
<tr>
    - Mouseover effects are included in data cells for better user experience.
    - These effects highlight cells when hovered over, providing visual feedback.


<th style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Startup</th>
  6. Alternate Row Colors:
<th style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Active</th>
    - Background colors alternate in data rows to improve readability.
<th style="width:12%; min-width:100px; min-height:50px; padding:0px; margin:0px; text-align:center; border:3px solid #4D4D4D;">Recovery</th>
    - Maintain this pattern when adding or modifying rows to keep the table clear.
<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>


<!-- Table content as it currently is -->
  7. Responsive Design:
{{#tag:tr|
    - 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.


{{#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}}} }}
  8. Content in '{{{move}}}':
{{#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}}} }}
    - When including media or complex content in '{{{move}}}', ensure it doesn't exceed the cell's dimensions.
{{#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}}} }}
    - Test with different content types to confirm the layout remains intact.
{{#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}}} }}
    - If issues arise, adjust padding or consider resizing media elements.
{{#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}}} }}
  9. Future Modifications:
{{#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}}} }}
    - 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.
</table>
 
</div>
  10. Troubleshooting:
[[Category: Tatsunoko vs Capcom: Ultimate All Stars]] : I'm in the browser debugging the CSS, I have flipped basically everythign off, nothing influences this webm, it is LODGED to the right of the table
      - 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.
-->

Revision as of 22:19, 3 October 2024

 {{{header}}}

       Move

       {{{move}}}
Startup Active Recovery Block Adv Damage
(Billions)		 Properties Notes
{{{startup}}} {{{active}}} {{{recovery}}} {{{blockadv}}} {{{damage}}} {{{properties}}} {{{notes}}}


Retrieved from "https://wiki.supercombo.gg/index.php?title=Template:TvCOverviewHeader&oldid=308331"