#Design - Shoe String Dreams

So over the last few weeks I've been playing around a lot with this little Wacom graphics tablet and I thought making a header out of shoe strings would be pretty cool. I decided to make a page based around that, with the social media buttons etc. 

Looks a bit budget, but you've got to start somewhere! It seems like a good idea for a 'fashion on a shoe-string' kinda thing, though I won't be using it since I've already got one for that. Definitely need more practice but I'll keep posting up on my progress. 

#Design - The Patchwork Bakery

A friend of mine has been thinking about setting up an online bakery for a while now and I said I'd help her to design the website, buy the URL, set up the social media, etc. Thought I'd share with you the design that I came up with, helped by her wonderful ideas of course! 

If you click on the image you can see it in more detail.
It's a bit small but, as you can see, there are rolling pin shaped buttons, social media bunting, and an illustration of a cupcake I did a few days ago too! The edges of the content are supposed to be doily style, which I'll do a post on for HTML sometime soon as it took me FOREVER to figure it all out. Once it's properly up and running I'll give you another look, or link you to the page. 

#Sketch - Cupcake

It's late and I decided to sketch a cupcake because I'm hungry and fancy cooking something similar to this. 

I've also decided to start signing my little sketches because it works well with the drawing, sits right in that icing fold.

#Sketch - What Olivia Did

I'm really bad a sketching people, and faces in particular, so I chose a random photo of a well known blogger I follow called Olivia (What Olivia Did) where the face is covered with sunnies! Didn't do anything too interesting with the fill colours but this was one of my first sketch attempts so what can I say!

Desperately need to learn the different brush tools for shadowing and stuff, and am learning how to fill with texture/patterns, though on Pixelmator I've heard this can only be done using a clipping mask BOOO! So far I am thoroughly enjoying this Bamboo Wacom tablet, as is everyone who's had a try. I can't remember if I mentioned, but I bought it on Amazon for a mere £27.00! It was 'Like New' but as far as I'm aware it had never been used. 

#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!