Wednesday, March 17, 2010

Thumbnails

The question is, is this better done as a table or with pure CSS?
Maybe easier with a table, although thumbnails shown don't open to a larger picture,
in a new window this would be easy enough to do.

baby spider
Photo of baby spider.
butterfly
Photo of a butterfly.
Flowers
Just flowers.
Kangaroo
The Australian Kangaroo

Saturday, March 13, 2010

Two column post in Blogger: The Video


Creating a two column post may be of some use to you so this post shows how to do it. The video also shows how to add
two small images to either side of one column. The problem I had with the first post was with FireFox so it took a while to
sort it out. The HTML involves placing two div’s inside another I have called them ‘inside1’ and ‘inside2’ and placed these
two div’s inside one called outer. To edit text afterwards you need to do it in Edit Html for some reason it will not let you
in compose
The two images are placed by telling them to float either left or right. The second one can go anywhere but it is better to
place it inside the text rather than at the end. The style sheet widths can be changed however the 2 inside div’s should
total less than the outer allowing also for the padding. If your columns do not sit properly then change these numbers.
To save time with the video I cut and paste the code if you would like a copy of the text file Download Here. If you need help post a comment.

Friday, March 12, 2010

Two column post in Blogger.

Have you ever wanted to make your post length shorter or maybe just wish you could have two columns? This post will show you how to achieve it and also add a graphic to one column, then again why not two graphics within a column but on different sides of the column.

Just a note about Ardan’s virtual ipod so far not many people have voted. It seems the concept of a blog character may not be a good one. May leave it for a while and re-introduce it at a later time. I will make a video on how to do this.





Monday, March 8, 2010

Vote for Ardan to get his virtual ipod

Hi all,


Me again, well dad has completed what he thinks looks like me. Truth being it looks nothing like me, I’m quite good looking. Anyways dad said when I talk my text has to be red that way you know when it’s me or him.

I asked dad to make me a virtual girl friend if I’m gonna have to stand around here and he said no. Dad’s a bit old fashion and doesn’t understand the needs of a boy my age. Like I’m a real life avatar girls are going to go crazy over me.

For now I wish I just had my music to listen to, so can you vote on the poll on the right hand side of the screen so dad will get me a virtual ipod. Please!

Sunday, March 7, 2010

Ardan Comes Alive

Hello World,
My dad created this blog and named it after me.
My name is Ardan and you gotta say I’m cute eh!
My dad wants to introduce a character into his blog, so he thought he would introduce you to me.
 Today he started turning me into some sort of cartoon type character, I hope you like it.
I personally can’t wait to get the rest of my body.
Anyways now I’m here please say hello via the comments, if ya don’t want to talk to my dad, and I can understand why then just talk to me.
For now I will say goodbye, but have no hands to wave so it’s just a sad ass bye!



Thursday, March 4, 2010

Image to sketch then reflect in Photoshop







  • When area is selected with the wand press delete to remove background
  • If different colors use the pen tool to trace and select.
  • When using the Guassian Blur filter change slider to what you like. 
  • The rectangle i draw around the image then change layers is set to my blogs background color
  • Experiment with settings maybe giving a drop shadow would look nice

    CSS Background Properties.

    Background Color
    The background-color property specifies the background color of an element.
    The background color of a page is defined in the body selector:
    Examples
    background-color:#b0c4de;
    background-color:red

    Background Image
    The background-image property specifies an image to use as the background of an element.
    By default, the image is repeated so it covers the entire element.
    The background image for a page can be set like this:
    background-image:url('paper.gif')

    Background Image - Repeat Horizontally or Vertically
    By default, the background-image property repeats an image both horizontally and vertically.
    Some images should be repeated only horizontally or vertically, or they will look strange, like this:

    background-image:url('gradient2.png');
    background-repeat:repeat-x;

    Background Image - Set position and no-repeat
    Remark When using a background image, use an image that does not disturb the text.
    Showing the image only once is specified by the background-repeat property:

    background-image:url('img_tree.png');
    background-repeat:no-repeat;

    Background - Shorthand property
    As you can see from the examples above, there are many properties to consider when dealing with backgrounds.
    To shorten the code, it is also possible to specify all the properties in one single property. This is called a shorthand property.
    The shorthand property for background is simply "background":
    background:#ffffff url('img_tree.png') no-repeat top right;
    When using the shorthand property the order of the property values are:

    * background-color
    * background-image
    * background-repeat
    * background-attachment
    * background-position

    It does not matter if one of the property values are missing,
    as long as the ones that are present are in this order.
    From w3schools.com

    Therefore to get the yoga girl code mine was
    background: url("image url") no-repeat bottom right;

    Ah! But can you use it to frame a post?

    Yes you can,
    however a little bit harder.

    Now you just use background

    Not background-image.

    Which points out a fault in the video.

    Ok so now that I realise my video in the previous post is wrong I need to explain why.
    Firstly why did it work? Because I wanted it to repeat in both directions so background-image was ok, however to give further detail as in this case not wanting the image to repeat it is just the background tag.

    Background Image to a Post.

    It can be nice to sometimes give a background image or texture
    for a post. This tutorial will show you how to go about setting it up.
    I am using a 200px square image though you can make it smaller
    If you wish. Once you have the image you style the HTML to
    repeat the image in either direction. So you can repeat either x or y
    depending on which way you want it. not putting a repeat direction
    Will repeat it by default in both directions.
    If you don’t want it to repeat then type no-repeat, the code is
    background-image the url (in brackets) and repeat x or y or no-repeat.

    Wednesday, March 3, 2010

    Unordered List Images

    Changing the unordered list dot to an image.
    • one
    • two
    • three
    • one
    • two
    • three
    • First create the image save it to about 15px X 15px 
    • Next upload it to a new post (don't publish it)
    • Get the image information
    • Next edit the HTML
    • Give the ul an Id
    • Then style the ul like below.
    • There you have it no more sad dots.

      Monday, March 1, 2010

      Blog Type with animated gif













      Ok so blogger does not allow an animated gif, this needs a work around.
      Ok got the work around but this needs to be easier.