Home › Discussions › Campaign Portal Building › Need Help with some HTML Code of a Star Wars: Edge of the Empire Campaign - Campaign Portal Building Discussions on Obsidian Portal Community Forums
Need Help with some HTML Code of a Star Wars: Edge of the Empire Campaign
OK, so I'm embarking on setting up a Star Wars: Edge of the Empire Campaign and I need to have a stats page. I have used a table (which I know is possibly a bad idea on Obsidian Portal). Here is the code:
bq). 222222
Would anyone like to make a recommendation on what I'm doing wrong here please.
As a side note, I removed all the spaces as they were moving the table down the page.
bq). 222222
Would anyone like to make a recommendation on what I'm doing wrong here please.
As a side note, I removed all the spaces as they were moving the table down the page.
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
"STAR WARS: EDGE OF THE EMPIRE TEST CHARACTER":https://edge-of-the-empire-veil-of-darkness.obsidianportal.com/characters/test-character
What are you trying to get it to look like?
-
Ketherian
"Signs & Portends":https://swtwc.obsidianportal.com/
Signs & Portends, Dwarves of Lost Koldukar, In a certain realm
"STAR WARS: EDGE OF THE EMPIRE TEST CHARACTER 2":https://edge-of-the-empire-veil-of-darkness.obsidianportal.com/characters/test-character-2
Maybe it's the hard-links you have to your graphics.
I can't reproduce this to test, but try replacing the tags with textile's [[File]] tags (using the Image button on the right-side of the page to select the image from your library).
– Ketherian
"Signs & Portends":https://swtwc.obsidianportal.com
Signs & Portends, Dwarves of Lost Koldukar, In a certain realm
1) The images that are in the top section are background images, and I believe this is why it doesn't like it. But I am not experienced enough to fix it.
2) The tables in OP appear to have too much padding, but in the code, I have quite clearly stated no padding.
I wish I had more coding skill to see the problem :(
Ok so ignoring the fact that Tables used willy nilly are just bad in general at this point given how they mess up...well anything responsive. I've put this post into text because I didn't want to fiddle with the Textile commands right now (so you will have to copy the link in order to see the table).
You have a couple of things going on. So I'm going to put the "tldr" first. Which is...the code. Make sure if you just copy this that it comes through with straight-quotes. Note - I have not fixed ALL of the issues with this. I've just made it look the way you say you want it to. Namely like this: https://dawnhawk-s-test.obsidianportal.com/characters/table-test
2
2
2
2
2
2
The not tldr:
Try to avoid using HTML commands for styling purposes. You are going to run into issues. If the CSS exists to do what you want, use the CSS. I've moved your table background and text-alignment into styling tags, which then renders as desired. It's still fixed width and going to look wonky as hell on a mobile device if that matters. Making tables responsive takes a bit more work and a lot more CSS.
For some reason your code didn't quite work, and the link you provided was closed to me :(
Do I need to be doing anything with the CSS as well?
You should be able to see it now.
I don't have anything in the campaign CSS except the "don't show the stupid break tags" line.
As a side note.
"LINK":https://db4sgowjqfwig.cloudfront.net/campaigns/94329/assets/355570/tabletest.jpg?1407288329
Weird. Suggestions?
This is why I say don't use HTML commands for styling purposes.
You know the line from Pirates of the Caribbean? "Well they are more like guidelines...."
That's what HTML standards are. It's up to the browser if/when/how/what they will actually follow. CSS will give you more freedom to go "look if someone is using messed up browser A do this, if they are using messed up browser B do that, and if they are using messed up browser C, D or E...do something else entirely".
I can maybe play around with the code a bit later and come up with CSS that will do what you want across "certain" browsers.
Or you can start migrating it so that you just have a straight table, and all of the styling is in the campaign CSS properly, and play until it looks right for you and yours.
Or, as you said try and line up a flat image with text. Which...will still potentially run into issues depending on browser and screen resolution.
I've officially been looking at code too long today.
Still working on the rest of the wonkiness.
https://dawnhawk-s-test.obsidianportal.com/characters/css-table-test
Alright.
So first the HTML:
2
2
2
2
2
2
A touch cleaner. :) NOTE: I left the Background URLs for the bottom row as inline styles - this is so you can change the image to the appropriate one for each attribute without having to make redundant classes in the CSS.
Next...the CSS.
.stat_table{
border-style:none;
border-collapse: collapse;
width:50%;
}
.stat_table .stat_row{
padding:0px;
}
.stat_table .stat_row .edge_cell_top{
vertical-align:bottom;
min-width:13px;
padding:0;
}
.stat_table .stat_row .edge_cell_bottom{
vertical-align:top;
max-height:18px;
padding:0;
}
.stat_table .stat_row .stat_cell{
background:url(https://db4sgowjqfwig.cloudfront.net/campaigns/94329/assets/353932/eote-stats-main-top.jpg);
background-repeat:no-repeat;
text-align:center;
font-family:Arial;
font-size:2;
font-face:bold;
min-width:79px;
}
.stat_table .stat_row .att_cell{
max-height:18px;
text-align:center;
background-repeat:no-repeat;
}
The big note here is that I've nested the classes to within an inch of their lives...that's so this table, this CSS, and these class names will ONLY affect tables when the classes are all used in conjunction. In case you accidentally replicate the class names later. Or copy and paste something you shouldn't. This means that if you get a table cell the class "att_cell" but you haven't given the row it's in or the table it's in the right classes - this CSS won't show up.
(If I'm preaching to the choir here, forgive me. You said your code was rusty - and I've learned to never assume someone knows how my brain works.)
Careful with that...it will make it so no breaks show up. Anywhere.
You sir are DA MAN!
:P
Your welcome!
Where X is the number you want.
5 might be good?
In here:
.stat_table .stat_row .stat_cell{
background:url(https://db4sgowjqfwig.cloudfront.net/campaigns/94329/assets/353932/eote-stats-main-top.jpg);
background-repeat:no-repeat;
text-align:center;
font-family:Arial;
font-size:2;
font-face:bold;
min-width:79px;
}
Change the 2 to...whatever.
Change it to a px value. So 12px.