Never been to CodeSnippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world (or not, you can keep them private!)

46 total

On This Page:

  1. 1 Vertical Middle DIV
  2. 2 Defeating RickRolls with CSS
  3. 3 CSS image floats no text wrap
  4. 4 Cross-browser solution for adding hover border to linked images
  5. 5 Standard CSS helpers
  1. 6 Remove border from images when linked
  2. 7 CSS Overflow Vertical Only
  3. 8 Universal Selector
  4. 9 IE Fix for max-width CSS property
  5. 10 Some good body fonts

Vertical Middle DIV

to css by Dino on Jul 10, 2008
// description of your code here
Vertical Middle DIV.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Example 7: Vertical alignment of content with JavaScript &amp; CSS</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<style type="text/css">
        <!--
			body {
				margin: 0;
				padding: 0;
				font: 12px/1.5 verdana, arial, helvetica, sans-serif;
				text-align: center; /* Takes care of horizontal alignment in Internet Explorer */
				background-image: url(grid.gif);
			}
			#content {
				position: relative; /* Needed for Safari */
				margin: auto; /* Takes care of horizontal alignment in standards compliant browsers */
				text-align: left;
				width: 200px;
				height: 200px;
				background-color: #fc0;
			}
			h1, p {
				margin: 0;
				padding: 1em;
			}
			h1 {
				font-size: 12px;
				line-height: 1.5em;
			}
        -->
        </style>
		<script type="text/javascript">
		<!--
		function getWindowHeight() {
			var windowHeight = 0;
			if (typeof(window.innerHeight) == 'number') {
				windowHeight = window.innerHeight;
			}
			else {
				if (document.documentElement && document.documentElement.clientHeight) {
					windowHeight = document.documentElement.clientHeight;
				}
				else {
					if (document.body && document.body.clientHeight) {
						windowHeight = document.body.clientHeight;
					}
				}
			}
			return windowHeight;
		}
		function setContent() {
			if (document.getElementById) {
				var windowHeight = getWindowHeight();
				if (windowHeight > 0) {
					var contentElement = document.getElementById('content');
					var contentHeight = contentElement.offsetHeight;
					if (windowHeight - contentHeight > 0) {
						contentElement.style.position = 'relative';
						contentElement.style.top = ((windowHeight / 2) - (contentHeight / 2)) + 'px';
					}
					else {
						contentElement.style.position = 'static';
					}
				}
			}
		}
		window.onload = function() {
			setContent();
		}
		window.onresize = function() {
			setContent();
		}
		//-->
		</script>
	</head>
	<body>
		<div id="content">
			<h1>Content</h1>
			<p>This content should be centered in your browser window. CSS is used for horizontal alignment, while scripting is used for vertical alignment.</p>
		</div>
	</body>
</html>

Defeating RickRolls with CSS

to css rickroll by mac_ on Apr 07, 2008 1 Comments
Add this CSS to your user stylesheet for a graphical indicator that you're about to get rickroll'd.

a[href*="youtube.com/watch?v=eBGIQ7ZuuiU"],
a[href*="youtube.com/watch?v=oHg5SJYRHA0"] {
    display: block;
    display: inline-block;
    width: 247px;
    height: 229px;
    background-image: url(http://farm3.static.flickr.com/2325/2394457221_aec683d4f0_o.png) ! important;
    border: 1px dashed black;
};

CSS image floats no text wrap

to css by jamespro on Oct 24, 2007
Credit goes to:

http://ghettocooler.net/2005/11/13/image-floats-without-the-text-wrap/

.callout {
float:left;
width:275px;
}

.callout h3 {
width:115px;
height:65px;
float:left;
text-indent:-8008px;
background:transparent url(team-report.gif) no-repeat 0 0;
}

.callout * {
width:160px;
float:right;
}

.callout * * {
width:auto;
float:none;
}

Cross-browser solution for adding hover border to linked images

to css images cross-browser hover by mediagirl on Sep 14, 2007
// The class is assigned to the href.

.borderit img {
	border: 1px dashed #776e09;
	padding: 2px;
}
.borderit:hover img {
	border: 1px solid #fff71c;
	padding: 2px;
}
.borderit:hover {
	color: red; /* irrelevant definition to overcome IE bug */
}

Standard CSS helpers

to css xhtml html webdev web style stylesheet by jamiew on Aug 28, 2007
Some really common layout classes I use in almost every CSS file.

/********* helpers *********/
.floatRight { float: right; }
.floatLeft  { float: left; }
.right  { text-align: right; }
.left   { text-align: left; }
.center { text-align: center; }
.clear, .clearer { clear: both; }
.block  { display: block; }

Remove border from images when linked

to css by deckard on Jun 30, 2007
// description of your code here

img {
 border-style: none;
}

CSS Overflow Vertical Only

to css by therad on May 22, 2007
Will always have the vertical scrollbar and no horizontal scrollbar. Horizontal can be done by using -x

overflow-y: scroll;

Universal Selector

to css by onwired on Apr 23, 2007
An even better starting point for every style sheet: it sets everything to 0. No sense writing out every selector!

* { // This selects every element on the page
margin: 0;
padding: 0;
border: 0 none;
font-style: normal;
font-weight: normal;
font-size: 100%;
list-style-type: none;
text-align: left;
text-decoration: none;
}

IE Fix for max-width CSS property

to css html iefix by therad on Mar 29, 2007
AGAIN another IE fix. IE of course does not recognize the max-width CSS property. This piece of code will fix it for IE6 and IE7. This code snip will make the maximum width for the html object 900 pixels.

.cssClass
{
width:expression(document.body.clientWidth > 900? "900px": "auto" );
}

Some good body fonts

to css web design fonts font sans serif by binnyva on Feb 14, 2007
// Some fonts that could be used for body copy

font:10pt 'Trebuchet MS',Arial,sans-serif;
font:76%/140% Verdana,Geneva,Arial,Helvetica,sans-serif;
font:76%/1.5 "Lucida Grande",Geneva,Verdana,Arial,Helvetica,sans-serif;
font:12px/1.5 "Lucida Grande","Lucida Sans Unicode", sans-serif;
46 total

On This Page:

  1. 1 Vertical Middle DIV
  2. 2 Defeating RickRolls with CSS
  3. 3 CSS image floats no text wrap
  4. 4 Cross-browser solution for adding hover border to linked images
  5. 5 Standard CSS helpers
  1. 6 Remove border from images when linked
  2. 7 CSS Overflow Vertical Only
  3. 8 Universal Selector
  4. 9 IE Fix for max-width CSS property
  5. 10 Some good body fonts