webtoolkit.info » CSS

CSS centered layout

admin — Tue, 03 Nov 2009 14:25:25 +0000

Ever wanted to make centered (vertically, horizontally) webpage with hiding content for other (smaller) resolutions? Look at the demo page for an example.

First include the style sheet at the top of your code. Do it in tag, then you can write your code.

DEMO

Source code for index.html


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 
	<head>
	    <title>My project</title>
	    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link media="screen" type="text/css" rel="stylesheet" href="webtoolkit.clayout.css" />
 
	    <style>
		    body {
		    	margin: 0px;
		    	padding: 0px;
		    	font-family: verdana;
		    	font-size: 12px;
		    }
 
			div#layout { /* exploder 5.5+ */
				width: expression((document.body.clientWidth > 790 ? document.body.clientWidth : 790) + "px");
				height: expression((document.body.clientHeight > 490 ? document.body.clientHeight : 490) + "px");
			}
 
			div#container,
			div#container div.container-top,
			div#container div.container-bottom {
				width: 790px;
			}
 
			div#container,
			div#container div.container-right,
			div#container div.container-left {
				height: 490px;
			}
 
			/* colors */
			div#container {
				background: #FFFFFF;
			}
 
			div#container div.container-top {
				background: #FF0000;
			}
 
			div#container div.container-right {
				background: #00FF00;
			}
 
			div#container div.container-bottom {
				background: #0000FF;
			}
 
			div#container div.container-left {
				background: #FFFF00;
			}
 
			div#container div.container-top-right {
				background: #00FFFF;
			}
 
			div#container div.container-bottom-right {
				background: #FF00FF;
			}
 
			div#container div.container-bottom-left {
				background: #C0C0C0;
			}
 
			div#container div.container-top-left {
				background: #000000;
			}
		</style>
 
	</head>
 
	<body>
 
		<div id="layout">
			<div id="container">
				<div class="container-top"></div>
				<div class="container-right"></div>
				<div class="container-bottom"></div>
				<div class="container-left"></div>
 
				<div class="container-top-right"></div>
				<div class="container-bottom-right"></div>
				<div class="container-bottom-left"></div>
				<div class="container-top-left"></div>
 
				Content goes here...
			</div>
		</div>
 
	</body>
</html>

Source code for webtoolkit.clayout.css

body, html {
	height: 100%;
}
 
	div#layout { /* exploder 5.5+ */
		position: absolute;
		left: 0px;
		top: 0px;
		overflow: hidden;
		text-align: center;
	}
 
	* > div#layout { /* normal browsers */
		min-width: 790px;
		min-height: 490px;
		width: 100%;
		height: 100%;
	}
 
		div#container {
			position: relative;
			top: 50%;
			margin-top: -245px;
			margin-left: auto;
			margin-right: auto;
			text-align: left;
		}
 
		div#container div.container-top {
			position: absolute;
			left: 0px;
			top: -1000px;
			height: 1000px;
		}
 
		div#container div.container-right {
			position: absolute;
			right: -1000px;
			top: 0px;
			width: 1000px;
		}
 
		div#container div.container-bottom {
			position: absolute;
			left: 0px;
			bottom: -1000px;
			height: 1000px;
		}
 
		div#container div.container-left {
			position: absolute;
			left: -1000px;
			top: 0px;
			width: 1000px;
		}
 
		div#container div.container-top-right {
			position: absolute;
			right: -1000px;
			top: -1000px;
			width: 1000px;
			height: 1000px;
		}
 
		div#container div.container-bottom-right {
			position: absolute;
			right: -1000px;
			bottom: -1000px;
			width: 1000px;
			height: 1000px;
		}
 
		div#container div.container-bottom-left {
			position: absolute;
			left: -1000px;
			bottom: -1000px;
			width: 1000px;
			height: 1000px;
		}
 
		div#container div.container-top-left {
			position: absolute;
			left: -1000px;
			top: -1000px;
			width: 1000px;
			height: 1000px;
		}

Rounded corners CSS

admin — Wed, 28 Oct 2009 14:00:27 +0000

CSS rounded corners is a very nice effect. There are many ways to achieve it.

The easiest and fastest way is to use CSS round corner options. The good thing its fast and easy. The bad thing Internet Explorer browser does not support these options. If Internet Explorer isn’t important for you, use options listed below.

www.Webtoolkit.info is also using this method, if you are using Firefox, Safari, or Webkit engine based browser you can see rounded corners everywhere on this page.

You can use these CSS options on any block elements: tables, divs, input fields, etc.

DEMO

Source code for webtoolkit.roundedcorners.css

.roundedCorners {
	border: 1px solid #000;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
 
.roundedTopCorners {
	border: 1px solid #000;
	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-topright: 10px;
	-webkit-border-top-right-radius: 10px;
}
 
.roundedBottomCorners {
	border: 1px solid #000;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-right-radius: 10px;
}

Source code for index.html


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>My project</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link media="screen" type="text/css" rel="stylesheet" href="webtoolkit.roundedcorners.css" />
</head>
 
<body>
 
	<div class="roundedCorners">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
	</div>
 
	<div class="roundedTopCorners">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
	</div>
 
	<div class="roundedBottomCorners">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
	</div>
 
</body>
</html>

CSS clearfix

admin — Thu, 29 Jan 2009 14:14:23 +0000

The problem happens when a floated element is within a container box, that element does not automatically force the container’s height adjust to the floated element. When an element is floated, its parent no longer contains it because the float is removed from the flow. You can use 2 methods to fix it:

{clear: both;}
clearfix

Once you understand what is happening, use the method below to “clearfix” it.

DEMO

Source code for webtoolkit.clearfix.css

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}