Monthly Archives: February 2013

The CSS Box Model Hurts My Brain

God I hated the CSS Box Model. For a thing with such an unassuming name, it caused me a lot of mental stress!

CSS is confusing says Jackie Chan

First I tried to learn it at the Billy Blue design school in North Sydney

Then I tried to learn it on Lynda.

Then Codecademy.

Then a For Dummies book (I was getting desperate, shut up).

And while I kind of got it…I didn’t really. I could repeat the rules, but I didn’t truly understand how those words were reflected in the look of the page. When I tried to make something happen – it wouldn’t work. So I ignored it, and copied CSS code from other places and thought – I don’t need to get it 100%

Of course, I couldn’t handle not getting it – so I decided to try the multiple videos on the CSS box model on Treehouse. Treehouse was a bit more in depth, and now I get the scary feeling that maybe I understand it somewhat now.

So here I go, trying to explain it – in an attempt to maintain the grasp I think I have on it. Please let me know errors or improvements, and also let me know other resources to help with this topic!

The CSS Box Model

So, basically html elements are broken into two types – block elements and inline elements.
Block elements are ones which will take up the whole width of the parent element, and so each block element must go on a new line. Examples of block elements are <h1>, <div> and <p>.

Inline elements can sit next to each other on the same line. Examples are <p> and <span>.

Despite the default propensity of these elements to be block or inline, you can force them to be one or the other with the display property.

The Display Property

Display: none – this means that It disappears from the page and everything moves over it as if it wasn’t there at all.

Display: block – takes up whole width of parent element

Display: inline – places on the same line

Display: inline-block – places the elements on the same line, but gives them a box so that you can style it with margins etc. (Can’t use negative margins).

Display property of css

Note that Visibility:hidden is similar to Display:none – but it affects the layout as if the element was still there. i.e. like it is in the same spot, but invisible.

Using Measurements

You can assign the height and width of elements using three different measurements:

% - makes it relative to the containing element. Note that you can’t make it 100%, unless every element above it (i.e. all parents, grandparents) have explicit height/widths (can be %). Including the html element.

em – makes it relative to the font

px – allows you to have precise control over the size of the box

Note that when you give an element a width or height – this is for the content area only – you need to consider padding and border width separately.

However! If you add this property to an element Box-sizing:Border-box; the padding and borders will be forced into the assigned width and height of the element.


When elements are too small to contain their content you can control what they will look like using the overflow properties:

  • Overflow: visible
  • Overflow: scroll
  • Overflow: auto (which will show scroll if it is needed)
  • Overflow: hidden


Position is one of the properties that I got most confused by.

Position:Static; This is the default, and it means that the element will be positioned in the normal flow. It won’t acknowledge any offsets for top/left, etc, nor will it acknowledge z-indexes. So if you want to use either offsets or z-index – you need to set the position, and it can’t be set to static.

Position:Relative; This changes the position of an element without affecting other elements. You use the offsets of top, right, left, to move it. These offsets will offset the element relative to its original position in the document

e.g. left:100px; will move that property 100px to the right, but all other elements will stay as they were.

Position:Absolute; the element is completely removed from the normal document flow, and positioned wherever you say. If you use absolute and don’t put in offsets, it will be where it is in the normal document flow, but will sit on top of whatever comes after it because whatever comes after it is acting like the absolute positioned element isn’t there. This is no good, so you need to always use offsets.

The absolute position will be relative to the first parent element that has a position value which is not ‘static’. If there is none, then it will be absolute to the browser view.

Position: Fixed; A fixed element remains fixed no matter whether you resize or scroll the screen. Fixed positioning will be relative to the browser view. Even if you add a relative position to the parent element, the positioning won’t change. A fixed element needs to have offset values assigned to it.

Note:You can’t apply both positions and a float to the same element!


Z-index introduces dimensions, and it shows how they are stacked on top of each other. Higher z index values sit on top of lower z index values. Z-index can only be applied on elements with positioning : Absolute, fixed or relative. Not static!


So there – that’s it! As I write this, I feel like I am understanding, but I am going to do some projects this week to try and prove to myself that I have gotten the gist correct.

If anyone has any advice on the best ways to understand these concepts, please let me know.

p.s.– Apparently there is some issue around clearing floats which apparently this hack is the best at fixing, but I think I need a bit more time to wrap my head around it.


Leave a reply

Visual Basic for Excel – Getting Started

Although I have been discouraged from learning anything about Visual Basic by some people…I am doing it anyway!

Visual Basic is a ‘high level’ programming language created by Microsoft. (Apparently high-level means that there is a strong abstraction from the details of the computer, which means it might use more ‘natural language’, should be easier to use, and might hide or automate significant areas of the programme to simplify. This sounds good to me, a beginner).

I have become interested in it over the years, purely because you can use it to automate things in Excel. After I had learned a bit of JavaScript, I went into VBA in Excel to try and make something and I saw that the language made some kind of sense – so I think I am ready to start learning a bit more about it. Note that you can learn the basics of Visual Basic without needing VB Professional, just because there is an editor inside MS Excel.

I’m going to start learning Visual Basic for Excel – or Excel VBA (Visual Basic for Applications) – and I’m going to try to use this

Apparently you can use VBA in a number of Microsoft Office applications, and not just Excel, so this could be even more useful than I originally thought.

Accessing the Editor

  1. Click the command button, Which is the one under ActiveX Controls. (Not the other button, which is under Form controls.) This inserts a command button, and if you click on it, it will take you to the Visual Basic Editor. Visual Basic Command Button





2.  Alternatively, you can click on Visual Basic in the Developer ribbon and start writing  functions inside the VB Editor

Visual Basic Editor





What the Visual Basic Syntax Looks Like

If you choose option 1, the command button, then when you double click on it, it will take you to the Visual Basic Editor, which will already have a bit of code in it, looking like this:

Private Sub CommandButton1_Click()

End Sub

You can write some text between these two lines to make the button do something

Visual Basic Excel






This will Fill up cells A1:A10 with that text. To see it in action, you have to click out of design view (on developer tab), then click on the button.

Where it says .Value it is because it is giving you the value of that cell. There are a lot of other things you can use other than .Value.  e.g.

  • .Select –  You could have Range(“A1:A4”).Select to select a  range.
  • .Font.Color – to change colour of font (uses RGB)
  • .Interior.Color – to change the colour of the cell background

NOTEthe annoyingness of having to remember that coding languages won’t accept my spelling of colour.

Declare a Variable

Like in other programming languages, if you want to save values  you will need to assign them to variables by

  1.  Giving the variable a name (no spaces or periods)
  2. Assign the variable a data type

You have to declare them before you use them.

If you give the variable type a value like


– then data type is a string. If you don’t yet have a value, but you know that the name variable has to be a string, then in the Editor you can declare the variable like this

Dim name As String

(Trick – Dim name As String *10 – means that the max characters allowed for the name variable is 10).

Write a message Box

message=MsgBox(Prompt, Style Value,Title)

Visual Basic Message Box




Where message is the variable.

Prompt is the message in the box (“Click Yes to Proceed, No to stop”)

Style Value refers to the kind of buttons (vbYesNoCancel)

Title, is in the top of the box (“Login”)

You can also use an Input box.

name= InputBox(“Enter your name”)

 Some Other things you can do in Visual Basic for Excel:

  • Use control flow – with If/Else/Then statements
  • Use Loops with For….Next and Do…Loop
  • Select Case statements e.g. If it is A say “Apple”, if it is B say “Banana”. Etc. The shortcut way of doing a lot of if/else statements
  • Cut up strings using LEFT, RIGHT, LEN, MID. Etc.

To be honest – I don’t think I have yet learnt anything which I couldn’t do with normal Excel formulae…but I am only halfway through the lessons on that site, and the second half promises some useful applications, so we will see.

In other ‘learning to code’ news

  1. TreeHouse – still very impressed by the high quality of the videos, and all I am learning. Expect to add a new module to my site over the weekend in practicing my PHP.
  2. Codecademy – I lost 10 days of my streak (booo), and I hate to say…. I think I might have gone off it a bit. No, not because I lost my streak, but maybe the TreeHouse comparison isn’t helping. Also, I have given up on the Python section. It started off ok, but it is very repetitive and boring. Sometimes it doesn’t make sense until you go to the next lesson. There are some frustrating bugs. Oh, and yes, I lost quite a lot of work due to their database problem the other week. I seem to recall that the jQuery section was kind of crap like this at one point, and then they rewrote it…so I might go back in later. I am going to stop on Python and start anew with Ruby and see if I can reignite the love for Codecademy.
  3. I have had stories published on Commonwealth Banks, Women in Focus and SEOMOZ this week.


Leave a reply

Codecademy’s down, so I bought a Treehouse Subscription

treehouse1So, for the last 45 days, while I have been using some other online learning tools in bits and pieces, mostly I have been obsessed with Codecademy. This was almost completely because of the streak feature, which I had become obsessed with.

Unfortunately, yesterday, the Codecademy site went down, and I lost a bit of my streak. It’s a completely free site, so I didn’t get mad, but I did get a bit anxious because of my crazy attachment to this streak. They were super apologetic, and the streak isn’t back yet – but I wondered if people would really get mad, I mean, it’s free! But then i thought about how hard Codecademy is pushing the angle of points, streaks and badges  - so I guess losing them is a bit of a deal.

In the meantime, I thought I would find some online tutorials about Excel Visual Basic so that I could do some stuff for my actual job…while learning a bit of coding. So, yesterday I did some learning, and even started writing a blog post about VBA… you’ll notice it isn’t up yet, because I got distracted…by Valentines Day!

A place called App Sumo did a 90% off Valentines Day sale (????) for Treehouse – a competitor to Codecademy. It was only $49 for the year, for the gold package – so I signed up…and have now gotten distracted from both VBA and codecademy. Why? Because the interface of Treehouse is just so good! From their cool introduction video (quirky, full of personality) to the variety of courses. The interface is colourful and inviting, and there just seems to be so much content available. (Is this what happens when you actually pay for content? Ohhhhh….)

TreeHouse online learning

Already I can see a PHP course I want to do (not available in codecademy), as well as courses to better understand CSS (it confuses me), and even some design tutorials (I am not a designer, but I do need to learn the basics).

The only thing I would improve about it so far is 1. Let me dogtag some of these courses so I remember I want to do them  - kind of like the queues you can create in Lynda.

2. While there are two cool intro videos – after that I am lost. I don’t know where to start…there is all so much information, and I don’t know which course to choose. Codecademy’s CodeYear was good because it led me down a specific path (while also allowing you to deviate if you want). I would like Treehouse to offer a recommended track, especially for beginners. Lynda is kind of like TreeHouse in that it is just heaps of courses, and there is no particular recommended order. I don’t like that too much.

The other bizarre thing in Treehouse is that there is a ‘business’ course section – which is all about running a business. It seems a bit out of place….but maybe it just means that TreeHouse will be eventually transitioning towards some kind of Lynda programme.

So – I guess I’m going to be in TreeHouse all weekend!



Leave a reply