Some Buttons and Relative Positioning

For me, the really satisfying part of learning to code is when you start to really get the hang of the basics. From there, you can start fine tuning projects to get them just the way you want them to look.

Take for example this project I was assigned through Code Academy. This involved adjusting a web page per a fictional clients instructions such as creating /positioning written and visual elements, laying out a background image, and creating clickable buttons.

screen-shot-2016-12-12-at-9-49-25-pm

Check that out, not bad right? But look at that space between the learn more buttons and the text (which btw I should make white so it stands out a bit better from the cityscape.)
I tried using “position: absolute” but yeah, big mistake. Hmmm, maybe would “position: relative” work better:

screen-shot-2016-12-12-at-9-49-51-pm

Ah ha! There’s nothing better than finally grasping the function of a property and when to use it appropriately.

And here is the CSS I used for creating those nice buttons:

screen-shot-2016-12-12-at-9-50-04-pm

That’s it for now, see you next post.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s