RP Resources

Codes + Layouts + Tutorials + More

×

Community Rules

This comm is open to anyone to post codes, layouts, resources, tutorials, and requests for help and content. Of course, we do have some rules, so please read through them before jumping in; thank you!

Treat others the way you'd like to be treated. This is not a drama comm, and we expect you guys to be awesome and stay civil. If a situation gets out of hand, please contact a mod, and leave comments intact so we can accurately handle the situation.

Please tag your posts and check out the tagging guide if you have any questions!

■ Very long posts or posts formatted with your own div styling for organization should be behind a cut to save people's f-lists.

Work safe above the cut, please!

■ If posting codes, guides, etc. absolutely do not post content that you did not make. That's stealing, and it's super uncool, bro! If you are posting expanded/edited codes made by yourself using another user's coding as well, please be sure you have their permission (You do not need direct permission if they allow edits to be re-posted in their blanket rules.)
■ Do not post tutorials/links to tutorials that show people how to steal codes from other users. Again: Stealing. Not cool.
When asking for help with something, please check the help tags (help: coding, help: graphics, help: icons, help: layouts, help: other) first to see if your question has already been posted and answered to avoid duplicates.

We do not allow game ads to be posted on this comm since there are so many communities specifically for that already; if you're pimping a game as an addition to a regular post, that's fine. (OK: You post an RP code and mention in the post, oh hey, also I'm running this game! NOT OK: Posts dedicated to game promo.)

We do allow other types of community promos if they are related to RP (icon comms, other types of resource comms, etc.) Just shoot us a comment in our dropbox beforehand and we'll let you know if it's cool to post!
×

Tagging Guide

zzz
×

Banners & Buttons





Previous | Next

[info]ocarina
[info]rpresources

[info]ocarina
[info]rpresources

No Subject


[info]ocarina
[info]rpresources
Hey, guys! I've pretty much exhausted my brain trying to think of how to fix this code. I'm trying to make it so the image is flush with the bordered line instead of having a gap of white in between it. The image is beneath the LJ-Cut for your convenience, and I have slapped the code in a text area box so that you can better see it.



TAKEN PBS
MALES FEMALES
FIRST LAST
FIRST LAST
FIRST LAST
FIRST LAST
FIRST LAST
FIRST LAST
FIRST LAST
FIRST LAST
FIRST LAST
FIRST LAST
FIRST LAST
FIRST LAST
FIRST LAST
FIRST LAST
FIRST LAST
FIRST LAST


Comments

Nov. 1st, 2018 04:39 am (UTC)
I'd suggest replacing the tables with a div set to display:flex; (you can read more about using flex here) but the spacing issue is caused by your cellspacing and cellpadding. If you set them both to 0 you should be all set!

If you wanted to replace the table with a flex solution you could replace the inner table portion of the code with this!



Here's a preview of what it looks like with that in place! The top row is your table with the cellspacing/padding issue resolved and the bottom row is the flex container replacing the table:

Nov. 1st, 2018 04:45 am (UTC)
oh my god, thank you SO much. i've been trying to consult all of your guides and it's gotten me so far. i really appreciate you not only fixing what was wrong, but showing me how to improve it. thank you!
Nov. 1st, 2018 04:49 am (UTC)
Aw, no problem at all!! ♥ Flex is honestly such a great tool for layout out content in cols/rows! I have some other info on using it for this kind of stuff in the "easy columns" section over here too if you ever need it! Extra useful for lists like these and cast lists, etc! And they're a lot less stressful to maintain after the fact, since you don't have to track the rows and columns like you need to with a table, yanno?
Nov. 1st, 2018 04:54 am (UTC)
sometimes it's the little stuff that trips me up the most, lol. i try to take in all of your tutorials, and i've seen a total improvement in myself since you've started putting them out. so seriously, thank you enddddlesssllyyy for all of the tutorials and beautiful templates you put out.

i'm trying to make things nice and comprehensive for a friend who is putting together a game, but is worse at code than i am, so making it clear and easy to edit is a big priority for me right now.
Nov. 1st, 2018 05:15 am (UTC)
I'm so glad! I love teaching but I don't get a lot of opportunity to, so I'm super stoked that it's been helping!

I totally get that, and if ease of editing is what you're aiming for then flex is definitely the way to go. A good example is cast tables; when you use a table it's super easy to get tripped up and break rows even if you're really used to tables, but with flex all you need is an outer container and then each cast entry has its own div and they can be rearranged on the fly (which is great for sectioned and/or alphabetically ordered cast lists.) So you could do something like:

<lj-raw><div style="display:flex;flex-wrap:wrap;justify-content:center;">


<div style="width:100%;">Title</div>


<div style="width:;margin:;">
Character
</div>


</div></lj-raw>


flex-wrap:wrap; will tell the flex container to wrap elements onto a new line for multiple rows.
justify-content:center; will tell the flex container to horizontally center the content.
width:100%; if you ever want a specific element to span the whole width you can set it to 100%, and then any other elements can be given their own percentages or px measurements based on your container width and how many you want per row.