#HTML - Absolute Positioning

As I mentioned yesterday, I spent a hellofalotta time on my mac, which I've realised is definitely dying a slow death, playing around with HTML to make a new site (this one!) to see how much I could do by myself. 

So, let's talk about positioning an object/widget/text ABSOLUTE! Don't get scared now, it's actually quite simple despite me spending almost 2 hours figuring it out! 

What is it called: Absolute positioning 

What is it for: Positioning a object/widget/text anywhere on the web page regardless of other objects etc. It might as well be called 'Absolute power'

So, when asking on a web design forum about what I should do to move a widget containing an image of my face with a speech bubble, and some social icons, on top of the main body content element (where the posts are), I was told that absolute positioning was the key. 

In exact words: "Well you might want to try absolute positioning, position: absolute; top: __ px; left __px; etc" 

I did a little snooping around in my HTML file and realised that I'd have to figure it out myself because the CSS wasn't working (aka I couldn't work it). So since I'm working with the new type of HTML, and on Blogger, this is what I did: 

1. I found this code, which identifies the widget (containing picture) that I wanted to move. According to the 'Layout' tab, it's called 'HTML1'. 

2. I then scrolled up from this coding in the div area and came to some different-looking coding under the   <![CDATA[  area. 

      body {      

I was told that the code that came last would appear on top of other page elements, so I moved the HTML1 code below the header code just for good measure.  

3. I realised that this is where you can create code to change some of the properties of the widget - HARRAHH! So I gave it a try and added this. 

Once you've found the name, aka HTML1, you have to do three/four little things.

A) State that the position is absolute - position: absolute; 

B) Give the co-ordinates for where it should appear in pixels from the top of the web page - top: 192px; in my case

C) Give the co-ordinates for where it should appear in pixels from the left - left: 90px; in my case. This usually just takes some playing around before you find the right place to be honest. 

D) I was told that adding the z-index can also change whether the object appears in front or behind others, a higher z-index value means it'll appear in front of others with a lower one I think...

And there you have it, I did the same with the social icons and made them sit neatly on top of my content box like so:

Since I'm just a girl trying to work out the wonders of HTML/CSS coding and general design, correct me if I'm wrong PLEASE! Or if there is a much more simple way of doing things and I've been faffing about doing this. 

I hope this helps you!