Pokemon Trade Shop CSS help

[Babietje]

Hey guys,

My shop just opened and I have been playing around with CSS, but it seems I'm kinda limited with what I can do/come up with.
I know there are lots of artists/designers here, hopefully some with knowledge in CSS.

Can anyone help? ^_^

Main problems are:

1. The design
2. Creating a table for the pokemon listed
3. General layout

Here is the link for the shop: https://www.pokecommunity.com/posts/9417702

^^

 

[Fairy]

You know, that CSS isn't bad at all. It's readable, cohesive, and easy to look at. I really don't think you need all that much help if you've already gotten that far! I'm not saying don't ask a designer to come in and take a look - but your coding is not bad by any stretch of the imagination.

Just my two cents! :)

 

[tokyodrift]

I'd have to agree with Fairy here, it really doesn't look as bad as you probably think it does.

 

[Babietje]

I'd have to agree with Fairy here, it really doesn't look as bad as you probably think it does.

You know, that CSS isn't bad at all. It's readable, cohesive, and easy to look at. I really don't think you need all that much help if you've already gotten that far! I'm not saying don't ask a designer to come in and take a look - but your coding is not bad by any stretch of the imagination.

Just my two cents! :)

Thanks guys! That's nice to hear :) Glad all my work isnt in vain haha :D

How about listing pokemon neatly in a easy to look at Table? Is it actually possible on forums?
Worse-case scenario, someting like on reddit, where each row is a different colour to provide contrast?

I have no idea actually, but something to show a collection of pokemon xD

 

[Babietje]

This is my problem:

I want to place things in a table so that you can quickly see what I have.. So i fill in a table with

"["table"]"["tr"]" etc.. I had to use quotation marks otherwise, it shows the resulted HTML ( with < & >)

It works, and its fine. But then I need to change a pokemon info, cause I collected another, then it turns out that my table's code is like this:

<table border='0'><tr><td style='text-align: center; vertical-align: top; padding: 6px'>Bred Pokemon</td><td style='text-align: center; vertical-align: top; padding: 6px'>ID #</td><td style='text-align: center; vertical-align: top; padding: 6px'>Nature</td><td style='text-align: center; vertical-align: top; padding: 6px'>Ability</td><td style='text-align: center; vertical-align: top; padding: 6px'>HP</td><td style='text-align: center; vertical-align: top; padding: 6px'>ATK</td><td style='text-align: center; vertical-align: top; padding: 6px'>DEF</td><td style='text-align: center; vertical-align: top; padding: 6px'>SPATK</td><td style='text-align: center; vertical-align: top; padding: 6px'>SPDEF</td><td style='text-align: center; vertical-align: top; padding: 6px'>SPEED</td><td style='text-align: center; vertical-align: top; padding: 6px'>Sprites</td></tr>
<tr><td style='text-align: center; vertical-align: top; padding: 6px'>Abra</td><td style='text-align: center; vertical-align: top; padding: 6px'></td><td style='text-align: center; vertical-align: top; padding: 6px'>Timin</td><td style='text-align: center; vertical-align: top; padding: 6px'>Magic Guard</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>? </td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>

</td></tr>
<tr><td style='text-align: center; vertical-align: top; padding: 6px'>Anorith (♂) </td><td style='text-align: center; vertical-align: top; padding: 6px'>51167</td><td style='text-align: center; vertical-align: top; padding: 6px'> Jolly </td><td style='text-align: center; vertical-align: top; padding: 6px'>Battle Armor </td><td style='text-align: center; vertical-align: top; padding: 6px'>26</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'></td></tr>
<tr><td style='text-align: center; vertical-align: top; padding: 6px'>Charmander(♂) </td><td style='text-align: center; vertical-align: top; padding: 6px'>37545</td><td style='text-align: center; vertical-align: top; padding: 6px'>Careful</td><td style='text-align: center; vertical-align: top; padding: 6px'>Blaze</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>22</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'></td></tr>
<tr><td style='text-align: center; vertical-align: top; padding: 6px'>Chimchar(♂)</td><td style='text-align: center; vertical-align: top; padding: 6px'></td><td style='text-align: center; vertical-align: top; padding: 6px'></td><td style='text-align: center; vertical-align: top; padding: 6px'></td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>?</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>

</td></tr>
<tr><td style='text-align: center; vertical-align: top; padding: 6px'>Dwebble(♂)</td><td style='text-align: center; vertical-align: top; padding: 6px'></td><td style='text-align: center; vertical-align: top; padding: 6px'>Adamant</td><td style='text-align: center; vertical-align: top; padding: 6px'>Shell Armor</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>12</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'></td></tr>
<tr><td style='text-align: center; vertical-align: top; padding: 6px'>Espurr(♀) </td><td style='text-align: center; vertical-align: top; padding: 6px'>51724</td><td style='text-align: center; vertical-align: top; padding: 6px'>Timid</td><td style='text-align: center; vertical-align: top; padding: 6px'></td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>13</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>

</td></tr>
<tr><td style='text-align: center; vertical-align: top; padding: 6px'>Feebas</td><td style='text-align: center; vertical-align: top; padding: 6px'></td><td style='text-align: center; vertical-align: top; padding: 6px'>Bold</td><td style='text-align: center; vertical-align: top; padding: 6px'>Swift Swim</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>?</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>

</td></tr>
<tr><td style='text-align: center; vertical-align: top; padding: 6px'>Gligar</td><td style='text-align: center; vertical-align: top; padding: 6px'></td><td style='text-align: center; vertical-align: top; padding: 6px'>Careful</td><td style='text-align: center; vertical-align: top; padding: 6px'>Immunity</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>?</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>

</td></tr>
<tr><td style='text-align: center; vertical-align: top; padding: 6px'>Goomy (♀) </td><td style='text-align: center; vertical-align: top; padding: 6px'></td><td style='text-align: center; vertical-align: top; padding: 6px'> Modest </td><td style='text-align: center; vertical-align: top; padding: 6px'>Sap Sipper </td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>13</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>

</td></tr>
<tr><td style='text-align: center; vertical-align: top; padding: 6px'>Growlithe(♀) </td><td style='text-align: center; vertical-align: top; padding: 6px'>28058</td><td style='text-align: center; vertical-align: top; padding: 6px'>Adamant</td><td style='text-align: center; vertical-align: top; padding: 6px'></td><td style='text-align: center; vertical-align: top; padding: 6px'>?</td><td style='text-align: center; vertical-align: top; padding: 6px'>?</td><td style='text-align: center; vertical-align: top; padding: 6px'>?</td><td style='text-align: center; vertical-align: top; padding: 6px'>?</td><td style='text-align: center; vertical-align: top; padding: 6px'>?</td><td style='text-align: center; vertical-align: top; padding: 6px'>?</td><td style='text-align: center; vertical-align: top; padding: 6px'></td></tr>
<tr><td style='text-align: center; vertical-align: top; padding: 6px'>Mercury (Goomy) (♂) </td><td style='text-align: center; vertical-align: top; padding: 6px'>22631</td><td style='text-align: center; vertical-align: top; padding: 6px'> Modest </td><td style='text-align: center; vertical-align: top; padding: 6px'>Sap Sipper </td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>4</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>

</td></tr>
<tr><td style='text-align: center; vertical-align: top; padding: 6px'>Mudkip(♀) </td><td style='text-align: center; vertical-align: top; padding: 6px'>44575</td><td style='text-align: center; vertical-align: top; padding: 6px'>Adamant</td><td style='text-align: center; vertical-align: top; padding: 6px'></td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>?</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'></td></tr>
<tr><td style='text-align: center; vertical-align: top; padding: 6px'>Onyx(♀) </td><td style='text-align: center; vertical-align: top; padding: 6px'>64239</td><td style='text-align: center; vertical-align: top; padding: 6px'>Adamant</td><td style='text-align: center; vertical-align: top; padding: 6px'></td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>30</td><td style='text-align: center; vertical-align: top; padding: 6px'></td></tr>
<tr><td style='text-align: center; vertical-align: top; padding: 6px'>Torchic</td><td style='text-align: center; vertical-align: top; padding: 6px'></td><td style='text-align: center; vertical-align: top; padding: 6px'>Adamant</td><td style='text-align: center; vertical-align: top; padding: 6px'>Speed Boost</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>?</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>31</td><td style='text-align: center; vertical-align: top; padding: 6px'>

</td></tr></table>

Which is a bit much. Also, if I now preview the results, there is no table anymore, you only see all this nonsense that I just posted. Seems kinda weird that each timeI add a new pokemon I would have to redo all my tables.. So what am doing wrong :(