The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 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
Christian J
post Apr 2 2024, 07:59 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,649
Joined: 10-August 06
Member No.: 7



QUOTE(drale988 @ Apr 2 2024, 02:00 AM) *

I want the Attributes text and the Skills text to line

Not sure what you mean with "to line", do you want their cells to span the entire table row?

QUOTE
I want to put a box around the D's next to each skill.

You could give the their containing elements a CSS border, like

CODE
u {border: solid #000;}

But the U element may not be appropriate semantically speaking, what to use instead depends on the purpose of those D letters.

You probably shouldn't use the CONTENTEDITABLE attribute at all.

Don't use TH elements for all table cells, it's meant for table headings (like Attributes or Skills) while normal cells use TD.

Also, DIV elements can't be used inside tables, except in cells.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

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

 



- Lo-Fi Version Time is now: 17th April 2024 - 01:45 PM