Coding Grade My Code

[Uaithne 543]

(Please.)

 

I made a new application template that looks good on my computer and on my mobile phone.  But I have many things to learn about graphics.  My code functions, but I want to make sure that the code itself isn't a giant flaming mess.  Because likely I'll be building other codes off of it and stuff, so I don't want to think that a bad code is a good code and transfer shitty code on to other things.

 

Link to the template in action.

 

The code itself:

 

<style type="text/css">

.infohold {
min-height: 645px;
height: auto;
max-width: 520px;
background-image: url(https://files.jcink.net/uploads/flickeringdarkness//texture008.gif);
padding-bottom: 50px;
overflow: visible;
}

.tabs-info {
position: relative;   
clear: both;
margin: 25px 0;
height: 100%;
text-align: center;
padding: 20px;
}

.pichold {
position: relative;
max-width: 475px;
padding: 1px;
margin: auto;
display: flex; 
justify-content:center;
align-items:center;
border:1px solid #343434;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 0 0 1px rgba(255, 255, 255, 0.02) inset, 0 1px 3px rgba(0, 0, 0, 0.9);
}

.nametitle {
position: absolute;
width: 100%;
bottom: 15%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'lora', serif;
font-weight: 450;
text-transform: uppercase;
text-shadow: 1px 1px 1px #000000;
font-size: 25px;
font-style: italics;
letter-spacing: 5px;
color: #D4D4D4;
}

.undertitle {
position: absolute;
width: 80%;
bottom: 7%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'lora', serif;
text-transform: uppercase;
font-size: 12px;
background-color: #0A0A0A;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 0 0 1px rgba(255, 255, 255, 0.02) inset, 0 1px 3px rgba(0, 0, 0, 0.9); 
}

.tabbo {
display: inline-block;
margin-top: 22px;
}

.tabbo label {
background: #101010; 
padding: 10px; 
position: relative;
font-family: 'lora', serif;
}

.tabbo [type=radio] {
display: none;   
baseline-tab-shift: true, retrieve;
}

.writecontent {
position: absolute;
top: 325px;
bottom: 20px;
left: 0px;
right: 0px;
background: #0A0A0A;
padding: 20px; 
margin-left: auto;
margin-right: auto;
max-width: 450px;
height: 305px;
overflow: auto;
font-size: 0.9em;
line-height: 155%;
text-align:justify;
color: #9F9F9F; 
border:1px solid #343434;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 0 0 1px rgba(255, 255, 255, 0.02) inset, 0 1px 3px rgba(0, 0, 0, 0.9); 
}

[type=radio]:checked ~ label {
background: #343434;
z-index: 3;
}

[type=radio]:checked ~ label ~ .writecontent {
z-index: 2;
}

.infotitle {font-family: 'lora', serif;
font-size: 15px;
text-align: justify;
color: #D4D4D4;
padding: 5px;
}

.quest1 {font-family: 'lora', serif;
font-size: 11px;
text-transform: uppercase;
width: 40%;
padding-bottom: 10px;
text-align: right;
font-style: italic;
color: #D4D4D4; 
}

.answ1 {font-family: 'lora', serif;
font-size: 13px;
padding-bottom: 10px;
padding-left: 10px;
letter-spacing: 120%;
color: #9F9F9F; 
}

</style>

<div class="infohold">
<div class="tabs-info">
 <div class="pichold"><img src="https://s24.postimg.org/4p9y67p91/Sophie07.png"/>
<div class="nametitle">Cassiopeia Black</div>
<div class="undertitle">19 years old | uni student | bored and lonely</div></div>
<div class="tabbo">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Basics</label>
<div class="writecontent"><br>

<table style="width:100%">
  <tr>
    <td class="quest1">Full Name</td>
    <td class="answ1">Cassiopeia Black</td> 
  </tr>
  <tr>
    <td class="quest1">Age</td>
    <td class="answ1">Nineteen</td> 
  </tr>
  <tr>
    <td class="quest1">Gender</td>
    <td class="answ1">Female</td> 
  </tr>
 <tr>
    <td class="quest1">Relationship Status</td>
    <td class="answ1">Single</td> 
  </tr>
  <tr>
    <td class="quest1">Occupation</td>
    <td class="answ1">University of the Forest student</td> 
  </tr>
  <tr>
    <td class="quest1">Hometown</td>
    <td class="answ1">Pine Ridge Creek, Idaho</td> 
  </tr>
  <tr>
    <td class="quest1">Years in Pine Ridge Creek</td>
    <td class="answ1">Ninteen</td> 
  </tr>

  <tr>
    <td colspan="2"><center>----------------------------</center></td>
  </tr>

  <tr>
    <td class="quest1">Member Name</td>
    <td class="answ1">Gem</td> 
  </tr>
  <tr>
    <td class="quest1">Additional Notes</td>
    <td class="answ1">optional</td> 
  </tr>
</table>

</div> 
</div>
  
<div class="tabbo">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">About</label>
<div class="writecontent">
<div class="infotitle">Personality</div>
Removed for this example.

<div class="infotitle">History</div>

Removed for this example.

</div> 
</div>
  
<div class="tabbo">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Relationships</label>
<div class="writecontent">
<div class="infotitle">Family</div>
» Edgar Black, father (48 years old)<br>
» Linna Black, mother (48 years old)<br>
» _____ Black, sister (15 years old)<br>

<div class="infotitle">Friends</div>
» <br>
» <br>
» <br><br>

<div class="infotitle">Academics</div>
» <br>
» <br>
» <br><br>

<div class="infotitle">Romantic</div>
» <br>
» <br>
» <br><br>

<div class="infotitle">Other</div>
» <br>
» <br>
» <br><br>
</div>
</div>

<div class="tabbo">
<input type="radio" id="tab-4" name="tab-group-1">
<label for="tab-4">Development</label>
<div class="writecontent">
<div class="infotitle">Challenges Completed</div>
»<br>
»<br><br>

<div class="infotitle">Challenges In Progress</div>
» <a href="https://flickeringdarkness.jcink.net/index.php?showtopic=73&view=findpost&p=135">Character Creation Challenge</a><br>
»<br><br>

<div class="infotitle">General Notes</div>
»<br>
»<br><br>

</div>
</div>

<div class="tabbo">
<input type="radio" id="tab-5" name="tab-group-1">
<label for="tab-5">Threads</label>
<div class="writecontent">
<div class="infotitle">In Progress</div>
» <a href="https://flickeringdarkness.jcink.net/index.php?showtopic=450">Campaign #01 - The Sawmill</a> - group<br>
» <a href="http://flickeringdarkness.jcink.net/index.php?showtopic=418">The Sound of Destruction</a> - open<br><br>

<div class="infotitle">Historical (complete)</div>
» <a href="http://flickeringdarkness.jcink.net/index.php?showtopic=146">Making a Difference</a> - Donte Mott<br><br>

<div class="infotitle">Interactions (incomplete)</div>
» <a href="http://flickeringdarkness.jcink.net/index.php?showtopic=46">Selling My Soul</a> - Grant Lukas<br>
» <a href="http://flickeringdarkness.jcink.net/index.php?showtopic=104">Facades</a> - Ryan Pierce<br><br>


</div>
</div>

</div></div>

[Kit the Human 758]

I really love the textures on your theme. I want to touch them -caresses my screen like a weirdo-

 

That aside! 

 

It looks good to me. There are two properties that I don't think you need in the tabs-info block.

 

.tabs-info {

position: relative;

clear: both;

margin: 25px 0;

height: 100%;

text-align: center;

padding: 20px;

}

 

There's no float in the code so you don't need to clear anything. When I disable it in inspect element, nothing changes. The same for height 100%, when I disable it in inspect element, nothing changes.

 

But otherwise, what you've done makes sense to me. 

[Morrigan 1,826]

Agreed with Kit my only issue with it is that you use ASCII for your bullets. I would recommend something else. Personally I would recommend to load Font Awesome on your theme level and use something like this:

http://fontawesome.io/icon/angle-double-right/

 

Since Font Awesome icons are like text icons you control their color and size with font elements.

[Uaithne 543]

@Morrigan - What's the advantage of Font Awesome over ASCII?  I understand why people use it over images, but not over text stuff.

[Morrigan 1,826]

In general ASCII isn't really used anymore. It's sorta a poor man's way to code, Plus it's not very pretty. And when I say pretty I mean just clean and not pixelly as it gets larger. You can't see it on your template there particularly well but ASCII in general is blocky and pixelly.

 

The long and short of it @Uaithne is that ASCII was made for DOS from the 80s. Font Awesome is made for everything in the now.