KidzTalk

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

+3 votes
22 views
asked May 22 in How-To by im kanye (371,470 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 by KITTEN (618,220 points)
cool

Related questions

+16 votes
3 answers 89 views
+8 votes
1 answer 34 views
+9 votes
1 answer 69 views
asked Mar 26, 2016 in Fiction by ❤️GryffindorGal❤️ (116,860 points)
+7 votes
1 answer 38 views
+10 votes
2 answers 75 views
+9 votes
1 answer 62 views
+11 votes
2 answers 93 views

Recent Badges

Popular Question
Asked question received 100 views
- Vanilla Bean -
Popular Question
Asked question received 100 views
- C.Clay -
Notable Question
Asked question received 50 views
- LunaLight -
Popular Question
Asked question received 100 views
- KITTEN -
Popular Question
Asked question received 100 views
- -GEMHeart- -
...