CSS Anchors

I've known how to make hyperlinks from day one but it's taken me this long to finally learn how to make an anchor link! But it's pretty simple, just using HTML.

This is how I've been using it on a website which has a contact and about section at the bottom.

I used this code if the anchor's on the same page:

<a href="#about">ABOUT 

And this code if it's on another page:

<a href="http://site.com/page.htm#about">ABOUT 

This code is placed just above my "ABOUT" section:

<a id="about" name="about section"></a>

Box Shadow (Right and Left Only)

Here is a CSS code to create shadows only on the left and right of a box which wasn't too easy to find. I found this one on a forum so I thought it might be useful for someone else. All the values can be changed to your liking but below is a sample.

div { width: 400px; height: 400px; 

box-shadow: 6px 0 4px -4px #222 , -6px 0 4px -4px #222; 

 -moz-box-shadow: 6px 0 4px -4px #222, -6px 0 4px -4px #222; 

-webkit-box-shadow: 6px 0 4px -4px #222, -6px 0 4px -4px #222;} 

Understanding the code goes a bit like like this:

     x-offset (right[+] or left[-])

     y-offset (bottom[+] or top[-])

     blur 

     spread

     colour

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Update:

Since this seems to be a post that is viewed a lot, I thought I'd add a pen as well. I changed the values a little from the code above.

Text Editor Search

I've started hand coding a few websites and naturally it's taking me a lot longer. A simple navigation bar which would easily have taken me less than an hour to do in Muse, can take me a day or even two if I'm unsure which design to settle with. It could be bit frustrating if I was counting the hours but I'm taking it in its stride and know it's all part of the learning process. And I have been learning a lot.

One thing I have been trying out since I have started hand coding is a good free text editor.

I started out using gedit which I was pretty happy with until I watched a tutorial (one of many) where the demonstrator was using this program called Coda. The feature it had might have been around for ages but to a newbie coder, the automatic html tag closing ability, was a revelation! The program wasn't free but I thought, let's download the demo version and if it's as great as it looks, it'll be worth considering. The first first hours was nice. Almost as if some twin sister was there to finish off my sentences. But the novelty wore off as I realised the default program preview wasn't the same as browser preview. Maybe if I fiddled around a little more, read some help forums, I would have figured out why the program preview was viewing differently. But I had just wasted an entire day's work and since Coda wasn't even free, it was in the bin for me.

I downloaded another free text editor the next day after some research and advice. This time, Textwrangler. Very much like gedit and serves it's purpose but I was itching for something a little bit better and different, since this was the program I was to use 8-12 hours for the next few months (yes, that is my plan. Not spending everyday trying out different programs.)

Koda looks so very nice and if it had an easier way to change its features instead of having to go into the CSS file each time, it would be a nice one to use.

At the moment I'm using a trial version of Textmate and I'm liking it a lot. It has the closing tag feature and its has everything that I would want, except it isn't free. 

So my search still continues for a suitable free text editor! But if not, I just might just buy this program as it has proved to be pretty efficient so far.