Wednesday, March 30, 2011

Old Facebook Tab

Tab Navigation CSS

The purpose of the tab interface is to guide the user as to their present location, these small features do actually improve the usability of the tab structure. Below are simple codes for tab interface.

Insert the code below inside your <body> ... </body>

<!-- Tabs -->
<div class="tabs">
<a href="#" class="selected">Wall</a>
<a href="#">Info</a>
<a href="#">CSS</a>
<a href="#">HTML</a>
<a href="#">alfie-css</a>
<a href="#">alfieindesigns</a>
<br class="clear" />
</div>
<!-- Tabs -->

Create tab.css, then input the CSS code below:

/********************************************
Coded by: alfieindesigns
Website: http://alfie-css.blogspot.com/
Inquiries: alfienollora@yahoo.com
********************************************/

/**********************
COMMON STYLE
**********************/
.clear {clear:both;} /* use to clear all floats */

/**********************
TAB ALA FACEBOOK
**********************/
.tabs {
border-bottom: 1px solid #D8DFEA;
bottom: 0;
font-family:Arial, Helvetica, sans-serif; /* When you change font-family be sure to adjust the height */
height: 24px; /* Adjust this for border bottom to fit the layout (only if you change the font family ) */
left: 0;
width: 530px; /* Change to fit your layout */
padding:50px 0 0 10px;
}
.tabs a {
float:left;
background:#D8DFEA;
border-color:#D8DFEA;
border-style:solid solid none;
border-width:1px 1px 0;
display:block;
font-size:13px;
font-weight:bold;
padding:4px 11px;
white-space:nowrap;
color:#3B5998;
cursor:pointer;
outline-style:none;
text-decoration:none;
margin:0 2px 0 0;
}
.tabs a:hover {
background-color:#627aad;
border-color:#627aad;
border-style:solid solid none;
border-width:1px 1px 0;
color:#FFF;
}

.tabs a.selected, .tabs a:hover.selected {
background-color:#FFF;
color:#333333;
font-size:13px;
padding:5px 10px 4px;
border-color:#D8DFEA;
border-style:solid solid none;
border-width:1px 1px 0;
}

On the <head> tag insert the code below: (make sure path is correct "css/") i put my tab.css on css folder.

<link rel="stylesheet" type="text/css" href="css/tab.css" />

That's all! Enjoy! God bless always!

Posted by alfieindesigns at 3/30/2011 11:10:00 PM 3 comments

Simple Layout

Two Column CSS Layout

The layout consists of a header, a main content column, a left column, a right column and a footer. It is fixed width centered layout. A pretty basic layout, and not at all difficult to create with CSS.

Below are the basic markup for this layout, you will notice that each category (ex. header, content) are having comments. So, you will not confuse which code is intended for.

Insert the code below inside your <body> ... </body>

<!-- Header -->
<div class="header">
This is header
</div>
<!-- Header -->

<!-- Content -->
<div class="content">

<!-- Left Column -->
<div class="left-column">
Left Column
</div>
<!-- Left Column -->

<!-- Right Column -->
<div class="right-column">
Right Column
</div>
<!-- Right Column -->

</div>
<!-- Content -->

<!-- Footer -->
<div class="footer">
Copyright ® alfieindesigns. All rights reserved.
</div>
<!-- Footer -->

Create mainstyle.css, then here's the CSS code:

/********************************************
Coded by: alfieindesigns
Website: http://alfie-css.blogspot.com/
Inquiries: alfienollora@yahoo.com
********************************************/

/**********************
COMMON STYLE
**********************/
body {
background:#EEEEEE; /* Add general background (remove this if not needed) */
font-family:Arial, Helvetica, sans-serif; /* Change value depends on layout font family/style (only for webfonts) */
font-size:12px;
margin:0;
padding:0;
color:#333; /* Change value depends on general font color */
font-weight:100;
}

/**********************
HEADER
**********************/
.header {
background:#E1D4C0;
border-bottom:1px solid #999;
width:940px; /* Change depends on website layout */
height:100px;
margin:0 auto; /* Center div */
padding:10px;
}

/**********************
CONTENT
**********************/
.content {
background:#E1D4C0;
border-top:1px solid #FFF;
width:960px; /* Change depends on website layout */
margin:0 auto; /* Center div */
}

/* Left Column */
.left-column {
background:#d5cbbd;
width:280px;
height:500px;
float:left;
padding:10px;
}

/* Right Column */
.right-column {
background:#c3b6a2;
width:640px;
height:500px;
float:left;
padding:10px;
}

/**********************
FOOTER
**********************/
.footer {
clear:both; /* Use to clear the float so it will not follow the float */
background:#E1D4C0;
border-top:1px solid #FFF;
width:940px; /* Change depends on website layout */
margin:0 auto; /* Center div */
text-align:center;/* Center content/copy */
padding:10px;
}

On the <head> tag insert the code below: (make sure path is correct "css/") i put my mainstyle.css on css folder.

<link rel="stylesheet" type="text/css" href="css/mainstyle.css" />

That's all! Enjoy! God bless always!

Posted by alfieindesigns at 3/30/2011 12:41:00 AM 1 comments

Sunday, March 27, 2011

Intoducing CSS

What is CSS?

  • CSS stands for Cascading Style Sheets
  • It defines how the HTML display the elements
  • CSS can be External style sheets , Internal style sheet, & Inline styles
  • World Wide Web Consortium (W3C) created CSS.

Work made fast with CSS

CSS defines HOW HTML elements are to be displayed.

Styles are normally saved in external file (ex. mainstyle.css) with .css extension file. External style sheets enable you to change the layout of all the pages in a Web site, just by editing one single file!

Posted by alfieindesigns at 3/27/2011 07:57:00 PM 1 comments
Subscribe to: Comments (Atom)