Stu Nicholls, menus css play

I have had many emails asking where the code/style can be found for the various demonstrations.

Well the xhtml is always placed in the #info div, so examine the source code, find the <div id="info" >..... </div > and in between is the 'code'.

In most case the style is embedded in the page <head >... </head >. This is done to keep it all together on the same page making it easier to find. In some cases the css is held in a separate file (where it should be) and is loaded in the normal way <link rel="stylesheet" media="all" type="text/css" href="path to css file.css" / > so just add this path to the address in your browser to see the css file.

Menus (link)

A Drop Down Menu

a super-basic dropdown menu:
2005?, Mozzilla. Ok.. if you have Mozilla, Firefox, or Opera just hover your mouse over the menu to get a drop down list. Unfortunately IE does not recognise :hover on anything other than links so fails miserably with this one. 5th September 2006, Works in Internet Explorer 7.
Note that this method has advanced greatly over the last couple of years. Check the 'Menus' section for the latest examples of drop down menus.

Multi-Level - Dropdown

Float/Drop menu system

Inline/Dropdown menu system
» 21-07-2010 A totally NEW menu system for variable width dropdown menus. NO hacks or javascript.

Multi-Level - Flyout

CSS3 demonstrations

CSS3 slide menu
» 24-01-2010, Using CSS3 to produce a slide down/slide up menu with radius corners and drop shadow.

Stu Nicholls, css play _ Photos, Lists, Text

Photo Galleries (link)

A photograph gallery:
A photo gallery using thumbnail images.
A CSS gallery by numbers:
» 10-11-2009 A CSS gallery using a set of numbers and a hover/click state.
A CSS gallery by numbers:
» 10-11-2009, A CSS gallery using a set of numbers and a hover/click state.

Text manipulation (link)

CSS show/hide more information: all browsers except IE6.

Using the latest discoveries and developments with CSS3, this version of show/hide information makes it possible to have the hidden text contain links and also have the hidden text stay open when viewed in Safari and Chrome.

Works in all the latest browsers but not in IE6 which does not support the CSS3 styles used.

Lists (link)

A three column list: How to generate a three column list.

uname, u-name

u-name


u-name


u-name


u-name



How to hide the labels in a blogger post

blogger-dashboard.blogspot.com/2009/07/how-to-hide-labels-from-blogger-post.html

My Net Questions

www.mmryan.net/reference/mynetquestions.html

Great resource for css templates


Stu Nicholls, css play

Fluid Layout » 02-02-2009
A Fluid layout with max/min width, header/footer and all columns reach footer, NO images.
3 columns - 7 variations - 04-02-2009
A set of 7 variations on the 3 column layout theme. All equal heights with no images.

pure css menu.com

pure css menu.com

maxdesign, a.k.a Listamatic


maxdesign, a.k.a Listamatic

dynamic drive

www.dynamicdrive.com/style/layouts/category/C13/
www.dynamicdrive.com/style/layouts/item/css-liquid-layout-33-fluid-fluid-fluid/
These are free and use is encouraged

css styles _ mikeryan blog


note: this does not work with 'chrome'

h1 Heading HEADING

h2 Heading HEADING

h3 Heading HEADING

h4 Heading HEADING

h5 Heading HEADING
h6 Heading HEADING

this is a paragraph, normal text

this is a link

import external css + js docs solved

Let's see if "@import", placed in the template's head section, works for referencing external style sheets. If it does, then this text should be red, italic and on a very light gray background, by applying the "bloggertest" class or id.

20110328, VERY ODD:


www.w3.org/TR/CSS2/cascade.html#value-def-inherit, Assigning property values, Cascading, and Inheritance; point 6.3 _ the @import rule

divpractice2, lists


html_iframe import1


http://www.mmryan.net/navbarARCHIVIO.html

See colors used

html_iframe import 2



http://www.mmryan.net/test/XXXgoogle097b2bf42e2a4bf7.html

iframe import test 3

iframe
http://www.mmryan.net/gabbia/expander-textblock-table-inline.html

html code gabbia simple

css styles 1

from SPEAKING IN STYLES

These elements were used for the CLL newsstand page. see the css here.


Box-shadow,Transition, Border-radius

websites of interest

architecture


design, art, musicians, comix

http://www.fioravanti.eu/
http://www.sergiocalatroni.com/Pages/02-Home/home.html
http://www.produzioneprivata.it/en/index.asp
http://danielclowes.com/
http://www.poissonrouge.com/
http://www.zefrank.com/

Tim Burton's "Vincent"




tough translations (table)

A collection of a few of my least favorite words to translate from Italian to English. note: the Italian words are linked to WordReference translations



ItalianEnglish .............................. : edit :
impianto
  1. 1. installation
  2. 2. setting up , establishment
  3. 3. equipment, plant, system, fitting
  4. 4. structure, framework
  5. 5. medical implant
allestimento
  1. 1. preparation, organization; mounting; fitting (?! negozio)
  2. 2. staging, mounting, production
sfumatura
  1. 1. color gradations
  2. 2. tone, shade, hue, nuance
  3. 3. gradient
palinsesto
  1. 1. palimpsest (no!)
  2. 2. TV schedule
  3. AL: translation goes here
istanza
  1. 1. request, motion
  2. 2. petition
  3. 3. need, demand
  4. AL: translation goes here
ludico
  1. 1. play, playful, in a playful manner
  2. 1b. play-, e.g.: play-based, play-oriented
  3. 2. recreational
  4. AL: translation goes here
segno
  1. WORD
  2. WORD
  3. WORD
prova
  1. 1. test

and a few others:  


divpracticeDISASTER

one-1 _ orig:".colmask", often called "container"
one-2 _ orig:".colmid"
one-3 _ orig:".colleft"

one-3a-left _ orig:""


one-3b-center _ orig:""


one-3.c-right _ orig:""






2.1_
2.2_
2.3_
2.3.a_left (2)

2.3.b_center (1)

2.3.c_right (3)





http://matthewjamestaylor.com/blog/perfect-3-column.htm

js_expander

jwinblad.com/webprogramming/expander/expander.php


For Most Cases:



For Most Cases:



For Most Cases:
see uses


got to bottomm aitfFIREtest

testsfumatura

see html for css code: I haz "gradient".

http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/

http://www.blogger.com/html?blogID=4157456188338405879



also very interesting: http://www.felgall.com/gradient.htm


the following site uses images, but generates them for you:


see 'edit' for code. http://www.roundedcornr.com/rc2.php


this code uses proprietary MS code

http://www.dreamincode.net/forums/topic/35875-creating-a-color-gradient-using-htmlcss/ So I was digging around the web some more and found out that the script I have shown above is proprietary to Microsoft and most likely won't work in other browsers. Oh well, looks like I will be using an image to produce this fade effect. (Posted 22 October 2007)

aitfFIREtest


Expanding Table Test:


bottm link to mmRyan
 


the next time 'round

item1
item2
item3
item4




table 2 item1
table 2 item2
table 2 item3
table 2 item4



the tip of someone's iceberg. dr.Heckle and Mr. Mike.
back in whack

css _ lists in pure css

Sites

Examples

dom css: style.display.visibility

DOM CSS property, style.display.visibility.
This should be invisible, but take up space.


Projects

Designing with JavaScript

Chapter 1
Chapter 2
Chapter 3
...

Hypercubes
...

...








Special html characters _ 420 wide

 
  • commonly used characters
  • HTML ISO-8859-1 Reference
  • ISO-8859-1
  • Reserved Characters in HTML
  • ISO 8859-1 Symbols
  • ISO 8859-1 Characters
  • Math Symbols Supported by HTML

 
commonly used characters
. . . . . . . . . . . . . (back to top)


CharacterEntity NumberEntity NameDescription
 &#160;&nbsp;non-breaking space
"&#34;&quot;quotation mark
'&#39;&apos; (does not work in IE) apostrophe
&&#38;&amp;ampersand
&#236;&infin;infinity, a.k.a. lemniscate
<&#60;&lt;less-than
>&#62;&gt;greater-than

from "http://www.w3schools.com/tags/ref_entities.asp" but for some reason, it won't allow a direct link.
see also: http://codex.wordpress.org/Fun_Character_Entities



HTML ISO-8859-1 Reference . . . . . . . . . . . . . (back to top)

Modern browsers supports several character-sets:


ISO-8859-1 . . . . . . . . . . . . . (back to top)

ISO-8859-1 is the default character set in most browsers.

The first 128 characters of ISO-8859-1 is the original ASCII character-set (the numbers from 0-9, the uppercase and lowercase English alphabet, and some special characters).

The higher part of ISO-8859-1 (codes from 160-255) contains the characters used in Western European countries and some commonly used special characters.

Entities are used to implement reserved characters or to express characters that cannot easily be entered with the keyboard.


Reserved Characters in HTML . . . . . . . . . . . . . (back to top)

Some characters are reserved in HTML and XHTML. For example, you cannot use the greater than or less than signs within your text because the browser could mistake them for markup.

HTML and XHTML processors must support the five special characters listed in the table below:

CharacterEntity NumberEntity NameDescription
"&#34;&quot;quotation mark
'&#39;&apos; (does not work in IE)apostrophe 
&&#38;&amp;ampersand
<&#60;&lt;less-than
>&#62;&gt;greater-than

Note: Entity names are case sensitive!


ISO 8859-1 Symbols . . . . . . . . . . . . . (back to top)
CharacterEntity NumberEntity NameDescription
 &#160;&nbsp;non-breaking space
¡&#161;&iexcl;inverted exclamation mark
¢&#162;&cent;cent
£&#163;&pound;pound
¤&#164;&curren;currency
¥&#165;&yen;yen
¦&#166;&brvbar;broken vertical bar
§&#167;&sect;section
¨&#168;&uml;spacing diaeresis
©&#169;&copy;copyright
ª&#170;&ordf;feminine ordinal indicator
«&#171;&laquo;angle quotation mark (left)
¬&#172;&not;negation
­&#173;&shy;soft hyphen
®&#174;&reg;registered trademark
¯&#175;&macr;spacing macron
°&#176;&deg;degree
±&#177;&plusmn;plus-or-minus 
²&#178;&sup2;superscript 2
³&#179;&sup3;superscript 3
´&#180;&acute;spacing acute
µ&#181;&micro;micro
&#182;&para;paragraph
&#183;&middot;middle dot
¸&#184;&cedil;spacing cedilla
¹&#185;&sup1;superscript 1
º&#186;&ordm;masculine ordinal indicator
»&#187;&raquo;angle quotation mark (right)
¼&#188;&frac14;fraction 1/4
½&#189;&frac12;fraction 1/2
¾&#190;&frac34;fraction 3/4
¿&#191;&iquest;inverted question mark
×&#215;&times;multiplication
÷&#247;&divide;division
ISO 8859-1 Characters . . . . . . . . . . . . . (back to top)
CharacterEntity NumberEntity NameDescription
À&#192;&Agrave;capital a, grave accent
Á&#193;&Aacute;capital a, acute accent
Â&#194;&Acirc;capital a, circumflex accent
Ã&#195;&Atilde;capital a, tilde
Ä&#196;&Auml;capital a, umlaut mark
Å&#197;&Aring;capital a, ring
Æ&#198;&AElig;capital ae
Ç&#199;&Ccedil;capital c, cedilla
È&#200;&Egrave;capital e, grave accent
É&#201;&Eacute;capital e, acute accent
Ê&#202;&Ecirc;capital e, circumflex accent
Ë&#203;&Euml;capital e, umlaut mark
Ì&#204;&Igrave;capital i, grave accent
Í&#205;&Iacute;capital i, acute accent
Î&#206;&Icirc;capital i, circumflex accent
Ï&#207;&Iuml;capital i, umlaut mark
Ð&#208;&ETH;capital eth, Icelandic
Ñ&#209;&Ntilde;capital n, tilde
Ò&#210;&Ograve;capital o, grave accent
Ó&#211;&Oacute;capital o, acute accent
Ô&#212;&Ocirc;capital o, circumflex accent
Õ&#213;&Otilde;capital o, tilde
Ö&#214;&Ouml;capital o, umlaut mark
Ø&#216;&Oslash;capital o, slash
Ù&#217;&Ugrave;capital u, grave accent
Ú&#218;&Uacute;capital u, acute accent
Û&#219;&Ucirc;capital u, circumflex accent
Ü&#220;&Uuml;capital u, umlaut mark
Ý&#221;&Yacute;capital y, acute accent
Þ&#222;&THORN;capital THORN, Icelandic
ß&#223;&szlig;small sharp s, German
à&#224;&agrave;small a, grave accent
á&#225;&aacute;small a, acute accent
â&#226;&acirc;small a, circumflex accent
ã&#227;&atilde;small a, tilde
ä&#228;&auml;small a, umlaut mark
å&#229;&aring;small a, ring
æ&#230;&aelig;small ae
ç&#231;&ccedil;small c, cedilla
è&#232;&egrave;small e, grave accent
é&#233;&eacute;small e, acute accent
ê&#234;&ecirc;small e, circumflex accent
ë&#235;&euml;small e, umlaut mark
ì&#236;&igrave;small i, grave accent
í&#237;&iacute;small i, acute accent
î&#238;&icirc;small i, circumflex accent
ï&#239;&iuml;small i, umlaut mark
ð&#240;&eth;small eth, Icelandic
ñ&#241;&ntilde;small n, tilde
ò&#242;&ograve;small o, grave accent
ó&#243;&oacute;small o, acute accent
ô&#244;&ocirc;small o, circumflex accent
õ&#245;&otilde;small o, tilde
ö&#246;&ouml;small o, umlaut mark
ø&#248;&oslash;small o, slash
ù&#249;&ugrave;small u, grave accent
ú&#250;&uacute;small u, acute accent
û&#251;&ucirc;small u, circumflex accent
ü&#252;&uuml;small u, umlaut mark
ý&#253;&yacute;small y, acute accent
þ&#254;&thorn;small thorn, Icelandic
ÿ&#255;&yuml;small y, umlaut mark

Math Symbols Supported by HTML







CharacterEntity NumberEntity NameDescription
&#8704;&forall;for all
&#8706;&part;part
&#8707;&exist;exists
&#8709;&empty;empty
&#8711;&nabla;nabla
&#8712;&isin;isin
&#8713;&notin;notin
&#8715;&ni;ni
&#8719;&prod;prod
&#8721;&sum;sum
&#8722;&minus;minus
&#8727;&lowast;lowast
&#8730;&radic;square root
&#8733;&prop;proportional to
&#8734;&infin;infinity
&#8736;&ang;angle
&#8743;&and;and
&#8744;&or;or
&#8745;&cap;cap
&#8746;&cup;cup
&#8747;&int;integral
&#8756;&there4;therefore
&#8764;&sim;similar to
&#8773;&cong;congruent to
&#8776;&asymp;almost equal
&#8800;&ne;not equal
&#8801;&equiv;equivalent
&#8804;&le;less or equal
&#8805;&ge;greater or equal
&#8834;&sub;subset of
&#8835;&sup;superset of
&#8836;&nsub;not subset of
&#8838;&sube;subset or equal
&#8839;&supe;superset or equal
&#8853;&oplus;circled plus
&#8855;&otimes;cirled times
&#8869;&perp;perpendicular
&#8901;&sdot;dot operator

htmliso-8859-1referenceoriginal

HTML ISO-8859-1 Reference
from "http://www.w3schools.com/tags/ref_entities.asp" but for some reason, it won't allow a direct link.





HTML ISO-8859-1 Reference





Modern browsers supports several character-sets:





ISO-8859-1


ISO-8859-1 is the default character set in most browsers.


The first 128 characters of ISO-8859-1 is the original ASCII character-set (the numbers from 0-9, the uppercase and lowercase
English alphabet, and some
special characters).


The higher part of ISO-8859-1 (codes from 160-255) contains
the characters used in Western European countries and some commonly used special
characters.


Entities are used to implement reserved characters or to express characters that cannot
easily be entered with the keyboard.






Reserved Characters in HTML


Some characters are reserved in HTML and XHTML. For example, you cannot use
the greater than or less than signs within your text because the browser could
mistake them for markup.


HTML and XHTML processors must support the five special characters listed in
the table below:














































Character Entity Number Entity Name Description
" &#34; &quot; quotation mark
' &#39; &apos; (does not work in IE) apostrophe 
& &#38; &amp; ampersand
< &#60; &lt; less-than
> &#62; &gt; greater-than


Note: Entity names are case sensitive!






ISO 8859-1 Symbols




















































































































































































































































Character Entity Number Entity Name Description
  &#160; &nbsp; non-breaking space
¡ &#161; &iexcl; inverted exclamation mark
¢ &#162; &cent; cent
£ &#163; &pound; pound
¤ &#164; &curren; currency
¥ &#165; &yen; yen
¦ &#166; &brvbar; broken vertical bar
§ &#167; &sect; section
¨ &#168; &uml; spacing diaeresis
© &#169; &copy; copyright
ª &#170; &ordf; feminine ordinal indicator
« &#171; &laquo; angle quotation mark (left)
¬ &#172; &not; negation
­ &#173; &shy; soft hyphen
® &#174; &reg; registered trademark
¯ &#175; &macr; spacing macron
° &#176; &deg; degree
± &#177; &plusmn; plus-or-minus 
² &#178; &sup2; superscript 2
³ &#179; &sup3; superscript 3
´ &#180; &acute; spacing acute
µ &#181; &micro; micro
&#182; &para; paragraph
· &#183; &middot; middle dot
¸ &#184; &cedil; spacing cedilla
¹ &#185; &sup1; superscript 1
º &#186; &ordm; masculine ordinal indicator
» &#187; &raquo; angle quotation mark (right)
¼ &#188; &frac14; fraction 1/4
½ &#189; &frac12; fraction 1/2
¾ &#190; &frac34; fraction 3/4
¿ &#191; &iquest; inverted question mark
× &#215; &times; multiplication
÷ &#247; &divide; division


ISO 8859-1 Characters




















































































































































































































































































































































































































































Character Entity Number Entity Name Description
À &#192; &Agrave; capital a, grave accent
Á &#193; &Aacute; capital a, acute accent
 &#194; &Acirc; capital a, circumflex accent
à &#195; &Atilde; capital a, tilde
Ä &#196; &Auml; capital a, umlaut mark
Å &#197; &Aring; capital a, ring
Æ &#198; &AElig; capital ae
Ç &#199; &Ccedil; capital c, cedilla
È &#200; &Egrave; capital e, grave accent
É &#201; &Eacute; capital e, acute accent
Ê &#202; &Ecirc; capital e, circumflex accent
Ë &#203; &Euml; capital e, umlaut mark
Ì &#204; &Igrave; capital i, grave accent
Í &#205; &Iacute; capital i, acute accent
Î &#206; &Icirc; capital i, circumflex accent
Ï &#207; &Iuml; capital i, umlaut mark
Ð &#208; &ETH; capital eth, Icelandic
Ñ &#209; &Ntilde; capital n, tilde
Ò &#210; &Ograve; capital o, grave accent
Ó &#211; &Oacute; capital o, acute accent
Ô &#212; &Ocirc; capital o, circumflex accent
Õ &#213; &Otilde; capital o, tilde
Ö &#214; &Ouml; capital o, umlaut mark
Ø &#216; &Oslash; capital o, slash
Ù &#217; &Ugrave; capital u, grave accent
Ú &#218; &Uacute; capital u, acute accent
Û &#219; &Ucirc; capital u, circumflex accent
Ü &#220; &Uuml; capital u, umlaut mark
Ý &#221; &Yacute; capital y, acute accent
Þ &#222; &THORN; capital THORN, Icelandic
ß &#223; &szlig; small sharp s, German
à &#224; &agrave; small a, grave accent
á &#225; &aacute; small a, acute accent
â &#226; &acirc; small a, circumflex accent
ã &#227; &atilde; small a, tilde
ä &#228; &auml; small a, umlaut mark
å &#229; &aring; small a, ring
æ &#230; &aelig; small ae
ç &#231; &ccedil; small c, cedilla
è &#232; &egrave; small e, grave accent
é &#233; &eacute; small e, acute accent
ê &#234; &ecirc; small e, circumflex accent
ë &#235; &euml; small e, umlaut mark
ì &#236; &igrave; small i, grave accent
í &#237; &iacute; small i, acute accent
î &#238; &icirc; small i, circumflex accent
ï &#239; &iuml; small i, umlaut mark
ð &#240; &eth; small eth, Icelandic
ñ &#241; &ntilde; small n, tilde
ò &#242; &ograve; small o, grave accent
ó &#243; &oacute; small o, acute accent
ô &#244; &ocirc; small o, circumflex accent
õ &#245; &otilde; small o, tilde
ö &#246; &ouml; small o, umlaut mark
ø &#248; &oslash; small o, slash
ù &#249; &ugrave; small u, grave accent
ú &#250; &uacute; small u, acute accent
û &#251; &ucirc; small u, circumflex accent
ü &#252; &uuml; small u, umlaut mark
ý &#253; &yacute; small y, acute accent
þ &#254; &thorn; small thorn, Icelandic
ÿ &#255; &yuml; small y, umlaut mark



attitude

attitude is not 'attitude'.

F*** hyperbole.

online dictionaries and translators

Devoto-oli
www.il-devoto-oli.it
www.pianetascuola.it/magazine/iniziative/articolo/vocabolari-digitali
Da quest’anno i più importanti vocabolari Le Monnier sono disponibili anche sul web!

Per la consultazione online è necessario essere in possesso del codice di accesso stampato all’interno della copia cartacea.

il DEVOTO-OLI 2011
Per attivare la versione online è necessario cliccare qui.
La consultazione è valida per 12 mesi!
Se sei un docente e hai ricevuto una copia saggio, clicca qui.

wordpress

wordpress.org   and   wordpress.com

Customizing CSS requires an upgrade that costs $14.95 / yr. http://en.support.wordpress.com/custom-css/

WordPress is web software that is downloaded to your computer and can be used to create websites and blogs.

The core software is built by hundreds of community volunteers, and when you’re ready for more there are thousands of plugins and themes available.

There are hundreds of thousands of web hosts out there, the vast majority of which meet the WordPress minimum requirements.See our website for suggestions (but HM covers it).

If you don’t need the flexibility of a full web host, you may consider getting a free blog on WordPress.com.

To run WordPress your host just needs a couple of things:

  • PHP version 4.3 or greater
  • MySQL version 4.1.2 or greater

That's really it. We recommend Apache or Nginx as the most robust and featureful server for running WordPress, but any server that supports PHP and MySQL will do. That said, we can't test every possible environment and each of the hosts on our hosting page supports the above and more with no problems. (see HM features; they offer a WordPress button in the cpanel)

Not required, but recommended for better security

Hosting is more secure when PHP applications, like WordPress, are run using your account’s username instead of the server’s default shared username. The most common way nowadays for hosting companies to do this is using suPHP. Just ask your potential host if they run suPHP or something similar.

A Little History

WordPress was born out of a desire for an elegant, well-architectured personal publishing system built on PHP and MySQL and licensed under the GPLv2 (or later). It is the official successor of b2/cafelog. WordPress is fresh software, but its roots and development go back to 2001. It is a mature and stable product. We hope by focusing on user experience and web standards we can create a tool different from anything else out there.

For a bit more about WordPress' history check out the WordPress Wikipedia page or this page on our own Codex.

WordPress started in 2003 with a single bit of code to enhance the typography of everyday writing and with fewer users than you can count on your fingers and toes. Since then it has grown to be the largest self-hosted blogging tool in the world, used on millions of sites and seen by tens of millions of people every day.

Everything you see here, from the documentation to the code itself, was created by and for the community. WordPress is an Open Source project, which means there are hundreds of people all over the world working on it.