Disclaimer: if you are website coder, this is not website coding, I am uninterested.
Hi!! Welcome to my very stupid how to make a layout that won't work on KT or your bio in KN unless you make it somewhere else (or, can you? I'm not sure, you can copy and paste however.) This is just the beginning of how to make a decent looking layout for your bio n stuff, in steps!
By the way, I've been learning to do this for one year, but I have no totally mastered it yet. However, I say I'm pretty good at some coding layouts. Also, these aren't for making a website or anything, maybe they are basics for it but nothing huge. Just a sweet little layout coding for stuffs. Just a little disclaimer there. With out no further- oh I forgot the saying. Well anyways, here's step one!
1. The easiest part, making the table.
This is how your table code should look like. Now what is a table? Well, it is the most important step and you basically need it to be your first for making stuffs like this. I usually use multiple rows and columns for more fancier type stuff.. If I am making the code on a website, I could put it like this:
height: 150px (example)
width: 200px (example)
Rows: 1
Column: 1
headers: none
alignment: center
and 0/nothing for the rest.
other coding options:
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
Though, I don't really use that, so it isn't in my full home. Anywho, next step?
2. DIV containers. This is basically a box/container where it can scroll, have border options, etc. I will tell you about the CSS border options for you as well.
Making it is also easy, here are some stuff ya need to know:
SO, this is my usual looking code for a simple looking layout!
border-style: dotted/dashed/solid/outset/groove/inset/ridge or ofc none if you wish, or all.
border-width: 1px (optional, though personal biased tip: if it is dotted/dashed, having heavy color and the width being quite big, it will look messy and overall ugly.)
float: left
height: 50px (example)
margin: 0 5px (what's margin? : they are used to create the space from your stuffies.)
min-width: 150px (example)
overflow: auto
padding-right: 0px (I usually put 0 pixels buuuut...: what's padding? padding is the space from your border and text/other. I put 0 pixels because I prefer having my text more closer to my border, however it is your choice.)
padding: 0px
3. ur stuff inside the box
Now, this is easy b/c you just have to write stuff & stuff. oooorrr, you can simple add a picture. For pictures, you can search up transparent gifs and link it by or behind (in chapter three, I will show you how to add your gif/picture behind your box n text) text! I usually like choosing little cute transparent emoji gifs and make them small, and basically link it like that. There are lots of tumblr pages for that too.
(note: my kn bio has a white picture over the other picture behind it so it gives a carved effect.)
Thats it for part one~!
Material in the next chapter:
1. Making a picture appear behind.
2. so many stuff that I'm still learning myself but can show lol.
3. YOULL SEE
iT'S 12 at night so yeet~! I worked on this hard so please give me love or i will eat ur toes. JK JK. Thanks for reading!!
