Mademoiselle; a layout tutorial thread

Description

YOUR CODING GUIDE SINCE 2014

TRY YOUR CODES ON JSFIDDLE

HI, I'M YOUR MADEMOISELLE
I WILL GUIDE YOU CREATING YOUR VERY OWN LAYOUT

PLEASE TAKE NOTE OF THE FOLLOWING BEFORE I GUIDE YOU

001. DO NOT COPY MY TUTORIALS. I MEAN THE SCREENSHOTS, AND ACTUAL WORDS THAT I HAVE WRITTEN.
002. DO NOT BASH. YOU MAY GIVE CONSTRUCTIVE CRITICISMS HOWEVER.
003. PLEASE PRACTICE FOR YOURSELF.
004. COMMENT DOWN IF YOU ARE PLANNING TO REQUEST A LAYOUT.
005. ASK WITH UTMOST MODESTY. NO NEED TO BE FORMAL. BUT PLEASE BE RESPECTFUL IF YOU ARE ASKING.
006. HAVE FUN CODING!

ABOUT THE AUTHOR

HI! I AM FRIENCY OR RIENRIEN IN THE AFF WORLD. I'M 18-YEARS OF AGE AND I SPEAK IN JAVA, C, C++ AND HTML STYLED WITH CSS, ASIDE FROM ENGLISH AND FILIPINO. I LOVE PHOTO AND VIDEO EDITING, AND EXPERIMENTING WITH A LOT OF THINGS THAT ARE RELATED TO TECH STUFFS. CURRENTLY, I'M IN MY 2ND YEAR IN COLLEGE TAKING UP INFORMATION TECHNOLOGY. I COULDN'T WRITE TUTORIALS ALL OF THE TIME BECAUSE OF MY TIGHT SCHEDULE BUT I'LL DO MY BEST TO WRITE TUTORIALS FOR YOU.

WHY DID I MAKE THIS THREAD?
- I HAVE SEEN THAT THERE ARE NOT SO MANY CODERS HERE AND I THOUGHT MAYBE BECAUSE OTHERS ARE HAVING A HARD TIME (SINCE HAND CODING* IS DIFFICULT WHEN IT'S YOUR FIRST TIME). I WAS THEN INSPIRED TO WRITE TUTORIALS SO THAT PEOPLE MAY LEARN ABOUT CODING HERE IN AFF. I AM NOT A PRO, BUT I WILL SHARE ALL OF MY KNOWLEDGE TO EVERYONE.

HAND CODING REFERS TO CODING WITHOUT THE USE OF GUI I.E DRAG AND DROP INTERFACE. ONLY PLAIN TEXT (ALTHOUGH IN AFF THERE ARE SOME THINGS YOU MAY NOT HAND CODE)

Foreword

DISCLAIMER: THE IMAGE IN THE LAYOUT WAS NOT TAKEN BY ME!

MADEMOISELLE - an unmarried French girl or woman —used as a title equivalent to Miss for an unmarried woman not of English-speaking nationality
I'M NOT FRENCH THOUGH. I JUST LIKE THE WORD ITSELF. I THINK IT'S PRETTY.

Next Chapter →

Comments

You must be logged in to comment

Janmidget #1 Nov 6, 2017 17:20:30

I made my own code for chapter layout following some instructions in every tutorial I happen to scan here in aff but can you help me how to make a picture as text background? Every time I am following the <div tag with <img tag its just topping my text box. It didn’t turn out as BG and I’mma lil bit frustrated abt it.

Theartdevotee #2 Feb 6, 2017 02:22:22

Is the layouting on tumblr the same with aff?

Leonny #3 Apr 7, 2016 18:47:04

Chapter 7: I'm still confused about the float thingy-- like, does it save you time from writing the "margin border this" or smtg like that¿? It's been many months since I last coded.

slategrey #4 Apr 1, 2016 03:24:53

Chapter 5: Thanks for making this thread! Quick question though, does the positioning of the div apply the same even if you add links on it, or images? I don't use "float" generally as it doesn't work for me both for images and divs so I just use "margin" to position the boxes (I hate this part most in coding like for real since it's very hard to align them using margins, and although float seems easier, I can't make it work like GAH). I've seen you do the same with images and a div together (using margin) so no problem with that I guess, but how do I do it with two divs?