Positioning Practice

I’ve made it to the portion of CSS where it’s all about positioning elements to form the basis of a web page using tools like <div>, position, and float. I started off in Livweave trying to use every tool I had picked up through Code Academy at once and here’s what I got for my efforts:

screen-shot-2016-12-08-at-10-44-39-pm

As you can see, I ended up with a pretty jumbled mess. Admittedly I really rushed into things without first having a dedicated strategy / plan of attack. I took a few steps back, planned out my divs a little better, set my CSS accordingly, and gave it a second go:

screen-shot-2016-12-08-at-11-53-04-pm

Looks better right? This time I relied on <div> and position: absolute to achieve the desired results. TBH, I am still unsure as to whether Float is either something really important or merely a tool for wrapping text round objects. To me, float comes across as a very fragile way to position elements, a clumsy relic of the webs early days of development.

Anyways, I continued to tinker with the CSS, added additional <divs>, styled appropriately with CSS, and ended up with the following:

screen-shot-2016-12-11-at-8-42-39-pm

Looking much better. Although you can’t click on them in the photo, those are all working links contained within my menu bar. Nailing this down has only grown my confidence and furthered my resolve to continue with my studies. The upcoming week brings new projects and new challenges, stay tuned.

 

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