|
Teach Me
POST CREATED Mar 18, 2014 16:03:27 GMT -8
Post by Deleted on Mar 18, 2014 16:03:27 GMT -8
I would like somebody to teach me how to code on proboards v5.... I read the tutorials and I'm still confused.... I'm looking at creating a basic table... maybe someday adding a scroll in it... and the table would have a built in image... but first I need to know how I put these in the table properly because I keep guessing wrong...
|
|
the greatest general under the heavens
|
Teach Me
POST CREATED Mar 18, 2014 18:29:59 GMT -8
Wolf likes this
Post by Egao, Egao Everywhere on Mar 18, 2014 18:29:59 GMT -8
To create a table, it's like this (just imagine them with brackets instead of angle signs) <table> <tr> <td> first row first column </td> <td> first row second column </td> </tr> </table> As you can imagine, <tr> indicates the row and <td> the column. If you want to add more rows, repeat the code <tr> <td> </td> </tr> and for more columns, put in more <td> </td>. Take note that you need a row first before you can make columns. So td always have to be within tr. Now that's a bare table. What you're asking is to style it so you can add a scroll and a background image (the built-in image you meant). To do that, you add in a ~style~ no really that's what it's called<table style="css;"> <tr> <td> first row first column </td> <td> first row second column </td> </tr> </table> That's the syntax of style tags. It needs to be enclosed by quotes and the css must end with a semicolon. The css is the one you linked. There, we will style the table so that it would do what you want. GOAL1. Make a background image. 2. Make the content scroll. Adding a background image is easy. Usually, we link images for our backgrounds. The css for that is background: url(link) Put that in the syntax, replacing link with the url of your image. Just make sure your table has actual content inside so you can see the effect. Making it scroll needs you to do at least two things. One is to set a height: 00px so that it could scroll. Change 00 to a height you want. And lastly, to tell the element to scroll when the content goes beyond the height, add in overflow: auto. So you have three css. You might be wondering how to add them in the style tag. You just put them together in the enclosed quotations, so it would go background: url(link); height: 00px; overflow: auto;You can try it out with the table code I gave. Just replace the angle signs to brackets for them to work in proboards. And maybe make the content longer too. You can add in some filler text so you can see how it looks like.
|
|
|
Teach Me
POST CREATED Mar 18, 2014 20:08:21 GMT -8
Post by Deleted on Mar 18, 2014 20:08:21 GMT -8
I'm not able to get it to scroll... did I error when I put the code in for tests? TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST |
|
|
the greatest general under the heavens
|
Teach Me
POST CREATED Mar 18, 2014 21:00:27 GMT -8
Post by Egao, Egao Everywhere on Mar 18, 2014 21:00:27 GMT -8
Huh, guess you can't put the overflow in the table. No, you didn't get it wrong. I did xD I don't really use tables so I derped there. But that's okay! We'll just put your filler text in a div tag. Get the height and overflow and put it there. <div style="height: 400px; overflow: auto;"> test test </div> The div tag is used to format those within its block to the css written in its style. So in this case, we'll be formatting your filler text to have height 400px and to overflow.
|
|
|
Post by Deleted on Mar 19, 2014 12:53:37 GMT -8
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST |
|
|
the greatest general under the heavens
|
Teach Me
POST CREATED Mar 20, 2014 3:32:33 GMT -8
Post by Egao, Egao Everywhere on Mar 20, 2014 3:32:33 GMT -8
Yey, you got it! You can actually drop the table here. You don't need a table. I'm no web designer but I don't think it's elegant to use tables for designing (although at times, you may be forced to use them). You can drop the table and just have one single div style to make the template you want. You'd have to specify the width though. You'll also need a padding. Padding is always a thing.
Then I guess that's it? If you've got other questions, I'd be happy to answer more of them.
|
|
|
Teach Me
POST CREATED Mar 20, 2014 9:28:19 GMT -8
Post by Deleted on Mar 20, 2014 9:28:19 GMT -8
How do I put the padding in the table?
|
|
the greatest general under the heavens
|
Teach Me
POST CREATED Mar 20, 2014 19:25:09 GMT -8
Post by Egao, Egao Everywhere on Mar 20, 2014 19:25:09 GMT -8
If you want to assign a padding on the table, you can use the cellpadding I do believe it's <table cellpadding="1">. This will assign a padding for all its cell.
|
|
|
Teach Me
POST CREATED Mar 20, 2014 20:11:11 GMT -8
Post by Deleted on Mar 20, 2014 20:11:11 GMT -8
Did I do this code correctly? TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST |
|
|
the greatest general under the heavens
|
Teach Me
POST CREATED Mar 20, 2014 21:35:59 GMT -8
Post by Egao, Egao Everywhere on Mar 20, 2014 21:35:59 GMT -8
Seems like I gave you the wrong code xD I guess proboards doesn't use cellpadding/cellspacing. In real html, you should be able to but it's limited here. To add padding, just add in the css padding: 0px to your div style tag or to your td (td style="padding: 0px;"). You'd have to use your previous code since that one ate the table style.
|
|
|
Teach Me
POST CREATED Mar 21, 2014 10:38:36 GMT -8
Post by Deleted on Mar 21, 2014 10:38:36 GMT -8
In the top code I put it in the css TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST |
I put it in the td code TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST |
Did I do those correctly? They don't look very different from the code I posted a few posts up...
|
|
the greatest general under the heavens
|
Teach Me
POST CREATED Mar 21, 2014 19:37:15 GMT -8
Post by Egao, Egao Everywhere on Mar 21, 2014 19:37:15 GMT -8
You didn't put any value on the padding. You need to read what you're copy-pasting! Doesn't make sense to have a 0 pixel of padding, does it?
|
|
|
Teach Me
POST CREATED Mar 21, 2014 20:09:15 GMT -8
Post by Deleted on Mar 21, 2014 20:09:15 GMT -8
Sorry didn't realize I was meant to edit the number... I just changed the numbers on the two tables for you to see.
|
|
the greatest general under the heavens
|
Teach Me
POST CREATED Mar 21, 2014 23:10:40 GMT -8
Post by Egao, Egao Everywhere on Mar 21, 2014 23:10:40 GMT -8
You gotta question why it's like that when it seems like it doesn't make sense. The proper definition of the html for the syntax is property: description. There are many properties out there and each have a list of definitions for you to call. For properties like padding, margins, font sizes, etc, their description is in pixels. You can always google them and find them in w3schools. The Internet is the most up-to-date source you can find. Anyway, for the first code, putting the padding in the table is supposed to have an effect. Again, it's another pb thing that's wrong. What it's supposed to have done is to put a padding within the table. It's supposed to look like this. I added another column for you to see the effect. Supposedly, I suggested to you padding so that the text you have won't be squished into the box. You would notice how jarring it is to have it crammed beside the scroll bar. Putting the padding on the cell is the closest you can have for your table to have a padding in the case of proboards, but since your text block is within the div, you have to give the padding in the div. It sounds complicated xD I don't know if you're aware of the nature of styles being blocks and how the elements arrange themselves. It would be easier if you didn't have the table here. As you can see, it's already pretty buggy.
|
|
|
Teach Me
POST CREATED Mar 22, 2014 23:47:20 GMT -8
Post by Deleted on Mar 22, 2014 23:47:20 GMT -8
I got the div to work. TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
|
|