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. 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 much more. |
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 :) |
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: |
|
After realizing the differences between IE's rendering of a page and Mozillas rendering of a page I made a small though very handy page that can be used in both (I'm yet to get into Opera and other browsers). I've incorporated most of the tools and links above in its code. |
Web design service
What do you do for money honey?
I'm asked regularly about Web page
design and I'm also complimented on my work quite often.
What I make from graffting web pages helps towards a living, as you can
see its simply some HTML and a couple of pictures, nothing
special!
But If you think you could use my services in any
way, please send me an
Otherwise just enjoy my pages, I wrote them so that I could
have a place to show you my poetry and songs and some of
the other mad things I get up to along the
way.
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 ;
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, very strict, only proper HTML and CSS will do.
- 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 Mozilla FireFox, IE is a pain in the bum. Once set up properly (strict HTML, CSS) FireFox does what one asks of it. For all its Quirks IE (as all things Microsoft) does what it pleases and is much more prone to worms and 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 refrain from using brackets () in file names as they will also not be seen by some browsers in 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.
*** 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 :
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.
