Being Charlie Website — Floating & Padding
Today, in Charlie wants to build a website, we followed the wise sentiment of Pablo Picasso’: “Good artists copy. Great artists steal”.
- It’s Monday.
- It’s cold.
- It’s raining outside.
Enough said? Okay. So as I was munching on my beef curry I started writing out the things I want to achieve with my website. It took up a page of my journal… so much for writing about that funny thing on the tram later… ah well, c’est la vie. It’ll have to live on in the brain box.
Anyway, I took three things from the list, ventured onto the interwebs (Hail Google aka W3Schools) and started to experiment (aka copying code from W3Schools).
First, I wanted to change the image and pop it over to the left hand side of the screen. Note to self, when copying code from Flickr it helps to copy the correct code. I made a boo boo, but was saved after an IM vent on Facebook. Once I got the right image added… I asked Google:
“Oh, Google. How do I move my image to the left of the screen?”
And presto, StackOverflow is teaching me “Floating”. Floating means exactly how it sounds, you can move the image to the left, to the right, or not at all.
I decided my picture should join my header on the top left hand corner of the screen. But then I was left with all this space in the right. So I did exactly what I do when I write letters (yes I still do that) I fill that empty void.
Today’s choice was a quote. I had already guessed, but used W3Schools to check, that a quote has a <q> tag. Since Mr Picasso was inspiring todays lesson I decided to “steal” his quote for now, as you can see in the top rightish corner of the screen!
Now, I didn’t want my elements thrust against the sides of the screen like I am on the tram every Monday morning, they need their space! Enter, the ‘padding’ code. Like floating, it means exactly how it sounds. It’s like an invisible cushion around the element; and it’s paramaters are completely up to you. I’ve gone for 10px — although its subject to change on a whim.
Next time, I want to explore the different sections. Give them a space of their own, add a little style to the content…. Ooo… and borders I’d like to see if I can give my sections borders.