You Are Here Home > CSS

CSS

Fixed Centered 2 Column Layout – Left Sidebar

You may want to remove the borders prior to use:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Centered 2 Column - Left Sidebar</title>
 
   <style type="text/css">
		/**
		 * Please note: borders are just to show you the boundaries, you will probably want to remove prior to use unless you like them...
		**/
 
		body {
			min-width: 800px;
			text-align: center;
		}
 
		#main-wrapper {
			width: 800px;
			margin: auto;
			text-align: left;
			border: 1px solid #CCCCCC;
		}
 
		#side-bar {
			width: 200px;
			float: left;
			border: 1px solid #993300;
		}
 
		#contents {
			margin-left: 220px;
			border: 1px solid #0099FF;
		}
 
	</style>
 
</head>
 
<body>
<div id="main-wrapper">
 
   <div id="side-bar">
   	I'm the side bar
   </div>
 
   <div id="contents">
   	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa nibh, feugiat ut condimentum nec, ullamcorper nec ipsum. Cras vitae dolor nisl, ut scelerisque libero. Etiam nisi velit, pulvinar in volutpat posuere, venenatis nec justo. Curabitur imperdiet tellus tincidunt turpis venenatis a aliquet augue rutrum. Aliquam mattis lacus sed urna fringilla non pretium dolor sodales. Curabitur dapibus risus vitae libero dignissim et tristique enim ullamcorper. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non magna ipsum. Nunc sem neque, scelerisque auctor sodales blandit, pretium sit amet quam. Duis sed turpis mi, a eleifend dui. Mauris pellentesque pretium tincidunt. Fusce sit amet massa quis dui ornare feugiat. Integer consequat purus et est tempus feugiat. Praesent a libero quis leo commodo blandit in at elit. Nunc faucibus sapien id magna vehicula ac pellentesque quam volutpat. Vivamus condimentum faucibus urna a molestie. Phasellus auctor arcu id enim feugiat porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
   </div>
 
</div>
</body>
</html>
 
<!--
  _            __             
 / )  _/'  _  /__)_ _ '  _  _ 
(__()(///)(/ / ( (-( //)(-_)  
         _/          /       
-->
Fixed Centered 2 Column Layout – Left Sidebar
Comments (0)   Filed under: CSS   Posted by: Hamid

Create a Centered Page – Fixed Page

This is the most simple form of a centered web page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centered Page</title>
 
	<style type="text/css">
		body {
			min-width: 800px;
			text-align: center;
		}
		#main-wrapper {
			width: 800px;
			margin-left: auto;
			margin-right: auto;
			text-align: left;
		}
	</style>
 
</head>
 
<body>
<div id="main-wrapper">
	Centered Page
</div>
</body>
</html>
Create a Centered Page – Fixed Page
Comments (0)   Filed under: CSS   Posted by: Codehead

Absolute Positioning an Element Relative To a Box/DIV

In order to do this, you must position the parent box relative, you don’t need to set the left/right or top/bottom necessarily, just a:

.ab-parent-box {
   position: relative;
}

Will do the trick…

Absolute Positioning an Element Relative To a Box/DIV
Comments (0)   Filed under: CSS   Posted by: Codehead

CSS Tabs

I was looking for a nice and simple CSS tabs implementation and came across:
http://htmldog.com/articles/tabs/

While this was a nice solution, it didn’t support padding the tabs and when you did it didn’t look right in all the browsers so I had to modify it to this:

HTML side:

<div id="tab-nav">
   <ul>
      <li id="selected"><a href="#">1st tab</a></li>
      <li><a href="#">2nd tab</a></li>
      <li><a href="#">3rd tab</a></li>
   </ul>
</div>
<div id="page-content">
   Some content
</div>

CSS side:

#tab-nav {
	border:1px solid #FFFFFF; /* Stupid IE7 */
}
#tab-nav ul {
	list-style-type:none;
	padding:0px;
	margin:0px;
}
#tab-nav li {
	float:left;
	border: solid;
	border-width:1px 1px 0px 1px;
	border-color:#666666;
	margin:0px 0px 0px 10px;
	background-color:#c9cde2;
}
#tab-nav a {
	text-decoration:none;
	padding:7px 10px 7px 10px;
	color:#333333;
	display:block;
}
#page-content {
	border:1px solid;
	border-color:#666666 #CCCCCC #CCCCCC #CCCCCC;
	border-width:1px 2px 2px 1px;
	clear:both;
	padding:10px;
}
#tab-nav #selected {
	position:relative;
	top:1px;
	background-color:#FFFFFF;
}

And here is how this looks like:

Some content
CSS Tabs
Comments (2)   Filed under: CSS,HTML,Web Design,Web Development   Posted by: Codehead

Acid Test and different web browsers

Acid test is a test to identify problems web browsers have when rendering web pages.
There are 3 versions Acid Test 1, 2 and 3.

Acid2 should look like this:

But here is how Acid Test 2 works on my different browsers:

Google Chrome:

Firefox:

Opera:

Safari:

Retarded Internet Explorer 7:

!!!

Now, none of my browsers passed Acid Test 3!!!
It should look like this:

Google Chrome:

Firefox:

Opera:

Safari:

Retarded Internet Explorer 7:

Of all the browsers, all perform almost the same but only Internet Explorer is way off, I don’t know what the developer team who is in charge of Internet Explorer does at Microsoft every day. I’d say all of them deserve to be fired!!!

Of all the other browsers, I think Apple Webkit rendering engine is the best (Google Chrome and Apple Safari) which I think is another reason for Google to use it in their browser Chrome.

Apple Webkit is a state of the art and open source HTML rendering engine developed and released by Apple.

Here are the links to these tests:
Acid2
Acid3

Acid Test and different web browsers
Comments (1)   Filed under: CSS,HTML,Web Browsers,Web Design,Web Development   Posted by: Codehead

Fixed font sizes on Firefox 3

In Firefox 2, you couldn’t have a fixed font size, as soon as a user zoomed on your page, where ever you had a fixed font, it would get bigger and ugly.
So I used to use images for menus in form of CSS sprites.

But in Firefox 3, they fixed this issue.

Now, I find those arguments about how it was OK to blow the web pages and how it made sense, blah blah, pathetic!

Fixed font sizes on Firefox 3
Comments (0)   Filed under: CSS,HTML,Web Design   Posted by: Codehead
« Newer Posts