Web development, coding & SEO

Crip-crap

These bits and pieces here have helped me ahead on my own way once. And being useful for me then, they may be useful someone else today...

An ancient proverb -
	if you don't float, you sink,
and an extension to that -
	once floated, forever floated,
and a nastiness -
	IE6 is criteria of truth.

CSS

• Transparent Background CSS - Setting a semi transparent background based on CSS for a div layer.
• CSS Defaults - A sample style sheet plus few basic layout elements.
• Linking CSS - Linking to CSS file and adding styles by different media.
• Targeting Browsers Separately - How to address styles to different browsers.
• Embedding Custom Fonts - Cross Browser Custom Fonts and @Font Face.
• Windows & Mac fonts - Common to Windows and Mac fonts and the respective font family. Cross browser fonts.
• Font sizes compared - Playing with font sizes: browser default, em and px.
• Reset CSS styles - Starting with a new style sheet, for the first thing reset all CSS.
• Style sheet optimization - Shrinking down the size of a CSS file.
• CSS Problem - Problems related to CSS and how to fix them.

Page layout

• Horizontal and vertical aligning - Horizontal aligning, and the both - horizontal and vertical aligning..
• List item floated DIV - List element has got sophisticated floated content and gets nailed down with help of some CSS.
• Page width 1024 - dimensions of a page @1024 screen resolution. 30% of screens on year 2010.
• Aligning divs in to two columns - playing around with divs.
• Gap on bottom - Making a gap on the bottom of page.
• Minimum height - Setting min height of a div with CSS for IE.
• Table - Table - classic and tableless - CSS.
• IE6 character-leak, and IE space below
• Page min-max width - CSS for page's min-max width that works in FF, IE and all other modern browsers.
• Rounded corners CSS - Vertically fluid div and horisontally fluid div.
• IFRAME code - how to implement iframe code and uses of iframe.
• Two fluid columns layout - Actually, one fixed width column, another fluid one.
• Three fluid columns layout - Fixed columns left and right, the fluid one in between.
• Footer sticks to the bottom of a page - CSS.
• Left and right on the same line - Elements on left and right hand end of the same line.
• Vertical align div tag - align an element vertically using css.

Form

• CSS for form elements - A trouble easing CSS for some form elements, a case from life.
• Select option line wrap - cutting a long option line to several short ones, JavaScript.
• Cursor appears automatically in the text box.
• Forms - form elements - checkbox, button, radio, select, textarea, textfield.
• Form Select Country
• Form Select Year Month Day
• Centering Form Elements - Form layout, simple sentering of form elements on page around a central line.
• Form html code - Sample of a form mark up. Bullet proof one.
• Form html code 2 - Another sample of a form mark up. The same principle, different look.
• Form html code 3 - One more sample of a form html code. All the same principle, simplified construction, an illustrative figure attached.
• Button like link - Hyperlinks like a breadcrumb or a progress bar or a navigation menu.
• Link like button - A link looks like a button.
• Button hover css - Button hover effect for an input element, button element and a link; fluid-width button.

Menus, tabs, flyouts

• Popup jQuery - A simple solution to get a single popup on the page.
• Expanding collapsing sliding div jquery - Sample code of expanding-collapsing-sliding div jquery.
• Tooltip koteako hoverbox jquery - hover fyout.
• Tooltip CSS - Hover flyout or callout for any element.
• Flyout CSS - Fly-out that uses bare CSS, tooltip, callout.
• Highlight navigation item CSS - How to highlight the navigation item of the user's location in the website.
• Tabs HTML - simple and stabile tabs with CSS.
• Expandable menu JavaScript, 2 levels - Simple expandable menu using JavaScript and based on list elements, 2 levels, changing +/- sign.
• Expandable menu JavaScript, 3 levels - Expandable JavaScript menu, has 3 expandable levels, several items can be opened simultaneusly. When JavaScript is disabled, all is expanded.
• Expandable content in collapsable box - Variation of the "Expandable menu JavaScript, 3 levels".

Misc.

• Best practice in HTML CSS coding. - Some best practices in HTML and CSS coding, settled out in everydy's work.
• Configure Postfix anti spam. - How to configure Postfix to fight spam.
• JavaScript mailto - Use JavaScript mailto to stave off collecting your email address from a web page.
• How To Code HTML Email Newsletters.
• News ticker, BBC style - JavaScript and JQuery.
• BOM - Byte-order mark - UTF-8 signature - zero-width no-break space - U+FEFF - U+2060 - ⁠
• Google AdSense sizes - Google AdSense sizes and dummies.
• Embedding SWF FLA
• IE local machine active content blocked - Internet Explorer has restricted you viewing a local file. Local Machine Zone Lockdown.
• UTF-8 entities - UTF-8 entities, ASCII entities, Unicode entities, UTF-8 character encoding, character entity HTML reference.
• CDATA comments - Usage of CDATA comments
• Resize and Print - Resize the text and print the page, JavaScript.
• Noscript meta redirect validation - Handling JavaScript not enabled visitors.
• Reference links - Reference links on a page and between two pages.
• Password protect folders. - How to password protect a web folder.

SEO

• Optimizing a web site for search engines.
• SEO submit site - Submitting to search engines.
• Keyword Pyramid - tree structure of a web site.

Tools and misc.

• Mockingbird. Wireframing, an online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application. A good alternative to MS Visio. gomockingbird.com. 2009.
• Cool Ruler. A ruler to take measurements right on the screen - http://www.fabsoft.com/products/ruler/ruler.html. 2008.
• Pickard. Pickard enables to modify the colours picked. ColorPix wasn't enough any more, so I chose Pickard_1.1. 2009.
• HTMLTrim.exe. Code indentation, code beautifier, pretty printer, code folding. No installation, just run it, play with settings, save settings to .tdy, place .exe and .tdy in same folder, clicking on .tdy opens the program and loads .tdy automatically. 2008-08-05.
• Addons to Firefox
  • Firebug
  • HTML Validator Htmlpedia http://users.skynet.be/mgueury/mozilla/
• IE tools
  • IEtester, view IE5 IE6 IE7 IE8, compare original source code versus IE intepreted source code, debug.
  • IE DebugBar
• Counting working time, Outlook & Excel
• Loads of links to useful resources and in-house solutions at exitfegs.co.uk - http://exitfegs.co.uk/Sources.html

---