KidzTalk

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

+3 votes
16 views
asked May 22 in How-To by dragon knight (366,580 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 (607,920 points)
cool

Related questions

+16 votes
3 answers 87 views
+8 votes
1 answer 31 views
+9 votes
1 answer 69 views
asked Mar 26, 2016 in Fiction by ❤️GryffindorGal❤️ (116,800 points)
+7 votes
1 answer 36 views
+10 votes
2 answers 69 views
+9 votes
1 answer 58 views

Recent Badges

Nice Question
Question received +2 upvote
- CoralSophie08 -
Nice Question
Question received +2 upvote
- Ada4 -
Nice Question
Question received +2 upvote
- CoralSophie08 -
Nice Question
Question received +2 upvote
- CoralSophie08 -
Notable Question
Asked question received 50 views
- Queeny -
...