CSS Menus

http://www.cssplay.co.uk/

Menu one

A simple change of border style on :hover.

Menu two
A border style to look like a button.

Menu three
A neon glow menu.

Menu four
A right border change on :hover.

Menu five
Text movement on :hover.

Menu six
Border art to indicate the link on :hover.

Menu seven
Additional link text on :hover.

Menu nine
A shadow added on :hover.

Menu ten
Indented text on :hover.

The Proposal of Information Architecture

SADAH website redesign project

Online Tutorial

Creating new documents

Adding structure to text

Placing images on the page

Creating links in Dreamweaver

CSS Menu Maker

CSS Menu Maker



http://cssmenumaker.com/

Change menu-image

ul.nav {
list-style: none;
border-top: 0px solid #666;
margin-bottom: 15px;
color:#CC66CC;
}

ul.nav li {
border-bottom: 0px solid #666;
        background-image: url(images/menu-bg.jpg);
        color:#CC66CC;
}

ul.nav a, ul.nav a:visited
padding: 5px 5px 5px 15px;
display: block;
width: 160px;
text-decoration: none;
color:#CC66CC;
}

ul.nav a:hover, ul.nav a:active, ul.nav a:focus
background-image: url(images/menu-bg-1.jpg);
color: #FFF;
}


--> menu-bg.jpg

--> menu-bg-1.jpg

CSS Box Modle / Padding

CSS Box Modle / Padding

• Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent
• Border - A border that goes around the padding and content. The border is affected by the background color of the box
• Padding - Clears an area around the content. The padding is affected by the background color of the box
• Content - The content of the box, where text and images appear

Padding

The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.

The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.

Possible Values

Value	Description
length	Defines a fixed padding (in pixels, pt, em, etc.)
%	Defines a padding in % of the containing element

The padding property can have from one to four values.

• padding:25px 50px 75px 100px;
• top padding is 25px
• right padding is 50px
• bottom padding is 75px
• left padding is 100px
• padding:25px 50px 75px;
• top padding is 25px
• right and left paddings are 50px
• bottom padding is 75px
• padding:25px 50px;
• top and bottom paddings are 25px
• right and left paddings are 50px
• padding:25px;
• all four paddings are 25px

Resources from "http://www.w3schools.com/css/css_padding.asp"

JMU SADAH

Web Design: SADAH Flowchart

Information Architecture

Sarah P Davis' blog: Flow Chart: www.kc

JMU SADAH Flow Chart

Bloggin' Out: JMU SADAH Flow Chart

Museums & Galleries

MMK Frankfurt am Main | Museum für Moderne Kunst

bauhaus-archiv museum of design

Vitra Design Museum_Germany

010101 : Art in Technological Times

The Chicago Athenaeum

Welcome to the British Museum

Tate Online: British and international modern and contemporary art

The National Gallery, London

db artmag - all the news on Deutsche Bank Art / db artmag - alle Infos zur Kunst der Deutschen Bank

Deutsche Guggenheim_Berlin

Museum of London - Home

Royal College of Art_Show

welcome to Musée d'Orsay (english version)

Museen Basel_list

Type Museum

Typemuseum

National Museum of Science and Technology

MoCo Tokyo - Modern contemporary design & architecture

MUSEUM INFORMATION JAPAN

ICC

Cooper-Hewitt, National Design Museum | Home

National Academy Museum and School of Fine Arts

Uffizi / Polo Museale Fiorentino

The State Hermitage Museum

Museo del Prado

Fine Arts Museums of San Francisco - de Young - Legion of Honor

Harvard University Art Museums

MIT MUSEUM

Peabody Museum / Yale University

U-M | Museum of Art (UMMA)

Indiana University Art Museum

Princeton University Art Museum

Polo Museale Fiorentino (Uffizi)

Cameron Art Museum - Home

Harvard Art Museum / Welcome

Louisiana Museum of Modern Art

Science Museum

Galerie ADLER, Frankfurt am Main - New York

Punctuation Names

ASCII Pronunciation Rules for Programmers

	Common Names	Rare Names
!	exclamation mark bang pling excl not shriek	factorial exclam smash cuss boing yell wow hey wham eureka spark-spot soldier control
"	quotation marks quote double quote	literal mark double-glitch dieresis dirk rabbit-ears double prime
#	hash pound sign number sign pound sharp crunch hex mesh	grid crosshatch octothorpe flash square pig-pen tictactoe scratchmark thud thump splat
&	ampersand amp amper and and sign	address reference andpersand bitand background pretzel
'	apostrophe single quote quote	prime glitch tick irk pop spark closing single quotation mark acute accent
( )	opening / closing parenthesisleft / right paren left / right parenthesis left / right open / close open / close paren paren / thesis	so/already lparen/rparen opening/closing parenthesis opening/closing round bracket left/right round bracket wax/wane parenthisey/unparenthisey left/right ear
[ ]	opening / closing bracketleft / right bracket left / right square bracket bracket / unbracket	square / unsquare u turn / u turn back
{  }	opening / closing brace open / close brace left / right brace left / right squiggly left / right squiggly bracket/brace	brace / unbrace curly / uncurly leftit / rytit left / right squirrelly embrace / bracelet
< >	less / greater than bra / ket left / right angle left / right angle bracket left / right broket	from / into (or towards) read from / write to suck / blow comes-from / gozinta in / out crunch / zap tic / tac angle / right angle
*	asteriskstar splat	wildcard gear dingle mult spider aster times twinkle glob Nathan Hale
-	dash hyphen minus	worm option dak bithorpe
.	perioddot point decimal point	radix point full stop spot
/	slash stroke slant forward slash	diagonal solidus over slak
\	backslash hack whack escape reverse slash slosh backslant backwhack	bash reverse slant reversed virgule backslat
:	colon	dots two-spot
;	semicolon semi	weenie hybrid pit-thwong
=	equalsgets takes	quadrathorpe half-mesh
^	circumflexcaret hat control uparrow	xor sign chevron shark (or shark-fin) to the fang pointer
_	underline underscore underbar under	score backarrow skid flatworm
`	grave accent backquote left quote left single quote open quote grave	backprime backspark unapostrophe birk blugle back tick back glitch push opening single quote quasiquote
|	bar or or-bar v-bar pipe vertical bar	vertical line gozinta thru pipesinta spike
~	tilde squiggle twiddle not	approx wiggle swung dash enyay sqiggle (sic)

Web Font Choice

Web Font Choice {html&css: p. 277~278} 
www.fontex.org
www.fontsquirrel.com
www.openfontlibrary.org
------------------------------------
www.google.com/webfonts

A Designer's guide to Webfonts:
http://www.fontshop.com/education/pdf/webfonts.pdf
------------------------------------
> Example
Textbook: Chap.12 (p.277)

CSS:

@font-face {
    font-family: 'ChunkFiveRegular';
    src: url('fonts/chunkfive.eot');}
  
 h1, h2 {
    font-family: ChunkFiveRegular, Georgia, serif;}

HTML:

 <h1>Briards</h1>

  <p>The brie is a large breed of dog traditionally used as a herder and guardian of sheep.</p>
<h2>Breed History</h2>
  <p>The briard, which is believed to have originated in France, has been bred for centuries to herd and to protect sheep.</p>

How to size text using ems

My more recent article on A List Apart, How to Size Text in CSS, provides more up-to-date info on sizing text using ems.
Text for the screen is sized with CSS in terms of pixels, ems or keywords. As most of us know, sizing with pixels is easy: get your selector and give it a font-size – no more thought required. Sizing with keywords is more complicated and requires a few workarounds, but you’re in luck as the techniques are well documented. That leaves ems. At this point people often leg it. ‘Ems are too inconsistent,’ they say, ‘they’re too hard; they never work.’ Well that may be the received wisdom, but if ever the was a case of FUD then this is it. I will now attempt to show you how ems can be as quick and easy to use as pixels.

Why ems?

If the world were an ideal place, we’d all use pixels. But it’s not, we have the broken browser to contend with. IE/Win will not allow readers to resize text that has been sized in pixels. Like it or not, your readers will want to resize text at some point. Perhaps they are short-sighted, doing a presentation, using a ridiculously high resolution laptop or simply have tired eyes. So unless you know (not think) your audience won’t be using IE/Win or will never wish to resize their text then pixels are not yet a viable solution.
Keyword-based text sizing will allow all browsers to resize text so this is a possibility, but I don’t find it gives me the precision that pixels would give me. Using ems however, allows all browsers to resize text and also provides pixel-level precision and so they tend to be my unit of choice.

Get on with it

OK let’s dive into ems. I’ll show you, from scratch, how to size text in a document using ems. I’ll assume throughout that we are dealing with a browser set to ‘medium’ text. The default size for ‘medium’ text in all modern browsers is 16px. Our first step is to reduce this size for the entire document by setting body size to 62.5%:

BODY {font-size:62.5%}

This takes 16px down to 10px which I’m using purely because it’s a nice round number for example purposes – 10px text is too small for the real world. From now on it’s easy to think in pixels but still set sizes in terms of ems: 1em is 10px, 0.8em is 8px, 1.6em is 16px, etc. If you are laying out your document using CSS (which you are, right?) then you have probably used a few divs to group together elements. Apply text-size to these divs and your job is almost done. Consider a two column layout with header and footer:

<body>
<div id="navigation"> ... </div>
<div id="main_content"> ... </div>
<div id="side_bar"> ... </div>
<div id="footer"> ... </div>
</body>

#navigation {font-size:1em}
#main_content {font-size:1.2em}
#side_bar {font-size:1em}
#footer {font-size:0.9em}

So this would give us a document where text in the navigation and side bar is displayed at 10px, the main content is 12px and the footer is 9px. There now remains a few anomalies to sort out (you’d have to do this even if you were sizing in pixels). In Mozilla-based browsers, all heading elements in our aforementioned #main_content div will be displayed at 12px whether they are an H1 or an H6, whereas other browsers show the headings at different sizes as expected. Applying text-sizes to all headings will give consistency across browsers, for example:

H1 {font-size:2em}  /* displayed at 24px */
H2 {font-size:1.5em}  /* displayed at 18px */
H3 {font-size:1.25em}  /* displayed at 15px */
H4 {font-size:1em}  /* displayed at 12px */

A similar job needs to be done on forms and tables to force form controls and table cells to inherit the correct size (mainly to cater for IE/Win):

INPUT, SELECT, TH, TD {font-size:1em}

And so to the final tweak and the bit folks seem to find most tricky: dealing with nested elements. We’ve already touched upon it with our headers, but for now let’s look more closely at what’s going on. First of all we changed our body text to 10px; 62.5% of its default size:

16 x 0.625 = 10

Then we said our main content should be displayed at 12px. If we did nothing, the #main_content div would be displayed at 10px because it would inherit its size from the body element – its parent. This implies that we always size text relative to the parent element when using ems:

child pixels / parent pixels = child ems
12 / 10 = 1.2

Next we wanted our h1 heading to be 24px. The parent to our h1 is the main_content div which we know to be 12px in size. To get our headings to be 24px we need to double that so our ems are:

24 / 12 = 2

And so it goes on. Tricky stuff occurs where rules like this are applied:

#main_content LI {font-size:0.8333em}

This rule implies that all main content list items should be displayed at 10px. We use the same straight forward maths to achieve this:

10 / 12 = 0.8333

But what happens when one list contains another? It gets smaller. Why? Because our rule actually says that any list item in the #main_content div should 0.8333 times the size of its parent. So we need another rule to prevent this ‘inherited shrinkage’:

LI LI {font-size:1em}

This says that any list item inside another list item should be the same size as its parent (the other list item). I normally use a whole set of child selectors to prevent confusion during development:

LI LI, LI P, TD P, BLOCKQUOTE P {font-size:1em}

And that’s it. When sizing text in ems there’s really one rule to remember: size text relative to its parent and use this simple calculation to do so:

child pixels / parent pixels = child ems

Some helpful tools

Pixy’s list computed styles is fabulous bookmarklet which shows the cascade of calculated font sizes (or any other CSS property). Mozilla’s DOM Inspector is even more powerful as it allows you to see which CSS rules are affecting any given element in order of cascade priority so you can see why your text is or isn’t changing size when you expected it to.
If you’re finding the maths all a bit complex, try using Riddle’s handy em calculator.

And finally… what is an em?

Classically, an em (pronounced emm) is a typographer’s unit of horizontal spacing and is a sliding (relative) measure. One em is a distance equal to the text size. In 10 pixel type, an em is 10 pixels; in 18 pixel type it is 18 pixels. Thus 1em of padding is proportionately the same in any text size.

Update:

Make sure you read Patrick H Lauke’s comment on perfecting this method for IE5/Win.

Resource from: http://clagnut.com/blog/348/

CSS Font-Size: em vs. px vs. pt vs. percent

 Meet the Units

1. “Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
2. Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
3. Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
4. Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

So, What’s the Difference?

It’s easy to understand the difference between font-size units when you see them in action. Generally, 1em = 12pt = 16px = 100%. When using these font-sizes, let’s see what happens when you increase the base font size (using the body CSS selector) from 100% to 120%.

As you can see, both the em and percent units get larger as the base font-size increases, but pixels and points do not. It can be easy to set an absolute size for your text, but it’s much easier on your visitors to use scalable text that can display on any device or any machine. For this reason, the em and percent units are preferred for web document text.

Em vs. Percent

We’ve decided that point and pixel units are not necessarily best suited for web documents, which leaves us with the em and percent units. In theory, both the em and the percent units are identical, but in application, they actually have a few minor differences that are important to consider.
In the example above, we used the percent unit as our base font-size (on the body tag). If you change your base font-size from percent to ems (i.e. body { font-size: 1em; }), you probably won’t notice a difference. Let’s see what happens when “1em” is our body font-size, and when the client alters the “Text Size” setting of their browser (this is available in some browsers, such as Internet Explorer).

When the client’s browser text size is set to “medium,” there is no difference between ems and percent. When the setting is altered, however, the difference is quite large. On the “Smallest” setting, ems are much smaller than percent, and when on the “Largest” setting, it’s quite the opposite, with ems displaying much larger than percent. While some could argue that the em units are scaling as they are truly intended, in practical application, the em text scales too abruptly, with the smallest text becoming hardly legible on some client machines.

reference: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

How to Create HTML Email:

How to Create HTML Email:

Using Outlook:
http://www.emailaddressmanager.com/tips/html-email.html

Mac Mail:
http://www.ehow.com/how_5098289_create-html-email-mac-mail.html

Test HTML email:
http://www.emailonacid.com/
Email Test - Online Demo:
http://www.emailonacid.com/email-preview/online_demo/C7