A page dedicated to Web Design, some useful links and a central point for my own Web Work Shop.

Search :

The Work Shop

Sweet dreams are made of these....

I call it a work shop,
but they are in actual fact a few pages I wrote, full of useful links and web tools, clever snippets of script and various windows to view, access and manipulate pages and script in.


An old loved on-going project
I made a small though very handy page that can be used to
..... play around with on the web.
I've incorporated a lot of the tools and links in its code.


So as not to end up with a menu that's half a mile long the rest of my recommended links can be found on the 'Favorites' page:



While surfing through Microsoft's library I came across the wonderful DXi transition filters, and as I was working on understanding buttons at the time, I ended up putting the page buttons behind a transition, it is quite an impressive effect but unfortunately it doesn't work in anything except IE.
These are my first 'work shop' pages :


NOTE:
The pages linked to through the buttons above look like poo in all browsers except IE, until I find the time to work at them :)


The rest of the links that make up the menu on the right are all to pages concerning web design; webmaster sites, different types of tutorials, hosting, domain names, fonts and much more.

 

Web design service

What do you do for money honey?

What I make from graffting web pages helps my creative side but does not contribute towards a living, as you can see its simply some HTML and a couple of pictures, nothing special!
But If you think I can help in any way, please send me an
Otherwise just enjoy my pages.


 

A lost link?

Strange days indeed

I was looking for a 'HTML for beginners' link and came upon NCSA's 'HTML for beginners page is no more' page, what a pity I thought as I'd personally spent many hours on that very page.
And then I remembered that I'd done a 'Save as...' with that particular page as part of my curriculum. So, 'if they can no longer host it maybe I can'.
Please remember that its not my page, I did not write it, the links on top go the 'HTML for beginners page is no more' page, and I've taken out the main NCSA menu. Otherwise here it is in most of its original glory ;

Looking for a simple beginners guide to HTML ?
Try this button for starters ...




 

Tips of the iceberg.....

If I was you...

Some tips

or just some things I've come across while learning about Web page writing ;

- The Mozilla browser is strict, Chrome is strict, in most cases only proper HTML, HTML5, CSS and JavaScript will do.
IE is cool at home behind a wall because it's anything goes, as they well know.
- Mozilla does not display a negative (-) z-index.
- Any CSS positioning command : top, right, left, z-index etc must be accompanied by the 'position: .....' command.

- Go and get FireFox (but watch out for plug-ins) or get Chrome, very nice, IE is a pain in the bum. For all its quirks IE is much more prone to abuse, worms, hackers and all other evil driven burrowing fiends.

- Don't put spaces in file names as they will not be read in certain scripting situations, and if you can refrain from using brackets () in file names as they will confuse certain scripting situations.

- To keep control of the page in differing browsers I've realized that each 'table' tag need the 'cellpadding="0" cellspacing="0" command, and that IE renders CSS 'top:__, margin-top:__' etc in a different way to FireFox and Opera.

- To keep to good validation also add the 'summery="a description of table"' to your tables tag and 'alt="name of image"' in your image tags eg got to have it

*** A!! a break through***

I've surfed around for hours trying to find a code that hides layers from Firefox etc but shows them in IE (because of the DXi shadow effect on my Alien). Found this link and this one and this one to be very useful.



Some more recent tips

- A real handy piece of code is the <base target="_blank"> tag, it must be placed in between the <head></head> tags and ensures that all links on that particular page open in a new window.
- Another handy one is the CSS code to take out (nearly) all the margin and padding crap created by different browsers :
*{
margin: 0;
padding: 0;
}
It calls all the elements on the page and tells them to have no margin or padding. giving you the creator more control over your page set-up. Apparently <forms> still need extra attention.
- A real nice one I'd been looking for for a while was the :


<form>
<fieldset>
<legend>This is the Title</legend>
<p>Ipsum pipsum dip some in some gipsum</p>
</fieldset>
</form>

Which would be :

This is the Title

Ipsum pipsum bipsum dip some in some gipsum



Links

Here are a few examples of how to link

Link to a certain part of a page by first putting an Anchor somewhere on the page:

To 'Jump' to the anchor make a link somewhere else on the page :

The '#' is to tell the browser that it's a link to a part of a page. Every thing after the # is called a 'fragment identifier'.

To link to an anchor on another page try this :

This can also be used to link to sections of other peoples pages, as long as there is named anchor to link to in the desired page.

Iframe transparency

A good tip care of www.samisite.com


To make an iframe transparent (background of the iframe page is visible through the data from the other page),
you just need to use 2 additional code snippets.

1) In the iframe code add ALLOWTRANSPARENCY=TRUE
2) In the content page (the page seen through the iframe), add
<style type="text/css"> body {background-color: transparent} </style>

If you have several pages linked to the same iframe and you want them all to be transparent,
you must place the second code on each content page you want to appear in the iframe.
You can choose to make only SOME of the pages that appear in the iframe as transparent
by not including the 2nd code on all the content pages.


document.writeln

From www.htmlforums.com


Firstly; it's document.writeln (small L)
As in WRITE LINE ;)

Not document.writeIn (uppercase i)
As in WRITE IN :eek:


Secondly; both document.writeln and document.write will overwrite the document
if invoked after the document has been loaded. What I think you are looking
for is either, innerText which is IE proprietary or innerHTML which is supported by IE5+ and NS6+.

Text Decoration tips

From http://www.learningjquery.com/2006/10/quick-tip-blur-links


To stop the blue line showing that surrounds a linked image,
simply put the botder command in the tag:

To supress the dotted lines around a clicked link use either of these methods :


Or, if you wanted to apply the blur only to links inside a DIV with an ID of "magic," for example, you could replace
$('a') with $('#magic a'). If the blur should apply only to links with a class of "fun," the selector would change to
$('a.fun'). See how easy? Give it a try:

instead of $(this).get(0).blur() just use this.blur().
Or : If you don't want to see the focus outline, period - use this instead: Here is another from http://www.webmasterworld.com/forum83/4857.htm :

And an extra tip for IE users :



to get rid of IE's nasty, stupid image toolbar thingy that looks nasty when hovering over images on a page.


 





Search words: kings, kingsonone, home, gartref, author, media, text, editing, translation, correction, studio, production, sound, vision, representation, presentation, web, web design, web development, site, web site, html, css, javascript, work shop, web tools, fonts, links, help,

Text Copyright 2005 © <Author>Kings</Author> | All Rights Reserved


WebMaster | E-mail | Legal kingsBach