Difference between revisions of "CSS Examples"

From PeformIQ Upgrade
Jump to navigation Jump to search
Line 188: Line 188:
</pre>
</pre>


=Hover Manipulation=


<pre>
style type="text/css">
*
{
margin: 0;
padding: 0
}
body
{
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #ffffff;
}
p
{
margin-bottom: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: White;
}
h2
{
text-align: center;
font-weight: bold;
}
h3
{
color: White;
font-size: 14px;
font-weight: bold;
font-style: italic;
}
h4
{
color: Black;
font-size: 14px;
font-weight: normal;
}
p.CJoffset10
{
margin-left: 10px;
}
#CIoffset10
{
margin-left: 10px;
}
#page
{
width: auto;
min-height: 450px;
margin: 0 auto 0 auto;
padding: 0px;
background-color: #FFFFFF;
color: #1A1718;
text-align: center;
}
#container
{
margin: 0 auto;
min-height: 450px;
width: auto;
text-align: left;
}
#header
{
height: 170px;
background-position: 100% 0;
background-repeat: no-repeat;
z-index: 50;
}
#header #front
{
background-position: 100% 0;
background-repeat: no-repeat;
z-index: 50;
}
#header #logo
{
position: relative;
top: 30px;
left: 20px;
float: left
}
#header #slogan
{
position: relative;
top: 80px;
font-size: 20px;
font-weight: bold;
font-style: italic;
float: right
}
#subheader
{
width: 100%;
background-color: #adc7d5;
padding: 15px;
padding-left: 0px;
padding-right: 0px;
}
#subheader #menu
{
position: relative;
float: left
}
#subheader p
{
color: #1A1718;
margin-left: 10px;
}
#greenstrip
{
width: 100%;
background-color: #008542;
padding: 15px;
padding-left: 0px;
padding-right: 0px;
}
#bannerimages
{
width: 100%;
text-align: center;
white-space: nowrap;
background-color: #adc7d5;
}
#bannerimages img
{
}
#bannerimages #inner
{
width: auto;
min-height: 50px;
border-top: solid 3px white;
border-bottom: solid 3px white;
margin: 0 auto 0 auto;
text-align: center;
}
#content
{
width: 100%;
background-color: #4386a1;
color: White;
min-height: 300px;
padding: 15px;
padding-left: 0px;
padding-right: 0px;
}
#skipNav
{
display: none
}
/*
--NAVIGATION
*/
#nav, #nav ul
{
list-style: none;
line-height: 1em;
padding: 0;
border: solid white;
border-width: 0;
margin: 0;
}
#nav a
{
display: block;
width: 7em;
color: white;
text-decoration: none;
padding: 0.25em 0.5em;
text-transform: uppercase;
text-align: center
}
* html #nav a
{
width: 8em
}
#nav li
{
background-color: red;
float: left;
padding: 0;
width: 8em;
margin: 2px;
}
#nav li ul
{
position: absolute;
left: -999em;
height: auto;
width: 8.0em;
w\idth: 7.8em;
font-weight: normal;
border-width: 0em;
margin: 0 0.1em;
}
#nav li li
{
float: left;
padding-right: 0em;
width: 7.8em;
margin: 0;
text-align: left
}
#nav li ul a
{
width: 8em;
w\idth: 7em;
text-align: left;
}
#nav il ul ul
{
margin: -1.75em 0 0 3em;
}
#nav li:hover ul,
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li.sfhover ul,
#nav li.sfhover ul ul,
#nav li.sfhover ul ul ul
{
left: -999em;
}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li.sfhover ul,
#nav li li.sfhover ul,
#nav li li li.sfhover ul
{
left: auto;
}
#nav li:hover, #nav li.sfhover
{
background: #ffcc00;
}
/*
--CLASSES
*/
.fullBorder
{
border: solid 3px white
}
.rightBorder
{
border-right: solid 43px white
}
.items td
{
padding-right: 15px;
padding-bottom: 15px
}
.items-centered
{
margin: 0 auto 0 auto;
text-align: center;
}
.items-centered td
{
padding-bottom: 15px;
}
.items-centered td p
{
width: 300px;
text-align: center;
margin: 0 auto 0 auto
}
</style>
</pre>
<pre>
<script type="text/javascript">
sfHover = function()
{
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
var sfhx = " sfhover";
var sfhb = " sfhover\\b";
for (var i=0; i<sfEls.length; i++)
{
sfEls[i].onmouseover = function()
{
this.className += sfhx;
}
sfEls[i].onmouseout = function()
{
this.className = this.className.replace(new RegExp(sfhb), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</pre>
[[Category:CSS]]
[[Category:CSS]]

Revision as of 16:59, 19 February 2008

MRS

BODY
{
    BACKGROUND-COLOR: White;
    COLOR: Black;
    FONT-FAMILY: Arial;
    FONT-SIZE: 10pt;
    FONT-VARIANT: Normal
}        

H1
{
    COLOR: #003399;
    FONT-FAMILY: Arial;
    FONT-SIZE: 16pt;
    FONT-STYLE: Normal;
    FONT-WEIGHT: Bold
}

P.Info
{
    COLOR: #003399;
    FONT-FAMILY: Arial;
    FONT-SIZE: 10pt;
    FONT-STYLE: Normal;
    FONT-WEIGHT: Normal
}

A.BookmarkIndicator
{
    COLOR: #003399;
    FONT-FAMILY: Arial;
    FONT-SIZE: 8pt;
    FONT-STYLE: Normal;
    FONT-WEIGHT: Normal
}

P.Status
{
    COLOR: #0066cc;
    FONT-FAMILY: Arial;
    FONT-SIZE: 12pt;
    FONT-STYLE: Normal;
    FONT-WEIGHT: Bold
}

TR.MainHead
{
    BACKGROUND-COLOR: #003399;
    COLOR: White;
    FONT-FAMILY: Arial;
    FONT-SIZE: 9pt;
    FONT-WEIGHT: Bold;
    TEXT-INDENT: 1mm
}

TR.SubHead
{
    BACKGROUND-COLOR: #99ccff;
    COLOR: #000066;
    FONT-FAMILY: Arial;
    FONT-SIZE: 10pt;
    FONT-WEIGHT: bold;
    TEXT-INDENT: 1mm
}

TD.FieldLabel
{

        FONT-FAMILY: Arial;
        FONT-SIZE: 10pt;
        FONT-WEIGHT: Normal;
        COLOR: Black

}

TD.RequiredFieldLabel
{

        FONT-FAMILY: Arial;
        FONT-SIZE: 10pt;
        FONT-WEIGHT: Normal;
        COLOR: Red

}

TD.DisplayLabel
{

        FONT-FAMILY: Arial;
        FONT-SIZE: 10pt;
        FONT-WEIGHT: bold;
        COLOR: Blue

}
TD.TableValue
{
        FONT-FAMILY: Arial;
        FONT-SIZE: 10pt;
        FONT-WEIGHT: Normal;
        COLOR: Black
}

TD.TableValueLeftTopBorder
{
        FONT-FAMILY: Arial;
        FONT-SIZE: 10pt;
        FONT-WEIGHT: Normal;
        COLOR: Black;
        BORDER-LEFT: rgb(128,128,128) 1px solid;
        BORDER-TOP: rgb(128,128,128) 1px solid
}

TD.TableValueBottomLeftTopBorder
{
        FONT-FAMILY: Arial;
        FONT-SIZE: 10pt;
        FONT-WEIGHT: Normal;
        COLOR: Black;
        BORDER-BOTTOM: rgb(128,128,128) 1px solid; 
        BORDER-LEFT: rgb(128,128,128) 1px solid;
        BORDER-TOP: rgb(128,128,128) 1px solid
}

TD.TableValueBottomLeftBorder
{
        FONT-FAMILY: Arial;
        FONT-SIZE: 10pt;
        FONT-WEIGHT: Normal;
        COLOR: Black;
        BORDER-BOTTOM: rgb(128,128,128) 1px solid; 
        BORDER-LEFT: rgb(128,128,128) 1px solid
}

TD.TableValueBottomLeftRightBorder
{
        FONT-FAMILY: Arial;
        FONT-SIZE: 10pt;
        FONT-WEIGHT: Normal;
        COLOR: Black;
        BORDER-BOTTOM: rgb(128,128,128) 1px solid; 
        BORDER-LEFT: rgb(128,128,128) 1px solid;
        BORDER-RIGHT: rgb(128,128,128) 1px solid
}

TD.TableValueBottomLeftTopBorder
{
        FONT-FAMILY: Arial;
        FONT-SIZE: 10pt;
        FONT-WEIGHT: Normal;
        COLOR: Black;
        BORDER-BOTTOM: rgb(128,128,128) 1px solid; 
        BORDER-LEFT: rgb(128,128,128) 1px solid;
        BORDER-TOP: rgb(128,128,128) 1px solid
}

TD.TableValueBottomLeftTopRightBorder
{
        FONT-FAMILY: Arial;
        FONT-SIZE: 10pt;
        FONT-WEIGHT: Normal;
        COLOR: Black;
        BORDER-BOTTOM: rgb(128,128,128) 1px solid; 
        BORDER-LEFT: rgb(128,128,128) 1px solid;
        BORDER-TOP: rgb(128,128,128) 1px solid;
        BORDER-RIGHT: rgb(128,128,128) 1px solid
}

B.SpecialTxt
{
    COLOR: #003399;
    FONT-FAMILY: Verdana;
    FONT-SIZE: 13pt;
    FONT-WEIGHT: normal
}

P.StatusFailure
{
    COLOR: Red;
    FONT-FAMILY: Arial;
    FONT-SIZE: 10pt;
    FONT-STYLE: Normal;
    FONT-WEIGHT: Bold
}
</STYLE>

Hover Manipulation

style type="text/css">
*
{
	margin: 0;
	padding: 0	
}
body
{
	text-align: center;	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #ffffff;
}
p
{
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: White;
}
h2
{
	text-align: center;
	font-weight: bold;
}
h3
{
	color: White;
	font-size: 14px;
	font-weight: bold;
	font-style: italic;	
}
h4
{
	color: Black;
	font-size: 14px;
	font-weight: normal;
}

p.CJoffset10
{
	margin-left: 10px;
}

#CIoffset10
{
	margin-left: 10px;
}

#page
{
	width: auto;
	min-height: 450px;
	margin: 0 auto 0 auto;
	padding: 0px;
	background-color: #FFFFFF;
	color: #1A1718;
	text-align: center;
}
#container
{
	margin: 0 auto;
	min-height: 450px;
	width: auto;
	text-align: left;
}
#header
{
	height: 170px;
	background-position: 100% 0;
	background-repeat: no-repeat;
	z-index: 50;
}
#header #front
{
	background-position: 100% 0;
	background-repeat: no-repeat;
	z-index: 50;
}
#header #logo
{
	position: relative;
	top: 30px;
	left: 20px;
	float: left
}
#header #slogan
{
	position: relative;
	top: 80px;
	font-size: 20px;
	font-weight: bold;
	font-style: italic;	
	float: right
}
#subheader
{
	width: 100%;
	background-color: #adc7d5;
	padding: 15px;
	padding-left: 0px;
	padding-right: 0px;
}
#subheader #menu
{
	position: relative;
	float: left
}
#subheader p
{
	color: #1A1718;	
	margin-left: 10px;
}
#greenstrip
{
	width: 100%;
	background-color: #008542;
	padding: 15px;
	padding-left: 0px;
	padding-right: 0px;
}
#bannerimages
{
	width: 100%;
	text-align: center;
	white-space: nowrap;
	background-color: #adc7d5;
}
#bannerimages img
{

}
#bannerimages #inner
{
	width: auto;
	min-height: 50px;
	border-top: solid 3px white;
	border-bottom: solid 3px white;
	margin: 0 auto 0 auto;
	text-align: center;
}
#content
{
	width: 100%;
	background-color: #4386a1;
	color: White;
	min-height: 300px;
	padding: 15px;
	padding-left: 0px;
	padding-right: 0px;
}
#skipNav
{
	display: none
}
/*
	--NAVIGATION
*/
#nav, #nav ul
{
	list-style: none;
	line-height: 1em;
	padding: 0;
	border: solid white;
	border-width: 0;
	margin: 0;
}
#nav a
{
	display: block;
	width: 7em;
	color: white;
	text-decoration: none;
	padding: 0.25em 0.5em;
	text-transform: uppercase;
	text-align: center
}
* html #nav a
{
	width: 8em	
}
#nav li
{
	background-color: red;
	float: left;
	padding: 0;
	width: 8em;
	margin: 2px;
}
#nav li ul
{
	position: absolute;
	left: -999em;
	height: auto;
	width: 8.0em;
	w\idth: 7.8em;
	font-weight: normal;
	border-width: 0em;
	margin: 0 0.1em;
}
#nav li li
{
	float: left;
	padding-right: 0em;
	width: 7.8em;
	margin: 0;
	text-align: left
}
#nav li ul a
{
	width: 8em;
	w\idth: 7em;
	text-align: left;
}
#nav il ul ul
{
	margin: -1.75em 0 0 3em;
}
#nav li:hover ul,
#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li.sfhover ul,
#nav li.sfhover ul ul,
#nav li.sfhover ul ul ul
{
	left: -999em;
}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li.sfhover ul,
#nav li li.sfhover ul,
#nav li li li.sfhover ul
{
	left: auto;
}
#nav li:hover, #nav li.sfhover
{
	background: #ffcc00;
}
/*
	--CLASSES
*/
.fullBorder
{
	border: solid 3px white	
}
.rightBorder
{
	border-right: solid 43px white	
}
.items td
{
	padding-right: 15px;
	padding-bottom: 15px	
}
.items-centered
{
	margin: 0 auto 0 auto;
	text-align: center;
}
.items-centered td
{
	padding-bottom: 15px;
}
.items-centered td p
{
	width: 300px;
	text-align: center;
	margin: 0 auto 0 auto
}
</style>

<script type="text/javascript">

sfHover = function()
{
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	var sfhx = " sfhover";
	var sfhb = " sfhover\\b";

	for (var i=0; i<sfEls.length; i++)
	{
		sfEls[i].onmouseover = function()
		{
			this.className += sfhx;
		}
		sfEls[i].onmouseout = function()
		{
			this.className = this.className.replace(new RegExp(sfhb), "");
		}
	}
}

if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>
Retrieved from "https://performiq.com/kb/index.php?title=CSS_Examples&oldid=1348"