CSS

http://www.libhound.com/web-development/user-interfaces/longest-list-of-css-frameworks

 

 

Layout tools

http://960.gs/

http://www.blueprintcss.org/

 

 

Made menus:

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

http://www.cssplay.co.uk/menus/pro_line_down_fly.html quite nice actually..

http://www.cssplay.co.uk/menus/skeleton3.html - cool ***

http://www.cssplay.co.uk/menus/elegant2.html - cool

http://www.cssplay.co.uk/menus/circular-sub.html coolest..

http://www.cssplay.co.uk/menus/three-up-two-down.html

http://www.cssplay.co.uk/menus/dd_valid_2.html

http://www.cssplay.co.uk/menus/flyout_4level.html

http://www.cssplay.co.uk/menus/flyoutt.html

 

Hover reactive buttons via CSS, generated by http://www.thesitewizard.com/

Save this into a new css file xxx.css

 

 #tswcssbuttons {
 width: 180px ;
 text-align: center ;
}
#tswcssbuttons ul {
 margin: 0 ;
 padding: 0 ;
 list-style: none ;
}
#tswcssbuttons li {
 margin: 0 ;
 padding: 0 ;
 display: block ;
 list-style: none ;
 font-family: Arial, Helvetica, sans-serif ;
}
#tswcssbuttons li a {
 color: #fff ;
 background-color: #000 ;
 border: 1px outset #f0f0f0 ;
 width: 180px ;
 text-decoration: none ;
 display: block ;
}
#tswcssbuttons li a:hover {
 color: #000 ;
 background-color: #c0c0c0 ;
}

 Add this into the target page HEAD section:

 

 <link rel="stylesheet" type="text/css" href="http://www.test.com/tswnavbar.css" />

 Add this into target web page:

 

 <div id="tswcssbuttons">
<ul>
<li><a href="button1">Button 1</a></li>
<li><a href="button2">Button 2</a></li>
<li><a href="button3">Button 3</a></li>
<li><a href="button4">Button 4</a></li>
<li><a href="button5">Button 5</a></li>
</ul>
</div>
 

 

 

http://www.tizag.com/cssT/index.php

 

Class separates one CSS set from another.

for example:

css

p: {fontsize: 100%;}

p.halffont {fontsize: 50%;}

---

In the CSS, a class selector is a name preceded by a full stop (.) and an ID selector is a name preceded by a hash character (#).

The HTML refers to the CSS by using the attributes id and class.

You can also apply a selector to a specific HTML element by simply stating the HTML selector first, so p.hereiam { whatever } will only be applied to paragraph elements that have the class 'hereiam'.

html
body
<p>Normal 100 percent text</p>
<p class = "halffont">Half size text<p>

#Layout p {
 	margin: 10px 5px 5px 0;

 

ID's are used to format one specific thing and are only supposed to be referenced once within a web page.

#Footer { 
 	clear: both;  
	width: 800px; 
	height: 5em; 
	background: transparent url(../images/footerBottom.gif) no-repeat bottom left; 
	text-align: center; 
	}
	#Footer .footerTop {
		width: 100%;
		background: transparent url(../images/footerTop.gif) no-repeat top left;
		display: block;
		height: 2em;
	}
  	#Footer p { 
		color: #fff;
		font-size: 1.1em;
		text-align: center;
		margin-top: -0.6em;
	}
  	#Footer a { 
	   	color: #fff; 
	   	text-decoration: none;
		}
	#Footer a:hover {
		color: #fff;
		text-decoration: underline;
	}