I am a designer, a blogger and a Wordpress nut!

Subscribe to my Feed

Building a Website from Scratch A to Z – Part 2 (Coding)

Posted on January 3, 2010 by Roy Ho
designsite2

STEP 10 (Styling the Content)

In our Photoshop design we have the left content with a rounded corner box. I would like to mimic that with CSS3 however as you are aware that in IE, it will display as a square box instead. To me that degrades nicely so I will stick with using CSS instead of an image. So for the leftCol div, let’s declare the “border-radius” attribute. Of course that attribute does not work yet but we want to future-proof our site for when CSS3 is accepted from the modern browsers. Now we need to give vendor specific prefixes to make the “border-radius” work now. To do that just add “-moz-” and “-webkit-” before the “border-radius” to apply the effect which will work on Gecko based browsers and Sarari/Konquerer based browsers respectively. Then make sure “leftCol” is floated left.
For the sidebar we want to have 2 rounded corner boxes one on top of each other so we want to float both of them to the right and apply the same rounded corner technique as with the “leftCol”. Both boxes are positioned relative. For detail on how “border-radius” works, have a look at my tutorial here. Inside the “rightCol1″ and “rightCol2″ we have the icon, text, image and a button. Since the button is on top of the image you want to set the “z-index” of the image to be lower than the button so that the button will not be hidden by the image. The higher the “z-index”, the higher on top of the layer/stack it is. This is what the stylesheet looks like now.

CSS: (style.css)

/*-----GENERAL-----*/
html, body {
	font-family:Arial, Helvetica, sans-serif;
}

h2 {
	font-size:2.0em;
	margin-bottom:20px;
}

#wrapper {
	width:960px;
	margin:0 auto;
}

/*-----UTILITY-----*/
.group:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

/*-----HEADER-----*/
#header {
	background:url(../images/headerBG.jpg) #061f41 no-repeat;
	height:242px;
	position:relative;
	margin-bottom:20px;
}

#logo {
	position:absolute;
	top:30px;
	left:20px;
}

#tagline {
	position:absolute;
	top:90px;
	left:70px;
	color:#ffffff;
	font-size:1.2em;
}

#login {
	position:absolute;
	top:20px;
	right:20px;
}

#login img {
	float:left;
	margin-right:5px;
}

#login a:link, #login a:visited {
	line-height:25px;
	color:#ffffff;
}

#login a:hover, #login a:active {
	color:#C90;
	text-decoration:none;
}

#meta {
	position:absolute;
	top:100px;
	right:40px;
}

#meta img {
	float:left;
	margin-right:5px;
}

#meta p {
	float:left;
	line-height:60px;
	font-size:1.0em;
	color:#ffffff;
}

#meta a {
	background:url(../images/RSSIcon.png) no-repeat;
	float:left;
	text-indent:-9999px;
	line-height:60px;
	font-size:1.0em;
	color:#ffffff;
	width:44px;
	height:41px;
	margin:10px 0 0 50px;
}

#divider {
	position:absolute;
	top:160px;
	right:5px;
}

form#search {
	position:absolute;
	top:180px;
	right:90px;
}

form#search label {
	text-indent:-9999px;
	display:inline-block;
}

form#search p#searchfield {
	background:url(../images/searchBox.png) transparent top left scroll no-repeat;
	width:221px;
	height:36px;
	position:relative;
	clear:both;
	display:block;
}

form#search p#searchfield input {
	position:absolute;
	top:8px;
	left:10px;
	border:none;
	font-size:18px;
	width:200px;
	background:none;
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#666;
	display:block;
}

form#search .button {
	background:url(../images/searchIcon.png) no-repeat top left;
	width:46px;
	height:36px;
	text-indent:-9999px;  /*  Move the text off the screen while still keeping accessibility */
	border:none; /* This sets the background color to none so you will not see a default white */
	cursor:pointer; /*Since we are using a background image, this will set the mouse cursor to change when hovering over so you know it is a clickable button */
	overflow:hidden; /* hides any graphic/image element if it overflows */
	display:block;
	line-height:0; /* this is really a hack for IE6 and IE7 because text-indent will not work here unless the line-height is set to zero */
	position:absolute;
	top:0;
	right:-50px;
}

/*-----NAVIGATION-----*/
#nav {
	position:absolute;
	top:170px;
	left:20px;
}

ul#nav li{
	float:left;
}

ul#nav li a{
	background:url(../images/navBG.png) repeat-x;
	width:138px;
	height:48px;
	float:left;
	margin-right:10px;
	text-align:center;
	line-height:50px;
	font-size:17px;
}

ul#nav li a:link, ul#nav li a:visited {
	text-decoration:none;
	color:#000000;
}

ul#nav li a:hover, ul#nav li a:active {
	text-decoration:none;
	color:#666;
}

/*-----CONTENT-----*/
#leftCol {
	float:left;
	border:1px solid #cfcfcf;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	width:648px;
	height:496px;
	margin-right:10px;
	margin-bottom:40px;
	padding:20px;
	text-align:center;
}

#leftCol img {
	margin-top:30px;
}

#rightCol1 {
	position:relative;
	float:right;
	width:258px;
	height:257px;
	border:1px solid #cfcfcf;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	margin-bottom:20px;
}

#rightCol1 p, #rightCol2 p {
	position:absolute;
	top:3px;
	right:5px;
	text-align:right;
	font-size:27px;
	width:180px;
}

#rightCol1 img#mousekeyboard {
	position:absolute;
	top:100px;
	right:0;
	z-index:10;
}

#rightCol2 {
	position:relative;
	float:right;
	width:258px;
	height:257px;
	border:1px solid #cfcfcf;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	margin-bottom:40px;
}

#rightCol2 img#learnMac {
	position:absolute;
	top:70px;
	right:20px;
	z-index:10;

}

#rightCol1 a, #rightCol2 a {
	background:url(../images/buttonBG.png) transparent repeat;
	width:258px;
	height:40px;
	position:absolute;
	top:180px;
	right:0;
	z-index:20;
	text-align:center;
	line-height:40px;
	color:#ffffff;
	font-size:25px;
	text-decoration:none;
}

#rightCol1 a:hover, #rightCol2 a:hover{
	color:#cfcfcf;
}

Still there?? Ok let’s move on.

STEP 11 (Styling the Footer)

The footer has a background image and is positioned relative. Within the footer there are paragraphs and a sub navigation. The navigation is an unordered list setup the same way as the main navigation. This is how the stylesheet should like look now.

CSS: (style.css)

/*-----GENERAL-----*/
html, body {
	font-family:Arial, Helvetica, sans-serif;
}

h2 {
	font-size:2.0em;
	margin-bottom:20px;
}

#wrapper {
	width:960px;
	margin:0 auto;
}

/*-----UTILITY-----*/
.group:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

/*-----HEADER-----*/
#header {
	background:url(../images/headerBG.jpg) #061f41 no-repeat;
	height:242px;
	position:relative;
	margin-bottom:20px;
}

#logo {
	position:absolute;
	top:30px;
	left:20px;
}

#tagline {
	position:absolute;
	top:90px;
	left:70px;
	color:#ffffff;
	font-size:1.2em;
}

#login {
	position:absolute;
	top:20px;
	right:20px;
}

#login img {
	float:left;
	margin-right:5px;
}

#login a:link, #login a:visited {
	line-height:25px;
	color:#ffffff;
}

#login a:hover, #login a:active {
	color:#C90;
	text-decoration:none;
}

#meta {
	position:absolute;
	top:100px;
	right:40px;
}

#meta img {
	float:left;
	margin-right:5px;
}

#meta p {
	float:left;
	line-height:60px;
	font-size:1.0em;
	color:#ffffff;
}

#meta a {
	background:url(../images/RSSIcon.png) no-repeat;
	float:left;
	text-indent:-9999px;
	line-height:60px;
	font-size:1.0em;
	color:#ffffff;
	width:44px;
	height:41px;
	margin:10px 0 0 50px;
}

#divider {
	position:absolute;
	top:160px;
	right:5px;
}

form#search {
	position:absolute;
	top:180px;
	right:90px;
}

form#search label {
	text-indent:-9999px;
	display:inline-block;
}

form#search p#searchfield {
	background:url(../images/searchBox.png) transparent top left scroll no-repeat;
	width:221px;
	height:36px;
	position:relative;
	clear:both;
	display:block;
}

form#search p#searchfield input {
	position:absolute;
	top:8px;
	left:10px;
	border:none;
	font-size:18px;
	width:200px;
	background:none;
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#666;
	display:block;
}

form#search .button {
	background:url(../images/searchIcon.png) no-repeat top left;
	width:46px;
	height:36px;
	text-indent:-9999px;  /*  Move the text off the screen while still keeping accessibility */
	border:none; /* This sets the background color to none so you will not see a default white */
	cursor:pointer; /*Since we are using a background image, this will set the mouse cursor to change when hovering over so you know it is a clickable button */
	overflow:hidden; /* hides any graphic/image element if it overflows */
	display:block;
	line-height:0; /* this is really a hack for IE6 and IE7 because text-indent will not work here unless the line-height is set to zero */
	position:absolute;
	top:0;
	right:-50px;
}

/*-----NAVIGATION-----*/
#nav {
	position:absolute;
	top:170px;
	left:20px;
}

ul#nav li{
	float:left;
}

ul#nav li a{
	background:url(../images/navBG.png) repeat-x;
	width:138px;
	height:48px;
	float:left;
	margin-right:10px;
	text-align:center;
	line-height:50px;
	font-size:17px;
}

ul#nav li a:link, ul#nav li a:visited {
	text-decoration:none;
	color:#000000;
}

ul#nav li a:hover, ul#nav li a:active {
	text-decoration:none;
	color:#666;
}

/*-----CONTENT-----*/
#leftCol {
	float:left;
	border:1px solid #cfcfcf;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	width:648px;
	height:496px;
	margin-right:10px;
	margin-bottom:40px;
	padding:20px;
	text-align:center;
}

#leftCol img {
	margin-top:30px;
}

#rightCol1 {
	position:relative;
	float:right;
	width:258px;
	height:257px;
	border:1px solid #cfcfcf;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	margin-bottom:20px;
}

#rightCol1 p, #rightCol2 p {
	position:absolute;
	top:3px;
	right:5px;
	text-align:right;
	font-size:27px;
	width:180px;
}

#rightCol1 img#mousekeyboard {
	position:absolute;
	top:100px;
	right:0;
	z-index:10;
}

#rightCol2 {
	position:relative;
	float:right;
	width:258px;
	height:257px;
	border:1px solid #cfcfcf;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	margin-bottom:40px;
}

#rightCol2 img#learnMac {
	position:absolute;
	top:70px;
	right:20px;
	z-index:10;

}

#rightCol1 a, #rightCol2 a {
	background:url(../images/buttonBG.png) transparent repeat;
	width:258px;
	height:40px;
	position:absolute;
	top:180px;
	right:0;
	z-index:20;
	text-align:center;
	line-height:40px;
	color:#ffffff;
	font-size:25px;
	text-decoration:none;
}

#rightCol1 a:hover, #rightCol2 a:hover{
	color:#cfcfcf;
}

/*-----FOOTER-----*/
#footer {
	background:url(../images/footerBG.jpg) transparent repeat-x;
	height:198px;
	width:920px;
	position:relative;
	padding:20px;
	color:#ffffff;
	font-size:18px;
}

#footer p {
	line-height:1.4em;
	font-size:12px;
}

#footer h3 {
	position:absolute;
	top:20px;
	right:40px;
	color:#0f99da;
	font-size:25px;
}

#footer ul#subNav {
	position:absolute;
	top:50px;
	right:110px;
}

#footer ul#subNav li a{
	line-height:1.6em;
	text-decoration:underline;
	color:#ffffff;
	font-size:12px;
}

#footer ul#subNav li a:hover {
	color:#666;
}

STEP 12 (Styling the IE Quirks)

In this final step we must create a seperate stylesheet to cater for IE browsers. Just simply create a stylesheet called “ie.css”. It simply contains the fixes on the class “group” for IE6 and IE7. Remember this is the utility to clear floats. See the stylesheet.

CSS: (ie.css)

/*-----IE SPECIFIC STYLESHEET-----*/

/*-----UTILITY-----*/
/* for IE6 */
* html .group {
	height: 1%;
}

/* for IE7 */
*:first-child+html .group {
	min-height: 1px;
}

And that should be it!! Finally, pad yourself on the back if you followed along from the beginning to the end. Your final website should look like this below.

CLICK TO VIEW DEMO

Well folks, that was a long journey. Next time I should do it in a screencast which makes it easier. I hope it was worth the wait and looking forward to reading your comments. Good day!

Be Sociable, Share!
Pages: 1 2 3 4 5

About the Author

Roy Ho is a web site design and developer. He blogs tutorials and articles on web design and development to share with the community. He has been practicing this field for 12 years now. He is passionate and very eager to learn more!
This entry was posted in Articles, CSS + HTML, Tutorials and tagged , , , , , . Bookmark the permalink.
Back to top

4 Responses to Building a Website from Scratch A to Z – Part 2 (Coding)

  1. ipunk says:
    January 6, 2010 at 6:02 pm

    Can you make tutorial on integrating wordpress and bbpress? I wanna do something like your site, integrate bbpress into wordpress. thanks

    Reply
  2. zainab says:
    January 24, 2011 at 9:53 pm

    thank you, it’s very useful

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*


*