KidzTalk

CODING LAYOUTS CHAPTER ONE: (CSS) Borders, Tables, DIVs & More!

+4 votes
55 views
asked May 22, 2020 in How-To by im kanye (374,590 points)

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!! 



1 Answer

0 votes
answered May 24, 2020 by Pumpkin (753,090 points)
cool

Related questions

+1 vote
0 answers 36 views
+16 votes
3 answers 175 views
+2 votes
0 answers 32 views
+4 votes
0 answers 23 views
+1 vote
1 answer 48 views
asked Jul 29, 2020 in Other by Jane
+2 votes
0 answers 27 views
+8 votes
1 answer 72 views
+10 votes
1 answer 93 views
asked Mar 26, 2016 in Fiction by ❤️GryffindorGal❤️ (118,590 points)

Recent Badges

Popular Question
Asked question received 100 views
- Queerdeer -
Popular Question
Asked question received 100 views
- Vanilla Bean -
Notable Question
Asked question received 50 views
- im kanye -
Popular Question
Asked question received 100 views
- Twilight stardust ⭐ -
Notable Question
Asked question received 50 views
- LunaLight -
...