Ch-Ch-Changes

24
March
2006

vlogit.gifLast weeks without connection, in Central Scrutinizer‘s home.
Without losing my mind I taked advantage of the free time for: 1) to begin a new project based on an old idea; 2)to buy an to scarcely leaf through this beautiful and rich volume; 3) to tidy up the vlog.it‘s look.
About the last point prepare your cushions, because I’ll tell you about all the little changes.
The initial situation is presented in this screenshot.

First step, naturally, was the rewrite of the HTML code to retrieve the lost
validity and semantics.
I know that I’ve knock out many of the exceding divs but I was forced to insert new ones to support the backgrounds, so the size remained the same.
About the layout I maintened the 2 colums structure, widther then some pixels, and drawn them near the central one. I erased a box on the left and two boxes on the right, leaving intact only the two archives ones, the search space and the italian box.
The first time I thinked to shift the survided boxes in the footer, but the more rounded header and the slim width of the central column
could be a cause of not desidered link to strange shapes. (see also that I used the word “footer” instead of “bottom”…)

Colours: it’s the case of a monomochromatic scheme, so the starting point has been the container’s orange background, dilute then in various gradations.
I take the old web-safe
#ff8800 (#f80 for the friend), and modified it more time with the trusted Color Blender having at the end in my hands a more “real” #f29c19. After, always with Color Blender, I obtained ten light colours inserting in the second input that you see a black colour code, and then ten darker one inserting the white: a 20 colours palette from black to white (that I’ll never use, naturally) passing throught my orange in only two shots of javascript.

About the images, I only needed a 2 pixel extern shadow, so I used my friend Fireworks that (for me) in this works is more immediate than the ex- contender Adobe (as the Notepad with the Word, for example). I conformed all the shadows and add a menu under the header with a maxi-tab effect: a limping mix between the fast CSS rollover and the mini-tab menu.

To complete the roundness, in forms that are in the comment space and in the submit page I thinked to use the (over-cited in this blog) CSS + javascript technique Nice Forms, that has unfortunately a problem with select, not usable with keyboard: there will be a solution? Next week I take a look at the articles “Taming Select” and “Select Something New”.

Last but not least, in the new page dedicated to the videoblogging resources, I used a technique that I wanted experiment some time ago: the smooth scrolling with javascript for the navigation between the anchors in the page.
[note: the anchors can be inserted in two ways: <a name="anchor-name"/> or with a simple id attribute to an element, for example a div: <div id="anchor-name"/>. In both the cases the links to the anchor will be as: <a href="#nomeancora">Link</a>]
Looking at the techniques suggested in this post from italian blog <edit>,
I tried for the first time this script by Stuart Landgridge, that has the “defect” to know as destination only the anchors with the “name” attribute and not all the elements with an “id”, as the solutions from moo.fx and from Squidfingers.
A good example is the script proposed by Frequency Decoder in this comment from this post on web-graphics , that is a revision of the Beckham code in a unobtrusive way.
Starting by the ones presented below, I tried to make a more compact scrolling script that I’ll show you in the next post.

9 comments:

  • Gravatar , Tula Helm said: 1
  • Gravatar , Kimberley Beidleman said: 2

    I genuinely enjoy studying on this website , it contains wonderful articles .

  • Gravatar , prada boots sale said: 3

    strongzz Terrific work! This is the type of info that should be shared around the internet. Shame on the search engines for not positioning this post higher! Come on over and visit my website . Thanks =)

  • Gravatar , Charlette Mcarthur said: 4

    Particularly excellent blog post. I came across your blog and wanted to state that I have truly liked reading your site.

  • Gravatar , miu miu 財布 said: 5

    あなたが使用し
    ようとしているものは非常に良い品質のもので
    はありませんので
    あなたはコストが本当に
    高いです販売してい
    る間通常それほどではあ
    りません費用を準備

  • Gravatar , studyguider.co.uk said: 6

    Piece of writing writing is also a fun, if you be familiar with then you can write or else it
    is complex to write.

  • Gravatar , Dominick said: 7

    Awesome blog! Do you have any recommendations for aspiring writers? I’m planning to start my own blog soon but I’m a little lost on everything. Would you propose starting with a free platform like WordPress or go for a paid option? There are so many options out there that I’m totally overwhelmed .. Any suggestions? Thanks a lot!

  • Gravatar , jelq said: 8

    Pretty great post. I just stumbled upon your weblog and wanted to mention that I’ve really loved surfing around your weblog posts. In any case I will be subscribing in your rss feed and I’m
    hoping you write again soon!

  • Gravatar , calvin klein underwear uk said: 9

    Wow, fantastic weblog layout! How long have you been blogging
    for? you made blogging look easy. The total look of your website is magnificent,
    let alone the content!

Leave a Reply


Here's the list of topics.