Sample CSS code - BarryMiller.com.au
advertisement
To change Cell Background color & Cell Text Color when Mouse Over:Not a link
<style>
<!-td.menuon { background-color: #000000; color: #FFFFFF; }
td.menuoff { background-color: #CCCCFF; color: #000000; }
}
-->
</style>
In the Cell add:<td class="menuoff" onmouseover="className='menuon';" onmouseout="className='menuoff';">
Or
<style>
<!-td.nav:hover {color:white; background-color: #999999;}
-->
</style>
In the Cell add:class="nav"
Cell with links
<style>
<!-a {width:100%;height:100%;}
a {color:white;}
a:hover {color: yellow; background-color: gray}
a {text-decoration:none;}
-->
</style>
H1:hover:first-letter {color: white; background: black;}
<style type="text/css">
body {margin:10px}
a {width:100%;height:100%;}
a {color:black;}
a:hover {color: yellow; background-color:gray;}
a {text-decoration:none;}
</style>
HTML
<BODY BACKGROUND="../graphics/thistle.gif" BGPROPERTIES=FIXED>
BGPROPERTIES creates a "watermark" on the page, a background image which does not scroll with the rest of
the page.
<BODY
TOPMARGIN=0 LEFTMARGIN=0 MARGINHEIGHT=0 MARGINWIDTH=0>
TOPMARGIN and LEFTMARGIN establish margins in MSIE. MARGINHEIGHT and MARGINWIDTH establish
margins in Netscape.
<BODY onLoad="alert('Hello There!'); alert('Howdy!')">
<SCRIPT TYPE="text/javascript">
function init()
{
alert('Hello There!');
alert('Howdy!');
}
//-->
</SCRIPT>
<BODY onUnload="alert('bye now!')">
<BODY
onFocus="window.status='focused'"
onBlur="window.status='not focused'">
onFocus is the event handler for when the body of the page receives the focus. onBlur is the event handler for when the body loses the
focus.
<TITLE> states the title of the document. <TITLE> always goes in the <HEAD> section.
<META HTTP-EQUIV="REFRESH" CONTENT="5">
This tells the browser to refresh the page (HTTP-EQUIV="REFRESH"), and that it should do so every five seconds
(CONTENT="5").
<META HTTP-EQUIV="Refresh" CONTENT="5; URL=mypage.html">
Auto refresh page then forward to mypage.html.
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
To ensure that the browser does not cache a particular page use the following code.
META for Search Engines
When search engines index and display information from your web page, they use two types of <META ...> tags:
KEYWORDS and DESCRIPTION.
<META NAME=KEYWORDS CONTENT="telephones interquartz nec panasonic">
If the search words are in the keywords, the page gets a higher score.
<META NAME=DESCRIPTION CONTENT="Alpine provides Telecommunication Services, PABX
&amp; Keyphone sales, installation, service, Project Management,
Telecommunications Consultants, Data &amp; Voice cabling.">...">
Designates the text to display when the search engine returns information about
your page.
<div style="border: red 4px dashed; border-bottom: blue 4px solid; border-top-style: ridge;">text</div>
border-width: thin;
border-width: medium;
border-width: thick;
border-style: solid;
border-style: dashed;
border-style: dotted;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
ADDING A CUSTOMIZED CURSOR
crosshair
hand
pointer
Cross browser
move
text
wait
help
n-resize
<html>
<head>
<style type="text/css">
.xlink {cursor:crosshair}
.hlink{cursor:help}
</style>
</head>
ne-resize
e-resize
se-resize
s-resize
sw-resize
w-resize
nw-resize
progress
<body>
<b>
<a href="mypage.htm" class="xlink">CROSS LINK</a>
<br>
<a href="mypage.htm" class="hlink">HELP LINK</a>
</b>
</body>
</html>
not-allowed
no-drop
vertical-text
all-scroll
col-resize
row-resize
cursor:url(uri)
<html>
<head>
<style type="text/css">
.xlink A{cursor:crosshair}
.hlink A{cursor:help}
</style>
</head>
<body>
<b>
<span class="xlink">
<a href="mypage.htm">CROSS LINK 1</a><br>
<a href="mypage.htm">CROSS LINK 2</a><br>
<a href="mypage.htm">CROSS LINK 3</a><br>
</span>
<br>
<span class="hlink">
<a href="mypage.htm">HELP LINK 1</a><br>
<a href="mypage.htm">HELP LINK 2</a><br>
<a href="mypage.htm">HELP LINK 3</a><br>
</span>
</b>
</body>
</html>
CSS Margins
Body { margin: Top Right, Bottom, Left}
If you want a page to have no margin, you could use:
body { margin: 0px 0px 0px 0px; }
If you want a page to have a 15 pixels on top, 10 on the left, and the right and bottom automatically set, you
could use:
body { margin: 15px auto auto 10px; }
If you wanted a 10% margin at the top and no margin on the other sides, you could use:
body { margin: 10% 0px 0px 0px; }
You can also set each of the four margin values individually, with the properties margin-top, margin-right,
margin-bottom, and margin-left, respectively. The style above with the 10% margin could instead be written:
body { margin-top: 10%; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; }
Remember that the margin property may apply to more than just a body selector.
Add A Floating Layer to Your Own Pages.
http://www.echoecho.com/toolfloatinglayer.htm
A Menu Rollover Effect with CSS
<div id="list-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Solutions</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
define the width
#list-menu {width: 132px; /* this width value is also effected by the padding we will later set on the links. */}
remove the default bullets, & setting the margin and padding to zero
#list-menu ul {margin: 0; padding: 0;list-style-type: none;}
define text styles
#list-menu {font-family: verdana, arial, sanf-serif;font-size: 12px;}
create a little bit of space between the list items
#list-menu li {margin: 2px 0 0;}
create styles for the actual links
#list-menu a {display: block;width:120px;padding: 2px 2px 2px 10px;border: 1px solid #000000;
background: #dcdcdc;text-decoration: none; /*lets remove the link underlines*/}
Set active and hover states color
#list-menu a:link, #list-menu a:active, #list-menu a:visited {color: #000000;}
create the rollover-effect
#list-menu a:hover {border: 1px solid #000000;background: #333333;color: #ffffff;}
add a background image on hover
#list-menu a:hover {border: 1px solid #000000;background: #333333 url(‘images/background1.gif’);color:
ffffff;}
As a last point, adding onfocus="this.blur()" into each link code will get rid of that annoying
dotted line which appears when the link is clicked.
<a href="#" onfocus="this.blur()">
Show a PDF file in a HTML page
<embed src="NAME OF FILE.pdf" width="500" height="375">.
CSS floating menu.
Also known as "fixed menus" and "hovering menus", floating menus stay in a fixed position when you scroll
the page. They appear to "float" on top of the page as you scroll.
IE 7 works
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<style>
div.floating-menu {position:fixed;background:#fff4c8;border:1px solid #ffcc00;width:150px;z-index:100;}
div.floating-menu a, div.floating-menu h3 {display:block;margin:0 0.5em;}
</style>
<div class="floating-menu">
<h3>Floating Menu</h3>
<a href="http://www.quackit.com/css/">CSS</a>
<a href="http://www.quackit.com/html/">HTML</a>
<a href="http://www.quackit.com/javascript/">JavaScript</a>
<a href="http://www.quackit.com/coldfusion/">ColdFusion</a>
<a href="http://www.quackit.com/myspace/codes/">MySpace Codes</a>
</div>
div.cssfloatmenu3 {position:fixed; top:500px; left:40px}
<div class = "cssfloatmenu3" id="list-menu2" >
<ul>
<li >
<p align="left">
<a href="Index.htm#HomeTop">Return Home</a>
</li>
</ul>
</div>
Relative Positioning
A relative positioned element is positioned relative to its normal position.
h2.pos_top {position:relative;top:-50px;}
Absolute Positioning
An absolute position element is positioned relative to the first parent element that has a position other than
static. If no such element is found, the containing block is <html>:
h2 {position:absolute;left:100px;top:150px;}
Overlapping Elements
When elements are positioned outside the normal flow, they can overlap other elements.
Img {position:absolute;left:0px;top:0px;z-index:-1}
![[#PALLADIO-222] Automatically deriving the optimization problem](http://s3.studylib.net/store/data/007480371_1-e23cf3b38fdfe320514260fd192de951-300x300.png)
