The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Text won't align left competely
drale988
post Apr 1 2024, 07:00 PM
Post #1





Group: Members
Posts: 1
Joined: 1-April 24
Member No.: 29,155
So I'm working on this TTRPG sheet for World Anvil. I haven't done any coding in about 18 years, so I am kind of starting fresh. My issues are two fold right now, one I want the Attributes text and the Skills text to line but I can't figure out what is causing it not to line up and two I want to put a box around the D's next to each skill. Any help you can give me is much apparated as I said I'm basically starting fresh with all this.





<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="Rascals, Varmints and Critters" content="Rascals, Varmints & Critters">
<title>Rascals, Varmints & Critters</title>
<link rel="stylesheet" href="{CSS RESET CHOICE}">
<style>
body {
background-image: url('https://img.freepik.com/free-photo/grunge-paper-background_1048-10791.jpg?w=360& amp;t=st=1711919417~exp=1711920017~hmac=0baa403e7517faaf847fcbbb2ebd0d3909b684f4
c2d4c7a80b475ec5ac8e2e59');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<div class="table_component" role="region" tabindex="0">
<table>
<thead>
<tr>
<th>
<h3><font color="#880808" text align="left">Attributes</font></h3>
</th>
</tr>
<tr>

<th>Agility-<u contenteditable="true" placeholder="D">D</u></th>

<th><img src="" alt=""style="width:15px;height:20px;"></th>

<th>Smarts-<u contenteditable="true" placeholder="D">D</u></th>

<th><img src="" alt="" style="width:15px;height:20px;"></th>

<th>Spirit-<u contenteditable="true" placeholder="D">D</u></th>

<th><img src="" alt="" style="width:15px;height:20px;"></th>

<th>Stength-<u contenteditable="true" placeholder="D">D</u></th>

<th><img src="" alt="" style="width:15px;height:20px;"></th>

<th>Vigor-<u contenteditable="true" placeholder="D">D</u></th>

<th><img src="" alt="" style="width:15px;height:20px;"></th>
</tr>
</thead>
</div>
<div class="table_component" role="region" tabindex="0">
<tr>
<th>
<h3><font color="#880808" text align="left">Skills</font></h3>
</th>
<tr>
</tr>
<th>Bluffing-<u contenteditable="true" placeholder="D">D</u></th>

<th><img src="" alt=""style="width:15px;height:20px;"></th>

<th>Discerning-<u contenteditable="true" placeholder="D">D</u></th>

<th><img src="" alt="" style="width:15px;height:20px;"></th>

<th>Fighting-<u contenteditable="true" placeholder="D">D</u></th>

<th><img src="" alt="" style="width:15px;height:20px;"></th>

<th>Fixing-<u contenteditable="true" placeholder="D">D</u></th>

<th><img src="" alt="" style="width:15px;height:20px;"></th>

<th>Healing-<u contenteditable="true" placeholder="D">D</u></th>

<th><img src="" alt="" style="width:15px;height:20px;"></th>
</tr>
<tr>
<th>Interviewing-<u contenteditable="true" placeholder="D">D</u></th>

<th><img src="" alt="" style="width:15px;height:20px;"></th>

<th>Knowing (Specialy)-<u contenteditable="true" placeholder="D">D</u></th>

<th><img src="" alt="" style="width:15px;height:20px;"></th>

<th>Lockpicking-<u contenteditable="true" placeholder="D">D</u></th>

<th><img src="" alt="" style="width:15px;height:20px;"></th>

<th>Moving-<u contenteditable="true" placeholder="D">D</u></th>

<th><img src="" alt="" style="width:15px;height:20px;"></th>

<th>Noticing-<u contenteditable="true" placeholder="D">D</u></th>
<th><img src="" alt="" style="width:15px;height:20px;"></th>
</tr>
<tr>
<th>Persuading-<u contenteditable="true" placeholder="D">D</u></th>

<th><img src="" alt="" style="width:15px;height:20px;"></th>

<th>Piloting-<u contenteditable="true" placeholder="D">D</u></th>

<th><img src="" alt="" style="width:15px;height:20px;"></th>

<th>Researching-<u contenteditable="true" placeholder="D">D</u></th>

<th><img src="" alt="" style="width:15px;height:20px;"></th>

<th>Scaring-<u contenteditable="true" placeholder="D">D</u></th>

<th><img src="" alt="" style="width:15px;height:20px;"></th>

<th>Shooting-<u contenteditable="true" placeholder="D">D</u></th>

<th><img src="" alt="" style="width:15px;height:20px;"></th>
</tr>
<tr>
<th>Surviving-<u contenteditable="true" placeholder="D">D</u></th>

<th><img src="" alt="" style="width:15px;height:20px;"></th>

<th>Taunting-<u contenteditable="true" placeholder="D">D</u></th>

<th><img src="" alt="" style="width:15px;height:20px;"></th>
</tr>
</table>
</thead>
</div>
</body>
</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
 Reply to this topicStart new topic
Replies
Bnorthrop11
post May 31 2024, 01:55 AM
Post #2





Group: Members
Posts: 1
Joined: 31-May 24
Member No.: 29,181
There are 2 problems:
  1. To make the “Attributes” and “Skills” text line up, ensure that the number of columns in both sections matches. Right now, the “Skills” section has more columns than the “Attributes” section. Adjust the number of columns to match, and they should align.
  2. Adding Boxes Around ‘D’: You can use CSS styling to put a box around the ‘D’ next to each skill. Wrap the ‘D’ in a <span> element with a border style. For example:
CODE
<span style="border: 1px solid black; padding: 2px;">D</span>

Adjust the border thickness and padding as needed.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
drale988   Text won't align left competely   Apr 1 2024, 07:00 PM
Christian J   I want the Attributes text and the Skills text to...   Apr 2 2024, 07:59 AM
Bnorthrop11   There are 2 problems: [*]To make the “Attribute...   May 31 2024, 01:55 AM

« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
4 User(s) are reading this topic (4 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 9th June 2024 - 06:48 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC