Script Tutorials » css | Script Tutorials | Web development

How to Generate Runtime Multi-columns with CSS3

admin — Mon, 17 Oct 2011 17:11:57 +0000

How to do Multi-columns with CSS3

Have you ever had the need to create multi-column layout to display any information? What looks like the columns of newspapers. I think that your answer is – yes. And many of you may have implemented it using just ordinary DIV (or other) elements, with the property float: left. More recently – CSS3 gives us his alternative. You do not need to be cut into blocks of text output – multi-column layout is quite possible to do using a single element.

In our example we will use the new CSS3 properties: column-count, column-gap and column-rule. It is possible that not all browsers support these CSS3 styles, but I think – most newer browsers already support them. Here we see that the result should look like:

Live Demo

download result

Ok, download the example files and lets start coding !

Step 1. HTML

Here are full html code of our result page. Pay attention – that I have only single DIV element with text.

index.html



    
        
        Multi-columns with CSS3 | Script Tutorials
        
        
        
    
    
        
            
            
            
            
        

        
            The King sat naked. Like a foolish pauper on the street, he sat leaning
            against  a  cold  wall, drawing in his blue, goose-bumped legs. He shivered,
            with his eyes closed, he listened, but everything was quiet.
            He awoke at midnight from a nightmare and immediatelly understood  that
            he  was  finished.  Some  one  weezed and writhed by the door of the bedroom
            suite, he heard footsteps, metalic jingling and  drunken  mummbling  of  His
            Highness,  Uncle  Buht: "Let me through... Let me.. Break it down, hell with
            it..." Wet with icy sweat, he slintly rolled off  his  bed,  ducked  into  a
            secter  closet,  and  loosing  himself  he ran down the underground passage.
            Something sqelched under his bare feet, the startled rats dashed  away,  but
            he  did  not notice anything, just now, sitting next to a wall he remembered
            everything; the darkness, the slippery walls, and the pain from  a  blow  on
            the  head against the shakled door to the temple, and his own unberable high
            yelp.

            They shall not enter here, he thought. No one shall enter here. Only if
            the King  order's  so.  But  the  King  shall  not  order...  He   snickered
            hysterically. Oh no, the King will not order! He carefully un screwed up his
            eyes  and  saw  his  blue, hairless legs with scraped knees. Still alive, he
            thought. I will live, because they shall not enter here.
            Everything in the temple  was  blueish  from  the  cold  light  of  the
            lanterns -- long glowing tubes that were stretched under the ceiling. In the
            center,  God stood on an eminence, big, heavy, with sparkling dead eyes. The
            King continuously and stupidly stared, until God was suddenly screened by  a
            shabby  lay  brother,  still  a  greenhorn. Scraching, with an open mouth he
            gazed at the naked King. The King squinted once again. Scum, he  thought,  a
            lousy  vermine,  catch the mongrel and to the dogs, for them to ravage... He
            reasoned that he did not remember the lout well, but he was  long  gone.  So
            scrawny,   snotty...   That's  all  right,  we'll  remember.  We'll  remeber
            everything, Your Highness, Uncle Buht. During the father's  reighn,  I  dare
            say you sat quietly, drank a bit and kept silent, were afraid to be noticed,
            you knew that King Prostyaga did not forget you ignoble treachery...
        

        
            Multi-columns with CSS3
            Back to original tutorial on Script Tutorials

Step 2. CSS

Now – all CSS styles

css/main.css

*{
    margin:0;
    padding:0;
}

body {
    background-color:#bababa;
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
}

footer {
    background-color:#212121;
    bottom:0;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    left:0;
    position:fixed;
    width:100%;
    z-index:100;
}

footer h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}

footer a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}

footer .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}

/*new styles*/
.container {
    background:#C5DFF0;
    color:#000;
    margin:20px auto;
    padding:20px;
    position:relative;
    width:800px;

    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;

    box-shadow:1px 1px 5px #111111;

    column-count: 3;
    column-gap: 3em;
    column-rule: 1px dashed black;
    -moz-column-count: 3;
    -moz-column-gap: 3em;
    -moz-column-rule: 1px dashed black;
    -webkit-column-count: 3;
    -webkit-column-gap: 3em;
    -webkit-column-rule: 1px dashed black;
}
.controls {
    background:#C5DFF0;
    margin:20px auto;
    padding:20px;
    position:relative;
    width:800px;

    box-shadow:1px 1px 5px #111111;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}
.controls input[type=button] {
    border: 1px solid #000;
    background-color: #666;
    box-shadow: 0 1px 0 rgba(150, 150, 150, 0.5);
    color: #FFF;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    margin-right: 10px;
    padding: 8px 12px;
}
.controls input[type=button]:hover {
    background-color:#444;
}
.controls input[type=button]:active {
    background-color:#000;
}

Most imporant styles is styles of ‘.container’ selector. See how I’m using our new styles.

Step 3. JavaScript

I added some JS functionality, so you can play with the styles (column-count and column-gap) in real time.

js/script.js

$(function(){
    var iColumns = 3;
    var iGap = 3;
    var cont = document.getElementById('container'); 

    $('#less_cols').click(function(e) { // mouse click handler
        iColumns--; // decreasing amount of columns
        if (iColumns < 1) iColumns = 1;
        cont.style.MozColumnCount = iColumns; // apply styles
        cont.style.WebkitColumnCount = iColumns;
    });
    $('#more_cols').click(function(e) {
        iColumns++; // increasing amount of columns
        if (iColumns > 5) iColumns = 5;
        cont.style.MozColumnCount = iColumns; // apply styles
        cont.style.WebkitColumnCount = iColumns;
    });
    $('#less_gap').click(function(e) {
        iGap--; // decreasing value of gap
        if (iGap < 0) iGap = 0;
        cont.style.MozColumnGap = iGap+'em'; // apply styles
        cont.style.WebkitColumnGap = iGap+'em';
    });
    $('#more_gap').click(function(e) {
        iGap++; // increasing value of gap
        if (iGap > 5) iGap = 5;
        cont.style.MozColumnGap = iGap+'em'; // apply styles
        cont.style.WebkitColumnGap = iGap+'em';
    });
});

Live Demo

download result

Conclusion

I hope that our nice tips help you. Good luck!

How to Create Your Own 5 Stars Voting System

admin — Tue, 04 Oct 2011 17:20:52 +0000

How to create own voting system

Today I prepared very interesting article – today I will tell you how you can create own voting system for your items (any units at your website) with PHP. I prepared two SQL tables: first table will keep our demo items. It contain several fields: title, description, time of adding, rate value and count of rates. Another table will keep records of voting (track). Of course – we will use jQuery too (for better behavior of interface). One of features will restriction to vote twice from one IP during 1 week!

Live Demo

download in package

Now – download the source files and lets start coding !

Step 1. SQL

We will need to add 2 tables into our database:

CREATE TABLE IF NOT EXISTS `s155_items` (
  `id` int(10) unsigned NOT NULL auto_increment,
  `title` varchar(255) default '',
  `description` text NOT NULL,
  `when` int(11) NOT NULL default '0',
  `rate` float NOT NULL,
  `rate_count` int(11) unsigned NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

INSERT INTO `s155_items` (`title`, `description`, `when`, `rate`, `rate_count`) VALUES
('Item #1', 'Here are you can put description of Item #1', UNIX_TIMESTAMP(), '0', '0'),
('Item #2', 'Here are you can put description of Item #2', UNIX_TIMESTAMP()+1, '0', '0'),
('Item #3', 'Here are you can put description of Item #3', UNIX_TIMESTAMP()+2, '0', '0'),
('Item #4', 'Here are you can put description of Item #4', UNIX_TIMESTAMP()+3, '0', '0'),
('Item #5', 'Here are you can put description of Item #5', UNIX_TIMESTAMP()+4, '0', '0');

CREATE TABLE `s155_items_vote_track` (
  `item_id` int(11) unsigned NOT NULL default '0',
  `ip` varchar(20) default NULL,
  `date` datetime default NULL,
  KEY `med_ip` (`ip`,`item_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

This is simple tables: first for records of items, second one – voting tracker

Step 2. PHP

Here are source code of our main file:

index.php

=")  == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE); 

require_once('classes/CMySQL.php'); // including service class to work with database

$sCode = '';
$iItemId = (int)$_GET['id'];
if ($iItemId) { // View item output
    $aItemInfo = $GLOBALS['MySQL']->getRow("SELECT * FROM `s155_items` WHERE `id` = '{$iItemId}'"); // getting info about item from database
    $sCode .= ''.$aItemInfo['title'].'';
    $sCode .= ''.date('F j, Y', $aItemInfo['when']).'';
    $sCode .= 'Description:';
    $sCode .= ''.$aItemInfo['description'].'';

    // draw voting element
    $iIconSize = 64;
    $iMax = 5;
    $iRate = $aItemInfo['rate'];
    $iRateCnt = $aItemInfo['rate_count'];
    $fRateAvg = ($iRate && $iRateCnt) ? $iRate / $iRateCnt : 0;
    $iWidth = $iIconSize*$iMax;
    $iActiveWidth = round($fRateAvg*($iMax ? $iWidth/$iMax : 0));

    $sVot = '';
    for ($i=1 ; $i<=$iMax ; $i++) {
        $sVot .= '';
    }

    $sVoting = <<
    
        
            {$sVot}
        
        
    
    {$iRateCnt} votes

EOS;

    $sCode .= $sVoting;
    $sCode .= 'back';
} else {
    $sCode .= 'List of items:';

    $aItems = $GLOBALS['MySQL']->getAll("SELECT * FROM `s155_items` ORDER by `when` ASC"); // taking info about all items from database
    foreach ($aItems as $i => $aItemInfo) {
        $sCode .= ''.$aItemInfo['title'].' item';
    }
}

?>


    
        
        Creating own rate system | Script Tutorials

        
        
        
    
    
        
            
        
        
            Creating own rate system
            Back to original tutorial on Script Tutorials

This script will draw us list of items by default. And, when we will clicking to any item – this will link like: index.php?id=1 – it will drawing item page. I decided not make something difficult – I prepared just simple page. We will display item title, time of adding (‘when’ field), description, and, most important – our Voting element. This will looks like stars (5 stars). And we can select – how many stars we will give for our vote (from 1 till 5). I added my comments in most of places for better understanding. Ok, next PHP file is:

vote.php

=")  == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE); 

require_once('classes/CMySQL.php');

$iItemId = (int)$_POST['id'];
$iVote = (int)$_POST['vote'];
$sIp = getVisitorIP();

$iOldId = $GLOBALS['MySQL']->getOne("SELECT `item_id` FROM `s155_items_vote_track` WHERE `item_id` = '{$iItemId}' AND `ip` = '{$sIp}' AND (`date` >= NOW() - INTERVAL 7 DAY) LIMIT 1");
if (! $iOldId) {
    $GLOBALS['MySQL']->res("INSERT INTO `s155_items_vote_track` SET `item_id` = '{$iItemId}', `ip` = '{$sIp}', `date` = NOW()");
    $GLOBALS['MySQL']->res("UPDATE `s155_items` SET `rate` = `rate` + {$iVote}, `rate_count` = `rate_count` + 1 WHERE `id` = '{$iItemId}'");
    echo 1;
}

function getVisitorIP() {
    $ip = "0.0.0.0";
    if( ( isset( $_SERVER['HTTP_X_FORWARDED_FOR'] ) ) && ( !empty( $_SERVER['HTTP_X_FORWARDED_FOR'] ) ) ) {
        $ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
    } elseif( ( isset( $_SERVER['HTTP_CLIENT_IP'])) && (!empty($_SERVER['HTTP_CLIENT_IP'] ) ) ) {
        $ip = explode(".",$_SERVER['HTTP_CLIENT_IP']);
        $ip = $ip[3].".".$ip[2].".".$ip[1].".".$ip[0];
    } elseif((!isset( $_SERVER['HTTP_X_FORWARDED_FOR'])) || (empty($_SERVER['HTTP_X_FORWARDED_FOR']))) {
        if ((!isset( $_SERVER['HTTP_CLIENT_IP'])) && (empty($_SERVER['HTTP_CLIENT_IP']))) {
            $ip = $_SERVER['REMOTE_ADDR'];
        }
    }
    return $ip;
}

?>

This file we will using to accept visitors votes and saving its into database. In our project we have another one PHP file:

classes/CMySQL.php

This is service class to work with database prepared by me. This is nice class which you can use too. Database connection details located in this class in few variables, sure that you will able to configure this to your database. I don`t will publish its sources – this is not necessary for now. Available in package.

Step 3. JS

Here are small javascript code which we will using for changing voting element styles on mouse hover. And – for sending data in case of submitting our vote.

js/script.js

$(function(){
    var width = 0;

    $('.votes_buttons a').hover(
        function () {
            width = $(this).attr('id') * 64;
            $('.votes_active').width(width + 'px');
        },
        function () {
            width = $(this).parent().attr('val') * 64;
            $('.votes_active').width(width + 'px');
        }
    );

    $('.votes_buttons a').click(function () {
        var idVal = $(this).parent().attr('id');
        var iCnt = $(this).parent().attr('cnt');
        var voteVal = $(this).attr('id');
        var obj = $(this);
        var iSelWidth = voteVal * 64;

        $.post('vote.php', { id: idVal, vote: voteVal },
            function(data){
                if (data == 1) {
                    width = iSelWidth;
                    $('.votes_active').width(iSelWidth + 'px');
                    iCnt = parseInt(iCnt) + 1;
                    $('.votes_main span b').text(iCnt);
                    $('.votes_buttons').attr('val', voteVal);
                }
            }
        );
    });
});

js/jquery-1.5.2.min.js

This is just jQuery library. Available in package.

Step 4. CSS

Now – all used CSS styles:

css/main.css

/* general styles */
*{
    margin:0;
    padding:0;
}

body {
    background-repeat:no-repeat;
    background-color:#bababa;
    background-image: -webkit-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
    background-image: -moz-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
    background-image: -o-radial-gradient(600px 200px, circle, #eee, #bababa 40%);
    background-image: radial-gradient(600px 200px, circle, #eee, #bababa 40%);
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
    min-height:600px;
}

footer {
    background-color:#212121;
    bottom:0;
    box-shadow: 0 -1px 2px #111111;
    display:block;
    height:70px;
    left:0;
    position:fixed;
    width:100%;
    z-index:100;
}

footer h2{
    font-size:22px;
    font-weight:normal;
    left:50%;
    margin-left:-400px;
    padding:22px 0;
    position:absolute;
    width:540px;
}

footer a.stuts,a.stuts:visited{
    border:none;
    text-decoration:none;
    color:#fcfcfc;
    font-size:14px;
    left:50%;
    line-height:31px;
    margin:23px 0 0 110px;
    position:absolute;
    top:0;
}

footer .stuts span {
    font-size:22px;
    font-weight:bold;
    margin-left:5px;
}

.container {
    border:3px #111 solid;
    color:#000;
    margin:20px auto;
    padding:15px;
    position:relative;
    text-align:center;
    width:500px;

    border-radius:15px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
}

.votes_main {
    margin: 10px auto;
    overflow: hidden;
    width: 450px;
}
.votes_gray {
    background-image: url("../images/star_gray.png");
    float: left;
    height: 64px;
    position: relative;
}
.votes_active {
    background-image: url("../images/star.png");
    height: 64px;
    left: 0;
    position: absolute;
    top: 0;
    z-index: 1;
}
.votes_buttons {
    left: 0;
    position: absolute;
    top: 0;
    z-index: 2;
}
.votes_button {
    border: medium none;
    height: 64px;
    margin: 0;
    padding: 0;
    width: 64px;
}
.votes_main span {
    color: #333333;
    display: block;
    float: left;
    font-weight: bold;
    font-size: 18px;
    line-height: 64px;
    margin-left: 10px;
}

Step 5. Images

Last step – used images:

Live Demo

download in archive

Conclusion

Today we prepared great voting system for your website. Sure that this material will useful for your own projects. Good luck in your work!

Creating a Robo Splash Page Layout

admin — Mon, 03 Oct 2011 15:21:19 +0000

Robo splash page layout

Today I present you a new layout – Robo splash page. This is will modern looking HTML5 / CSS3 splash page layout which you will able to get for your website. So, let’s go inside and read up – how to make similar page.

Here are how our final result will looks:

Live Demo

download result

Get started

Ok, let`s start. Lets create new folder and few folders inside (to keep all well structured):

css – which will contain our CSS stylesheets (style.css)
images – which will contain all used images
js – will contain JS files (html5.js for today)

Head section code

Now I am going to give you the usual HTML head area of index.html with the attached CSS/JS.




    Robo splash page layout | Script tutorials

Moving forward – Body

Whole layout consist of 3 main section: header (with logo and login form), main section (promo, info area and join form) and footer (commonly – here are just different links). Whole layout looks like:




    
        
            
        

        
            
                ......
            
        
    



    
        
            Welcome to our website.
            
        
        
            ......
        
        
            ......
        
    



    
        
             Script-tutorials © 2011
        
        
            Find Friends |
            ......

here are you can see base CSS styles

/* base styles */
body {
    background-color: #f0edeb;
    color: #333;
    font-family: Verdana,Arial,sans-serif;
    font-size: 11px;
    margin: 0;
    padding: 0;
    text-align: left;
}
a {
    color: #000;
    cursor: pointer;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
label {
    color: #222;
    cursor: pointer;
    font-weight: bold;
    vertical-align: middle;
}
textarea, input[type=text], input[type=password] {
    border: 1px solid #BDC7D8;
    font-family: Verdana,Arial,sans-serif;
    font-size: 11px;
    padding: 3px;
}
select {
    border: 1px solid #BDC7D8;
    font-family: Verdana,Arial,sans-serif;
    font-size: 11px;
    padding: 2px;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

1. Header section with logo and login form

Our header will logo at left and login form at right side. Here are HTML for that section:


    
        
            
        

        
            
                
                    
                        
                            Email
                        
                        
                            Password
                        
                    
                    
                        
                            
                        
                        
                            
                        
                        
                            
                                
                            
                            
                                
                            
                        
                    
                    
                        
                            
                                
                                Keep me logged in
                            
                        
                        
                            Forgot your password?

CSS for header section

/* header section */
header {
    background-color: #ddd;
    height: 90px;
    min-width: 980px;
    width: 100%;
    z-index: 300;
}
header .header_bar {
    margin: 0 auto;
    overflow: hidden;
    padding-top: 13px;
    width: 964px;
}
header .logo {
    float: left
}
header .logo img {
    border-width:0;
}
header #login {
    float: right
}
header #login table tr {
    vertical-align: top;
}
header #login table tr td {
    padding: 0 0 0 14px;
}
header #login .t {
    padding-bottom: 4px;
}
header #login .t label {
    color: #000;
    font-weight: bold;
    padding-left: 1px;
}
header #login input[type=text], header #login input[type=password] {
    border-color: #1D2A5B;
    margin: 0;
    padding-bottom: 4px;
    width: 142px;
}
header #login .login_btn input, header #login .join_btn input {
    border: 1px solid #000;
    background-color: #666;
    box-shadow: 0 1px 0 rgba(150, 150, 150, 0.5);
    padding: 2px 3px;
    text-align: center;
    text-decoration: none;
    vertical-align: top;
    white-space: nowrap;
    color: #FFF;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    margin: 0;
    outline: medium none;
}
header #login .login_btn input:active {
    background: none repeat scroll 0 0 #000;
}
header #login .b {
    padding-top: 4px;
}
header #login .b input[type=checkbox] {
    float: left;
    margin: 0;
    padding: 0;
}
header #login .b label {
    display: block;
    font-weight: normal;
    margin-left: 17px;
    vertical-align: baseline;
}
header #login .b a {
    font-weight: normal;
}

2. Main content section

After our header area – we have main content area. At left side it contain promo image, and little Info block with description of our website. Plus, when we will click to Join button – join form will appear at right side instead Info block.


    
        
            Welcome to our website.
            
        
        
            
                Our website is web development blog, which will provide visitors with latest and interesting content and updates regarding making web sites, programming , tutorials etc.
            
        
        
            
                Sign Up
                Today for a free.
            
            
                
                    
                        
                            First Name:
                            
                        
                        
                            Last Name:
                            
                        
                        
                            Your Email:
                            
                        
                        
                            Re-enter Email:
                            
                        
                        
                            New Password:
                            
                        
                        
                            I am: 
                                
                                    
                                
                            
                        
                        
                            Birthday:

CSS for Main content section

/* main section */
#main {
    background: -moz-linear-gradient(#ffffff, #f0edeb); /* FF 3.6+ */
    background: -ms-linear-gradient(#ffffff, #f0edeb); /* IE10 */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f0edeb)); /* Safari 4+, Chrome 2+ */
    background: -webkit-linear-gradient(#ffffff, #f0edeb); /* Safari 5.1+, Chrome 10+ */
    background: -o-linear-gradient(#ffffff, #f0edeb); /* Opera 11.10 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0edeb'); /* IE6 & IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0edeb')"; /* IE8+ */
    background: linear-gradient(#ffffff, #f0edeb); /* the standard */ 

    position: relative;
}
#main #content {
    margin: 0 auto;
    min-height: 600px;
    overflow: hidden;
    width: 980px;
}
#main #content #promo {
    float:left;
    padding-left: 10px;
    width: 550px;
}
#main #content #promo .title {
    color: #0E385F;
    font-size: 20px;
    font-weight: bold;
    line-height: 29px;
    margin-top: 40px;
    padding-left: 10px;
    width: 450px;
    word-spacing: -1px;
}
#main #content #promo .img {
    background: url("../images/robo.png") no-repeat scroll 0 0 transparent;
    height: 400px;
    margin-top: 20px;
}
#main #content #info {
    float: right;
    padding: 43px 0 0 15px;
    width: 383px;
}
#main #content #info .title {
    font-size: 17px;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: justify;
    width: 354px;
}
#main #content #join {
    float: right;
    padding: 43px 0 0 15px;
    width: 383px;
}
#main #content #join .title {
    border-bottom: 1px solid #9AAFCA;
    margin-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: right;
    width: 354px;
}
#main #content #join .title .l1 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}
#main #content #join .title .l2 {
    font-size: 15px;
    font-weight: normal;
    margin-bottom: 10px;
}
#main #content #join .cont {
    padding-bottom: 30px;
}
#main #content #join table {
    margin: 0 0 7px;
}
#main #content #join table td.label {
    color: #000;
    font-size: 13px;
    padding-right: 3px;
    text-align: right;
    width: 105px;
}
#main #content #join table label {
    color: #000;
    font-weight: normal;
    vertical-align: middle;
}
#main #content #join .field_container {
    display: inline-block;
    position: relative;
    width: auto;
}
#main #content #join .field_container input {
    border-color: #96A6C5;
    font-size: 16px;
    margin-top: 2px;
    padding: 6px;
    width: 250px;
}
#main #content #join .field_container select {
    border-color: #96A6C5;
    font-size: 13px;
    height: 30px;
    margin: 2px 0 0;
    padding: 5px;
}
#main #content #join .join_btn {
    margin: 0 0 0 110px;
}
#main #content #join .join_btn input[type=submit] {
    border: 1px solid #000;
    background-color: #666;
    box-shadow: 0 1px 0 rgba(150, 150, 150, 0.5);
    padding: 8px;
    text-align: center;
    text-decoration: none;
    vertical-align: top;
    white-space: nowrap;
    color: #FFF;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    outline: medium none;
}
#main #content #join .join_btn input[type=submit]:active {
    background: none repeat scroll 0 0 #000;
}

3. Footer section

Finally, here are our footer area


    
        
             Script-tutorials © 2011
        
        
            Find Friends |
            About |
            Advertising |
            Developers |
            Privacy |
            Terms |
            Help

CSS for footer section

/* footer section */
footer {
    background-color: #ddd;
    bottom: 0;
    padding: 8px 0;
    position: fixed;
    text-align: center;
    width: 100%;
}
footer #links {
    margin:0 auto;
    overflow:hidden;
    position: relative;
    width: 960px;
}
footer #links .copy {
    margin-right: 20px;
    float: left;
    color:#808080;
}
footer #links .nav {
    text-align: right;
}
footer #links a {
    color: #000000;
    font-size: 12px;
    text-decoration: none;
}
footer #links a:hover {
    text-decoration: none;
}

Live Demo

download result

Conclusion

Now our layour finally complete! You can use this as is, but please leave the back link to us intact. Don`t forget to say thanks Good luck!

How to Create a Fantastic Photo Album with TN3

admin — Wed, 21 Sep 2011 17:10:29 +0000

How to create photo album with TN3

During browsing web – I noticed new interesting library – TN3. This is jQuery image gallery with slideshow, transitions effects, multiple album options etc. Plus you will able to customize it (via CSS). Today I will show you how you can implement this gallery to create own photo album.

Here are links to demo and downloadable package:

Live Demo

download in package

Ok, lets download the example files and goto coding !

Step 1. HTML

index.html

As usual, we start with the HTML. I don`t will scare you with huge code here, wut will show most important.




    
    

    
    
    

    Creating photo galleries with TN3 | Script Tutorials



    Creating photo galleries with TN3 | Script Tutorials

    
        

            Image 1 title
            Image 1 description
            images/thumb_pic1.jpg

            
                
                    Image 1 title
                    Image 1 description
                    
                    
                    
                
                
                    Image 2 title
                    Image 2 description
                    
                    
                    
                
                ........
                
                ........

As you can see – gallery based on OL-LI elements. Whole structure very easy for understanding, isn`t it?

Step 2. CSS

Here are used CSS files for our gallery:

css/tn3/tn3.css

This CSS file from standard package of that TN3 gallery. We do not have to publish it here – it will be available in our package.

css/style.css

/* demo page styles */
body {
    background:#eee;
    margin:0;
    padding:0;
}
.example {
    position:relative;
    background-color:#fff;
    width:768px;
    overflow:hidden;
    border:1px #000 solid;
    margin:20px auto;
    padding:20px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}

/* custom styles */
.tn3-gallery {
    width: 768px;
    height: 559px;
}
.tn3-image {
    width: 768px;
    height: 512px;
}
.tn3-controls-bg {
    width: 768px;
}
.tn3-thumbs {
    width: 565px;
}

In our CSS file we just override a few basic styles.

Step 3. JS

js/jquery.tn3lite.min.js

This is library file, and its always available in package

js/main.js

$(document).ready(function() {
    var tn3 = $('.tn3gallery').tn3({
        skinDir:'css',
        imageClick:'fullscreen',
        image:{
            maxZoom:2.0,
            crop:true,
            clickEvent:'dblclick',
            transitions:[{
                type:'blinds'
            },{
                type:'grid'
            },{
                type:'grid',
                duration:350,
                easing:'easeInQuad',
                gridX:1,
                gridY:8,
                // flat, diagonal, circle, random
                sort:'random',
                sortReverse:false,
                diagonalStart:'bl',
                // fade, scale
                method:'scale',
                partDuration:360,
                partEasing:'easeOutSine',
                partDirection:'left'
            }]
        }
    });
});

First important things is: skinDir:’css’

With this option, we specify the folder where there will be a base css file of TN3 gallery.

Here are you can find another useful documentation of this gallery.

Step 4. Images

All our gallery images located in ‘images’ folder. Here are thumb images (thumb_pic1.jpg, thumb_pic2.jpg .. thumb_pic12.jpg) and full-size images (pic1.jpg, pic2.jpg .. pic12.jpg). Plus several small files of TN3 gallery located in same skin folder ‘css/tn3′. Here are just few files like: bg.png, tbg.png, tbg2.png and tn3.png

Live Demo

download in package

Conclusion

I hope that today we made new perfect gallery. TN3 is great library, if you will learn it – it will open to you new possibilities. Good luck in your projects!

Creating new HTML5/CSS3 single page layout – Art theme

admin — Thu, 01 Sep 2011 13:42:59 +0000

Creating new HTML5&CSS3 single page layout – Art theme

Today I will like to product new great masterpiece – new template with codename: ‘Art theme’. This will nice HTML5 template with nice gray colors. Hope that you will like new styles and you will learn some new coding lessons.

I going to start step-by-step tutorial for creating html5-css3 layout.

Final Result

Live Demo

download result

Get started

Ok, let`s start. Lets create new folder and several folders inside (to keep all well structured):

css – which will contain our CSS stylesheets (nivo-slider.css, reset.css and style.css)
images – which will contain all used images
js – will contain JS files (html5.js, jquery.js, jquery.nivo.slider.pack.js and main.js)

Head section code

Now I am going to give you the usual HTML head area of index.html with the attached CSS/JS.




    Art HTML5&CSS3 single page layout | Script tutorials demo

Moving forward – Main layout (body)

Whole layout consist of 4 main section: header (with logo and navigation menu), main section (search form, social icons, slider area and first featured content area – 3 elements), second content section (two column layout for all your rest content) and footer. It looks like:

here are you can see base CSS styles

/* base styles */
body {
    background:url(../images/bg.jpg) repeat scroll center top #000;
    background-attachment:fixed;
    color:#737373;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:100%/1.125em;
}
a {
    color:#c46501;
    text-decoration:underline;
}
a:hover {
    text-decoration:none;
}
.clear {
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
    width:0;
}
.container{
    margin:0 auto;
    position:relative;
    width:960px
}

Header section with logo and navigation

Our header will contain search bar, social icons (at top) and logo at left side. Here are HTML for that section:

    

        
            
                
            
            Art template
        

        
            
                Home
                Tutorials
                About
                Go Back To The Tutorial

CSS for header section

/* header section */
header {
    height:105px;
    margin:0 0 6px;
    position:relative;
    width:100%;
    z-index:2
}
.logo {
    left:19px;
    position:absolute;
    text-align:center;
    top:20px;
}
.logo img {
    margin:0 auto 3px;
}
.logo p {
    color:#808D8D;
    font-size:13px;
    font-style:italic;
    line-height:16px;
}

/*navigation menu*/
nav {
    position:absolute;
    top:10px;
    right:0px;
    z-index:2;
}
nav ul, nav ul * {
    margin:0;
    padding:0;
    list-style:none;
}
nav ul li {
    float:left;
    position:relative;
    background:url(../images/menudiv.png) no-repeat scroll 0 0 transparent;
    padding:0 0 0 2px;
}
nav ul li a {
    color:#8A9CA0;
    display:block;
    font-size:18px;
    height:85px;
    line-height:120px;
    padding:0 0 0 8px;
    text-decoration:none;
    text-transform:uppercase;
    min-width:130px;
}

Main content section

After our header area – we have main content area. This is pretty big section – in top we having search form and social icons, then we have slider (nivoSlider), and after slider – featured posts.

    
        

            
                
                
            

            
                
                
                
                
            

        

        
            
                
                
                
            
            
                Your promo text 1
                Promo text description here
            
            
                Your promo text 2
                Promo text description here
            
            
                Your promo text 3
                Promo text description here
            
            
                Your promo text 4
                Promo text description here
            
        

        
            
                
                    
                    Creating A CSS3 Animated Menu
                        Continue
                    
                
                
                    
                    Animated jQuery Progressbar Plugin
                        Continue
                    
                
                
                    
                    
                        Fresh collection of Original Captchas
                        Continue

CSS for Main content section

/* main section */
#main {
    background:url(../images/mainbg.png) repeat scroll left top transparent;
    border:1.5px dashed #CBC9C7;

    -moz-box-shadow:0 0 5px 7px #eeeeee;
    -webkit-box-shadow:0 0 5px 7px #eeeeee;
    box-shadow:0 0 5px 7px #eeeeee;
    -o-box-shadow:0 0 5px 7px #eeeeee;
}
#social {
    margin:10px auto;
    width:908px;
    overflow:hidden;
}
#social form {
    float:left;
    background:url(../images/search1.png) no-repeat scroll 0 0 transparent;
    height:28px;
    width:196px;
}
#social form input[type="text"] {
    background:none repeat scroll 0 0 transparent;
    border:medium none;
    color:#B5B2AA;
    float:left;
    font-size:12px;
    font-style:italic;
    height:18px;
    line-height:1.4em;
    margin:0;
    overflow:hidden;
    padding:4px 4px 4px 11px;
    width:155px;
}
#social form input[type="submit"] {
    background:url(../images/search2.png) no-repeat scroll 0 0 transparent;
    border:medium none;
    cursor:pointer;
    float:left;
    height:28px;
    margin:0;
    overflow:hidden;
    padding:0;
    width:26px;
}
#social ul {
    float:right;
    list-style:none outside none;
    margin:0;
    padding:0;
}
#social ul li {
    float:left;
    padding:0 0 0 3px;
}
#social ul li a:hover img {
    margin-top:1px;
}
#content {
    margin:10px auto;
    width:908px;
    overflow:hidden;
}
#content ul {
    list-style:none outside none;
    margin:0;
    padding:0;
}
#content ul li {
    color:#FFFFFF;
    float:left;
    height:288px;
    margin:0 0 0 22px;
    overflow:hidden;
    padding:0;
    position:relative;
    width:288px;
}
#content ul li:first-child {
    margin:0;
}
#content ul li img {
    float:left;
}
#content ul li div {
    background:url(../images/s_caption.png) repeat scroll 0 0 transparent;
    bottom:-50px;
    left:0;
    padding:14px 18px 13px 15px;
    position:absolute;
    width:255px;

    -moz-transition:bottom 0.25s linear;
    -ms-transition:bottom 0.25s linear;
    -o-transition:bottom 0.25s linear;
    -webkit-transition:bottom 0.25s linear;
    transition:bottom 0.25s linear;
}
#content ul li:hover div {
    bottom:0;
}
#content ul li div p {
    color:#FFFFFF;
    font-size:13px;
    line-height:16px;
    padding:0 0 2px;
}
#content ul li div a.more {
    color:#FFFFFF;
    float:right;
    font-size:15px;
    font-style:italic;
    line-height:1.2em;
    text-decoration:underline;
}

Customized styles of our slider (nivoSlider) I decided to move to external file

css/nivo-slider.css

This file always available in our package. After main section I decided to make another one section for content

Post #1
Post 1 description
Continue

Post #2
Post 1 description
Continue

Post #3
Post 1 description
Continue

Attractive Presentation with HTML5
Today we will prepare something new – presentation. And we will using all interesting what can give us HTML5. Presentation itself will contain 5 easy slides. We will able to use navigation arrow keys for sliding, spacebar, display notes, sidebar with some custom content. Here are new html5 tags which we going to use: nav, menu, section, aside, header and hgroup. Sure, that now is time to check our demo.
Continue

Creating Advance Level Login system with Logic captcha
Long ago, I talked about a simple easy login system. And today, I decided to improve the system. The new version will use the methods SHA1 + MD5 (with salt) to encode passwords. We also do not use cookies to store information, and will use the sessions. And, in this version I will implement an interesting logic captcha (where we will need to choose the correct answer in order to prove that we are human, not machine).
Continue

Here you can keep all another your posts (or another necessary content) of your website. Here are related CSS styles:

/* submain section */
#submain {
    background-color:#dbddda;
    margin-top:20px;
    padding:10px;

    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}
#subcontent #left {
    float:left;
    width:30%;
}
#subcontent #right {
    float:left;
    margin-left:1%;
    width:69%;
}
#subcontent ul {
    list-style:none outside none;
    margin:0;
    padding:0;
}
#subcontent ul li {
    background-color:#FFFFFF;
    color:#737373;
    font-size:12px;
    line-height:18px;
    padding:7px;
    margin-bottom:10px;
    overflow:hidden;
}
#subcontent ul li:hover {
    color:#434343;
}
#subcontent ul li div {
    border:1px dashed #CBC9C7;
    padding:7px;
    overflow:hidden;
}
#subcontent ul li:hover div {
    border-color:#434343;
}
#subcontent ul li h3 {
    font-size:24px;
    font-weight:normal;
    line-height:1.2em;
    margin:0;
    padding:0 0 3px;
    text-transform:uppercase;
}
#subcontent ul li p {
    padding:0 0 13px;
}
#subcontent ul li a.more {
    color:#829597;
    float:right;
    font-size:12px;
    line-height:16px;
    padding:0 18px 0 0;
    text-decoration:none;
    text-transform:uppercase;
}
#subcontent ul li:hover a.more {
    color:#434343;

    -moz-transition:color 0.5s linear;
    -ms-transition:color 0.5s linear;
    -o-transition:color 0.5s linear;
    -webkit-transition:color 0.5s linear;
    transition:color 0.5s linear;
}

Footer section

Finally, here are our footer area

    
            Art template © 2011 Privacy Policy

            Template by Script Tutorials

CSS for footer section

/* footer section */
footer{
    padding:25px 0;text-align:center;
    color:#979590;
    font-size:12px;
}
footer a{
    text-decoration:none;
    color:#979590;
}

JS for our template

Here are all necessary JS scripts:

js/html5.js, js/jquery.js and js/jquery.nivo.slider.pack.js

All these libraries already available in package

js/main.js

$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'random',
        slices:15,
        boxCols:8,
        boxRows:8,
        animSpeed:500,
        pauseTime:4000,
        directionNav:false,
        directionNavHide:false,
        controlNav:false,
        captionOpacity:1
    });
});

nivoSlider have very easy initialization – so I hope that all easy here too.

Live Demo

download result

Conclusion

Congrats, our new template ‘Art theme’ is complete! You can use this as is, but please leave the back link to us intact. Don`t forget to say thanks Good luck!

Creating CSS3/jQuery crossbrowser Drop-down menu with tabs

admin — Mon, 15 Aug 2011 18:44:33 +0000

Creating CSS3/jQuery crossbrowser Drop-down menu with tabs

This is our seventh CSS3 menu. Today we will make dropdown menu with parental tabs (as first level). Part of the work we pass on to the shoulders of jQuery (switching tabs, display popups). In the current version – we have three levels of menus. So, lets start !

This is our final result (how menu will looks):

Here are samples and downloadable package:

Live Demo

download in package

Ok, download our package and lets start creating this menu!

Step 1. HTML

Here are html code of our menu. I will hide repeating elements to make code smaller here. Anyway – you will able to see whole code in our package.

index.html




    
    
    
    CSS3/jQuery Drop-down menu with tabs #7




    
    
        
            Section one
            Section two
            Section three
            Section four
        
    

    
    
        
            
            Home
            Tutorials
                
                
                    HTML / CSS
                    JS / jQuery
                    PHP
                    MySQL
                
            
            Resources
                
                    XSLT
                    Ajax
                    HTML / CSS
                
            
            Menus #3
                
                    link 31
                    link 32
                    link 33
                    link 34
                    link 35
                
            
            Menus #4
                
                    
                
            
            About
            Back
        
        
            Menus #5
            Menus #6
            Menus #7

Step 2. CSS

Here are used CSS styles. First two selectors (you can skip it) belong to our demo page. All rest – menu #7 styles.

css/style.css

/* demo page styles */
body {
    background:#eee;
    margin:0;
    padding:0;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 11px;
}
.example {
    position:relative;
    background:url("../images/background.jpg") no-repeat scroll center center #fff;
    width:640px;
    height:586px;
    border:1px #000 solid;
    margin:20px auto;
    padding:5px 0;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}

/* main menu styles */

/* tabs section */
#tabs-container {
    clear:both;
    font-size:11px;
    height:26px;
    margin:0 auto;
    padding:0
}
.tabs li {
    float:left;
    list-style:none;
    position:relative
}
.tabs li a:first-child {
    margin-left:10px
}
.tabs li a {
    background:#f3f3f3;
    border:none;
    border-left:1px solid #d5d5d5;
    border-right:1px solid #d5d5d5;
    border-top:1px solid #d5d5d5;
    color:#333;
    display:block;
    margin:0 2px 0 0;
    padding:6px 10px 4px
}
.tabs li.active a {
    -webkit-border-radius:4px 4px 0 0;
    background:#fff;
    border-bottom:1px solid #fff;
    border-left:1px solid #d5d5d5;
    border-radius:4px 4px 0 0;
    border-right:1px solid #d5d5d5;
    border-top:1px solid #d5d5d5;
    color:#222;
    display:block;
    padding:6px 10px 4px
}
.tabs li.child a {
    -webkit-border-radius:0 4px 0 0;
    background:#f3f3f3;
    border-radius:0 4px 0 0;
    color:#333;
    display:block;
    margin:0;
    padding:6px 10px 4px
}
.tabs li a:hover {
    background:#fafafa;
    border-bottom:1px solid #d5d5d5;
    color:#fff;
    text-decoration:none
}

/* Targeting the first level menu */
.tabs {
    display:block;
    margin:0;
    padding:1px 0 2px;
    position:absolute;
    z-index:100
}
.tabs > li > a:hover {
    background:#ececec;
    color:#222
}
.tabs > li.active > a:hover {
    -moz-border-radius:3px 3px 0 0;
    -webkit-border-radius:3px 3px 0 0;
    background:#fff;
    border-bottom:1px solid #fff;
    border-radius:3px 3px 0 0;
    color:#222
}

/*Middle Drop-Down Navigation*/
#nav-container {
    border-bottom:1px solid #d5d5d5;
    border-top:1px solid #d5d5d5;
    clear:both;
    font-size:11px;
    height:33px;
    margin:0 auto;
    padding:0
}

/* Targeting both first and second level menus */
.nav li {
    float:left;
    list-style:none;
    position:relative
}
.nav li a {
    background:url(images/arrow.png) no-repeat right;
    border:none;
    color:#222;
    display:block;
    margin:0 5px 0 0;
    padding:5px 20px 5px 8px
}

/* Targeting the first level menu */
.nav {
    display:block;
    margin:0;
    padding:5px 0 2px;
    position:absolute;
    z-index:100
}
.nav > li > a:hover {
    -moz-border-radius:3px 3px 0 0;
    -webkit-border-radius:3px 3px 0 0;
    background:#507aa5 url(images/arrow_hover.png) no-repeat right;
    border-radius:3px 3px 0 0;
    color:#fff;
    padding:5px 20px 5px 8px
}

/* Targeting the second level menu */
.nav li ul {
    -moz-border-radius-bottomleft:3px;
    -moz-border-radius-bottomright:3px;
    -moz-border-radius-topright:3px;
    -moz-box-shadow:1px 1px 1px #333;
    -webkit-border-bottom-right-radius:3px;
    -webkit-box-shadow:1px 1px 1px #333;
    background:#507aa5;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
    border-top-right-radius:3px;
    box-shadow:1px 1px 1px #333;
    color:#222;
    display:none;
    margin:0;
    padding:2px 0;
    position:absolute;
    width:140px
}
.nav li ul li {
    width:100%
}
.nav li ul li a {
    background:#507aa5;
    border:none;
    color:#fff;
    line-height:25px;
    margin:0;
    padding:0 0 0 8px
}
.nav li ul li a:hover {
    background:#466A90
}
.nav li ul li.strong-archive a {
    border-top:1px solid #466A90;
    font-weight:600
}

/* A class of current will be added via jQuery */
.nav li.current > a {
    -moz-border-radius:3px 3px 0 0;
    -moz-box-shadow:1px 1px 1px #333;
    -webkit-border-radius:3px 3px 0 0;
    -webkit-box-shadow:1px 1px 1px #333;
    background:#507aa5 url(images/arrow_hover.png) no-repeat right;
    border-radius:3px 3px 0 0;
    box-shadow:1px 1px 1px #333;
    color:#fff
}

/* CSS fallback */
.nav li:hover > ul.child {
    display:block
}

Step 3. Images

Here are only one image for background of demo:

Step 4. JS

In our menu I using jQuery a little. Beside jquery.js (in ‘js’ folder), I have also:

js/script.js

$(document).ready(function(){
    $('.tabs li a').click(function () {
      $('.tabs li').removeClass('active');
      $(this).parent().addClass('active');

      $('.nav').hide();
      var index = $('.tabs li a').index(this);
      $('.nav').eq(index).show();
      return false;
    });

    $('.nav li').has('ul').hover(function(){
        $(this).addClass('current').children('ul').fadeIn();
    }, function() {
        $(this).removeClass('current').children('ul').hide();
    });
});

This code is very simple, so I hope to not have to explain every line here.

Live Demo

download in package

Conclusion

Today we made new nice menu (seventh), Your comments and thanks are very welcomed. Good luck!

Creating an Attractive HTML CSS Anime Theme Website Layout

admin — Wed, 10 Aug 2011 17:08:21 +0000

Creating an Attractive HTML CSS Anime Theme Website Layout

Today I will like to product new masterpiece – new template with codename: ‘Anime theme’. This will nice HTML5 template with good colors. Hope that you can learn some new coding lessons and download our result and use it at your own site (its free as usual).

I going to start step-by-step tutorial for creating html-css layout.

Final Result

Live Demo

download result

Get started

Ok, let`s start. Lets create new folder and few more folders inside (to keep all well structured):

css – which will contain CSS stylesheets (menu.css and style.css)
images – which will contain all used images
js – will contain JS files (html5.js)

Head section code

Now I am going to give you the usual HTML head area of index.html with the attached CSS/JS.




    Creating a HTML5 & CSS3 Single Page Web Layout #5 Anime theme | Script tutorials

Moving forward – Main layout (body)

Whole layout consist of 4 main section: header (with social icons and search), logo, main section (nav menu, main content in 2 columns) and footer. It looks like:


    
        ........
    

    
    
        ........
    

    
        ........
    

    
        ........

here are you can see base CSS styles

/* base common styles */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block;}
mark, rp, rt, ruby, summary, time {display:inline;}

* {
    margin:0;
    padding:0;
}
img {
    border-width:0;
}
body {
    background:url(../images/bg.jpg) repeat-x scroll center top #000;
    color:#c7b8a3;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:0.75em;
}
a {
    color:#c46501;
    text-decoration:underline;
}
a:hover {
    text-decoration:none;
}
.clear {
    clear:both;
    display:block;
    height:0;
    overflow:hidden;
    visibility:hidden;
    width:0;
}

Header section and logo

Our header will contain search bar, social icons (at top) and logo at left side. Here are HTML for that section:

CSS for Header section

/*header*/
header {
    background-color:#1f1f1f;
}
header .header {
    overflow:hidden;
    position:relative;
    width:960px;
    height:42px;
    margin:0 auto;
}
header .search {
    float:right;
    margin-top:10px;
    width:300px;
}
header .search input[type=text] {
    background-color:#443e30;
    border:1px solid #2F2C29;
    color:#FFF;
    font-size:1em;
    height:20px;
    margin-right:5px;
    width:203px;
    padding:1px 0 0 3px;
}
header .search input[type=submit] {
    background-image:url(../images/search.gif);
    height:21px;
    width:60px;
    font-size:0.9em;
    border-width:0;
}
header .social_icons {
    float:right;
    margin-right:5px;
    margin-top:5px;
}
.logo {
    position:relative;
    width:960px;
    height:225px;
    margin:0 auto;
}
.logo img {
    margin:20px 10px;
}

Main content section

After our header area – we have main content area. In top we will have navigation menu, then – rest content (2 columns). First column can contain full length posts, second – for categories (or archive links). Of course – you can customize here anything.

    

        
        
            
            Home
            Anime News
            Anime Archive
            About Us
            Feedback
            Contact
            Tutorial
            
        
        

        

            
                
                    31July
                    The Ghost with the Most
                
                
                    
Back in March I wrote a Brain Diving column on Otsuichi's Summer, Fireworks, and My Corpse, bragging about how nice the weather was in Austin and that I was getting in the mood for summer. Ugh, what was I thinking? Now that we've broken the record for the most number of consecutive days over 100 F, I feel that by writing that I was like Homer Simpson running around shouting "No comeuppance!" You can have summer - I'm thoroughly done with it.
                
                
                    10 Comments
                
            
            
                
                    17July
                    Disney To Adapt Tuxedo Gin
                
                
                    
Walt Disney Pictures has hired Reno 911 co-creator Robert Ben Garant to write "Tux," a screenplay based on Tokihiko Matsuura`s romantic comedy manga Tuxedo Gin. The 1997-2000 manga series stars "a young street fighter who falls into a coma and learns that he has lived his life so selfishly that he only has enough karma points to be reincarnated as an animal 15 pounds or less. Trapped in the body of a chin-strap penguin, he tries to overcome the humiliation and rack up enough good deeds to get his old body back and save the girl he loves." Garant wrote the screenplays for Disney`s 2005 films Herbie Fully Loaded and The Pacifier. The film will be produced by Paul Young and Peter Principato of Principato-Young Entertainment, VIZ Media`s Jason Hoffs, and Shogakukan`s Ichiro Takase.
                
                
                    20 Comments
                
            

        

        
            
                Categories
                
                    Black & white (4)
                    Fantasies (3)
                    Music (3)
                    Nature (3)
                    Portraits (2)
                    Urban (2)
                
            

            
                Archives
                
                    July 2011 (5)
                    June 2011 (5)
                    May 2011 (5)
                    April 2011 (5)
                    March 2011 (5)
                    February 2011 (5)
                    January 2011 (5)

CSS for navigation menu

css/menu.css

nav {
    overflow:hidden;
    position:relative;
    width:910px;
    background:url("../images/menu-bg.png") no-repeat scroll left top transparent;
    margin:10px auto;
    padding:10px;
}
nav ul {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    overflow:hidden;
    margin:0;
    padding:0;
}
nav ul li {
    background:url("../images/menu-devider.gif") no-repeat scroll left top transparent;
    float:left;
    font-size:1.5em;
    line-height:normal;
    margin-left:-2px;
    overflow:hidden;
    padding:0;
}
nav ul li a {
    color:#000;
    display:block;
    font-family:Tahoma,Arial,Helvetica,serif;
    font-weight:400;
    text-decoration:none;
    text-transform:none;
    padding:3px 24px 5px 26px;
}
nav ul li a:hover {
    text-decoration:none;
    color:#fc0;
}

CSS for Main content section

/*center content*/
section.content {
    overflow:hidden;
    position:relative;
    width:960px;
    background:transparent url(../images/cbg.png) repeat-x scroll center top;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    margin:0 auto;
}
.content .column {
    float:left;
    width:605px;
    padding:0 23px 7px 28px;
}
.content .sidebar {
    float:left;
    width:235px;
    border-left:1px solid #444;
    padding:0 39px 7px 25px;
}

.post {
    overflow:hidden;
    padding-bottom:13px;
}
.post .title {
    overflow:hidden;
    padding-top:5px;
    width:100%;
}
.post .title .date {
    background:url("../images/date-bg.png") no-repeat scroll left top transparent;
    color:#444;
    float:left;
    font-size:1.167em;
    font-weight:400;
    line-height:1em;
    margin-right:16px;
    text-align:center;
    width:69px;
    padding:5px 0 8px;
}
.title .date span {
    display:block;
    font-size:2.357em;
    line-height:1em;
}
.post .title h2 {
    color:#C7B8A3;
    font-size:2.5em;
    font-weight:400;
    line-height:1.01em;
    text-transform:none;
    padding:15px 0 0;
}
.post .title h2 a {
    color:#C7B8A3;
    text-decoration:none;
}
.post .title h2 a:hover {
    text-decoration:underline;
}
.post .text-box {
    font-size:1.09em;
    line-height:1.35em;
    overflow:hidden;
    padding-top:10px;
    padding-bottom:10px;
    width:100%;
}
.post .text-box img {
    margin:10px 0;
}
.post .comments {
    color:#E29111;
    font-size:1.083em;
    line-height:1em;
    overflow:hidden;
    text-transform:none;
    padding:0 0 16px;
}

.sidebar .block {
    padding:7px 30px 50px 7px;
}
.sidebar .block h2 {
    font-size:2.5em;
    margin:10px 0;
}
.sidebar ul {
    width:100%;
}
.sidebar li {
    color:#EF6A1B;
    font-size:1.083em;
    font-weight:700;
    line-height:1.146em;
    padding:4px 0 5px;
}
.sidebar li a {
    color:#C7B8A3;
    text-decoration:none;
}

Footer section

Here are our footer area

    
        Anime theme © 2011  :  Privacy

CSS for footer section

/*footer*/
footer {
    width:100%;
    background-color:#111;
}
footer div {
    font-size:1.4em;
    position:relative;
    width:960px;
    margin:0 auto;
    padding:30px 0 40px 40px;
}

JS for our template

Here are all necessary custom JS scripts

js/html5.js

This file already available in package

Live Demo

download result

Conclusion

Congrats, our new template ‘Anime theme’ is complete! You can use this as is, but please leave the back link to us intact. Don`t forget to say thanks

Creating CSS3 Drop sliding list Menu #6

admin — Sat, 06 Aug 2011 16:26:04 +0000

Creating CSS3 Drop sliding list Menu #6

This is our sixth CSS3 menu. Today we will make drop sliding list menu. We will using transition effects for sliding submenus. Of course, make attention that this animation will work only in most fresh browsers like FF, Chrome, Safary, ID9, Opera10. Older browsers will supported too, but without animation.

This is our final result (how menu will looks):

Here are samples and downloadable package:

Live Demo

download in package

Ok, download our example files (package) and lets start making this menu!

Step 1. HTML

Here are html code of our menu. I will hide repeating elements to make code smaller here. Anyway – you will able to see whole code in our package.

index.html




    
    CSS3 Drop sliding list menu #6



	
        
		Home
		Tutorials
		Resources
		Menus #4
		Menus #5
		About
		Back

        
        
            
                
    				
    					Links #1
                        HTML / CSS
                        JS / jQuery
                        PHP
                        MySQL
    					Links #2
                        XSLT
                        Ajax
                        HTML / CSS
    				
                
                
    				
    					Links #3
    					link 31
    					link 32
    					link 33
    					link 34
    					link 35
    					link 36
    					link 37
    					link 38

Step 2. CSS

Here are used CSS styles. First two selectors (you can skip it) belong to our demo page. All rest – menu #6 styles.

css/style.css

/* demo page styles */
body {
    background:#eee;
    margin:0;
    padding:0;
}
.example {
    position:relative;
    background:#fff url(../images/background.jpg);
    width:765px;
    height:560px;
    border:1px #000 solid;
    margin:20px auto;
    padding:20px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}

/* main menu styles */
.menu {
    font-family:Verdana, sans-serif;
    list-style:none;
    margin:0;
    min-height:35px;
    padding:0;
    position:relative;
    width:100%
}
.menu li.main {
    float:left;
    padding-right:1px
}
.menu li.main a {
    background-color:#000;
    color:#fff;
    display:block;
    font-size:13px;
    font-weight:700;
    height:35px;
    line-height:35px;
    padding:0 25px;
    text-decoration:none
}
.menu li.sub {
    background-color:#444;
    border:0;
    clear:both;
    float:left;
    height:0;
    overflow:hidden;
    position:relative;
    width:100%;

    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top;

    -moz-transition: height 0.5s ease-in-out;
    -ms-transition: height 0.5s ease-in-out;
    -o-transition: height 0.5s ease-in-out;
    -webkit-transition: height 0.5s ease-in-out;
    transition: height 0.5s ease-in-out;

    -moz-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}
.menu li.sub table {
    width:100%
}
.menu li.sub dl {
    background-color:#fff;
    height:195px;
    margin:5px 5px 0 0;
    padding:10px;

    -moz-border-radius:8px;
    border-radius:8px
}
.menu li.sub dt {
    border:1px solid #000;
    color:#000;
    font-size:14px;
    font-weight:700;
    line-height:18px;
    margin:1px 0;
    padding:0 10px;

    border-radius:5px;
    -moz-border-radius:5px
}
.menu li.sub dt:hover {
    background-color:#ccc
}
.menu li.sub dd {
    margin:0;
    padding:0
}
.menu li.sub dd a {
    color:#666;
    display:block;
    font-size:12px;
    line-height:20px;
    padding-left:30px;
    text-decoration:none;

    -moz-border-radius:5px;
    border-radius:5px
}
.menu li.sub dd a:hover {
    background-color:#ccc;
    color:#444
}
.menu li#has-sub1:hover ~ li#sub1,
.menu li#has-sub2:hover ~ li#sub2,
.menu li#has-sub3:hover ~ li#sub3,
.menu li#has-sub4:hover ~ li#sub4 {
    height:240px;

    -moz-transition: height 0.5s ease-in-out 0.2s
    -ms-transition: height 0.5s ease-in-out 0.2s
    -o-transition: height 0.5s ease-in-out 0.2s
    -webkit-transition: height 0.5s ease-in-out 0.2s
    transition: height 0.5s ease-in-out 0.2s
}
li#sub1:hover,
li#sub2:hover,
li#sub3:hover,
li#sub4:hover {
    height:240px;

    -moz-transition: height 0.5s ease-in-out 0.2s
    -ms-transition: height 0.5s ease-in-out 0.2s
    -o-transition: height 0.5s ease-in-out 0.25
    -webkit-transition: height 0.5s ease-in-out 0.2s
    transition: height 0.5s ease-in-out 0.2s
}

Step 3. Images

Here are only one image for background:

Live Demo

download in package

Conclusion

Today we made new nice menu (sixth), your comments and thanks are very welcomed. Good luck!

Creating new HTML CSS website layout #4 – Gray theme

admin — Mon, 01 Aug 2011 17:39:56 +0000

Creating new HTML CSS website layout #4 – Gray theme

After long delay (3 weeks I was on vacation in another country – hope that you missed us), I decided to make new nice article – this will new nice template (in gray colors) for our readers. You can learn some new coding lessons and download our result and use it at your own site (its free as usual).

I going to start step-by-step tutorial for creating html-css layout.

Final Result

Live Demo

download result

Get started

Ok, let`s start. Lets create new folder and few more folders inside (to keep proper structure):

css – which will contain style files (menu.css and style.css)
images – which will contain all our images
js – we will keep here all javascripts (jquery.js, jquery.nivo.slider.js, script.js, superfish.js and supersubs.js)

Head section code

Now I am going to give you the usual HTML head area of index.html with the attached CSS/JS.




    
    Gray Theme #4 | Script tutorials

Moving forward – Main layout (body)

Whole layout consist of 4 main section: header, section (promo area), primary_content (just center content) and footer. It looks like:



    
    
        .........
    

    
    
        .........
    

    
    
        .........
    

    
    .........

CSS for main layout (plus all base styles)

/* base styles */
* {
margin:0;
padding:0;
}

img {
border:0;
}

a {
color:#d00000;
outline:none;
text-decoration:underline;
}

a:hover,a:active {
outline:0;
text-decoration:none;
}

html,body {
min-width:960px;
}

body {
background-color:#ededed;
background-image:url(../images/tail-top.jpg);
background-position:center top;
background-repeat:repeat-x;
color:#828387;
font:100%/1.125em Arial, Helvetica, sans-serif;
font-size:13px;
font-style:normal;
position:relative;
}

ul li a {
color:#828387;
text-decoration:none;
}

ul li a:hover {
color:#E90000;
}

.container {
display:block;
margin-left:auto;
margin-right:auto;
position:relative;
width:960px;
}

These CSS styles defines the basic element styling, backgrounds to different sections, positions, fonts etc.

Header section

Our header will contain logo at left, and navigation menu at right side. Here are HTML for that section:



    
        
            Theme #4
        
        
            
            
                Home
                Tutorials
                    
                        HTML / CSS
                        JS / jQuery
                        PHP
                        Other
                            
                                MySQL
                                XSLT
                                Ajax
                            
                        

                    
                
                Tags
                    
                        animation
                        html5
                        captcha
                        gallery
                        animation
                    
                
                Back

CSS for Header section

/* header area */
#header {
background:none repeat scroll 0 0 transparent;
display:block;
height:62px;
position:relative;
z-index:99;
}

.logo {
left:0;
position:absolute;
top:0;
}

.logo a,.logo a {
background-color:#D00000;
color:#FFF;
display:block;
font-size:3em;
height:62px;
line-height:62px;
padding:0 22px;
text-decoration:none;
}

.logo a:hover {
background:#28261d;
}

nav {
position:relative;
z-index:2;
}

CSS for navigation menu

css/menu.css

.topnav,.topnav * {
list-style:none;
margin:0;
padding:0;
}

.topnav {
float:right;
line-height:1.0;
margin-top:5px;
max-width:860px;
}

.topnav ul {
position:absolute;
top:-999em;
width:10em;
}

.topnav ul li {
width:100%;
}

.topnav li:hover {
visibility:inherit;
}

.topnav li {
background:none;
float:left;
margin:0;
padding:0;
position:relative;
}

.topnav a {
color:#9c9b93;
display:block;
position:relative;
text-decoration:none;
text-transform:capitalize;
}

.topnav li:hover ul,.topnav li.sfHover ul {
left:0;
top:57px;
z-index:99;
}

ul.topnav li:hover li ul,ul.topnav li.sfHover li ul,ul.topnav li li:hover li ul,ul.topnav li li.sfHover li ul {
top:-999em;
}

ul.topnav li li:hover ul,ul.topnav li li.sfHover ul {
left:10em;
margin-left:1px;
top:-9px;
}

ul.topnav li li li:hover ul,ul.topnav li li li.sfHover ul {
left:10em;
top:0;
}

.topnav > li > a {
font-size:16px;
height:57px;
line-height:57px;
padding:0 33px;
}

.topnav > li > a:hover,.topnav > li.sfHover > a {
background:#8f8d86;
color:#FFF;
}

.topnav > li.current-menu-item > a {
background:#605e57;
color:#FFF;
}

.topnav li ul {
background:url(../images/sub-menu-tail.png);
border-top:1px solid #605e57;
padding:8px 0;
}

.topnav li li a {
color:#7d7a71;
font-size:15px;
line-height:30px;
padding-left:20px;
}

.topnav li li a:hover,.topnav li li.sfHover > a {
color:#28261d;
}

.topnav li:hover,.topnav li.sfHover,.topnav a:focus,.topnav a:hover,.topnav a:active,.topnav > li.current-menu-item > a {
outline:0;
}

.topnav a.sf-with-ul {
min-width:1px;
}

Hope that this was easy. Next section will promo section (jQuery Nivo Slider)

Promo section

In this area we will put few rotating images (slider promo) with numbered navigation buttons. I selected Nivo Slider for our template (this is jQuery plugin). Here are its HTML code:

CSS for Promo section

/* promo area */
#slider-wrapper {
height:496px;
overflow:hidden;
position:relative;
}

#slider {
background:url(../images/ajax-loader.gif) no-repeat 50% 50%;
height:496px;
position:relative;
width:100%;
}

#slider img {
display:none;
left:0;
position:absolute;
top:0;
}

#slider a {
border:0;
display:block;
}

.nivoSlider {
position:relative;
}

.nivoSlider img {
left:0;
position:absolute;
top:0;
}

.nivoSlider a.nivo-imageLink {
border:0;
display:none;
height:100%;
left:0;
margin:0;
padding:0;
position:absolute;
top:0;
width:100%;
z-index:60;
}

.nivo-slice {
display:block;
height:100%;
position:absolute;
z-index:50;
}

.nivo-box {
display:block;
position:absolute;
z-index:5;
}

.nivo-caption {
bottom:0;
color:#fff;
left:0;
position:absolute;
width:100%;
z-index:89;
}

.nivo-caption .nivo-caption-inner {
margin:0;
padding:0;
}

.nivo-caption a {
display:inline !important;
}

.nivo-html-caption {
display:none;
}

.nivo-directionNav a {
background:url(images/direction_nav.png) no-repeat 0 0;
border:0;
cursor:pointer;
display:block;
height:35px;
position:absolute;
text-indent:-9999px;
top:50%;
width:36px;
z-index:99;
}

.nivo-prevNav {
left:0;
}

.nivo-nextNav {
right:0;
}

.nivo-controlNav {
-moz-border-radius:7px;
-webkit-border-radius:7px;
background:url(../images/controlNavBg.gif) repeat-x left top;
border-radius:7px;
bottom:-7px;
height:32px;
padding:0 4px;
position:absolute;
right:40px;
text-align:center;
z-index:99;
}

.nivo-controlNav a {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
color:#FFF;
cursor:pointer;
display:inline-block !important;
font-size:14px;
height:27px;
line-height:22px;
margin-top:4px;
padding:0 5px;
position:relative;
text-decoration:none;
z-index:99;
}

.nivo-controlNav a.active,.nivo-controlNav a.active:hover {
background-color:#f3f3f1;
color:#636053;
}

.nivo-controlNav a:hover {
background-color:#5b5849;
}

a.nivo-nextNav {
background-position:-36px 0;
right:0;
}

a.nivo-nextNav:hover {
background-position:-36px -35px;
}

a.nivo-prevNav {
background-position:0 0;
left:0;
}

a.nivo-prevNav:hover {
background-position:0 -35px;
}

#slider .nivo-controlNav img {
display:inline;
height:auto;
margin-right:10px;
position:relative;
width:120px;
}

Main content section

After our promo – we have main content area. I separated this section into 2 columns. First column can contain full length news, second – some featured posts (with short titles). Of course – you can customize here anything. I will provide you with HTML code of single element per each column.

This is new CSS3 template #4

Full length description of template here. Full length description of template here. Full length description of template here. Full length description of template here. Full length description of template here. Full length description of template here.
Full length description of template here. Full length description of template here. Full length description of template here. Full length description of template here. Full length description of template here. Full length description of template here.

continue

CSS for Main content section

/* main area */
.primary_content {
background:url(../images/contentBoxBg.png) no-repeat scroll center top transparent;
overflow:hidden;
padding-bottom:45px;
}

.primary_content .column {
display:inline;
float:left;
margin-left:5px;
margin-right:5px;
padding-top:40px;
position:relative;
}

#column1 {
padding-left:40px;
padding-top:64px;
width:550px;
}

#column2 {
padding-right:40px;
width:310px;
}

.button {
background:url(../images/button-left.png) no-repeat left top;
color:#696969;
display:inline-block;
font-size:16px;
padding-left:6px;
text-decoration:none;
}

.button:hover {
background-position:left -29px;
color:#FFF;
}

.button span {
background:url(../images/button-right.png) no-repeat right top;
display:block;
padding-right:6px;
}

.button:hover span {
background-position:right -29px;
}

.button span span {
background:url(../images/button-tail.gif) repeat-x left top;
height:29px;
line-height:29px;
padding:0 4px;
}

.button:hover span span {
background-position:left -29px;
}

/* blocks */
.block,.block2 {
margin-bottom:30px;
}

.block .bcon,.block2 .bcon {
margin-bottom:10px;
}

.block h3,.block2 h3 {
color:#696969;
font-size:2em;
font-weight:400;
line-height:1.2em;
margin:0 0 30px;
}

.block .bcon p {
font-size:1.077em;
line-height:1.429em;
}

.block .bcon ul {
margin:0;
padding:0;
}

.block .bcon ul li {
background:url(../images/marker.png) no-repeat scroll left top transparent;
float:left;
height:auto !important;
list-style-type:none;
margin-top:6px;
min-height:18px;
padding:2px 0 1px 30px;
width:175px;
}

.block2 .top {
background:url(../images/box-top.png) no-repeat scroll left top transparent;
font-size:0;
height:10px;
line-height:0;
overflow:hidden;
}

.block2 .bg {
background:url(../images/sidebar-tail.png) repeat scroll 0 0 transparent;
overflow:hidden;
width:100%;
}

.block2 .bg > h3,.block2 .bg > div,.block2 .bg > .button {
padding:14px 23px 0;
}

.thumb {
float:left;
height:88px;
margin:0 15px 10px 0;
position:relative;
}

.thumb img {
float:left;
height:80px;
margin:4px 0 0 4px;
width:85px;
}

a.thumb {
cursor:pointer;
}

a.thumb:hover .wrap {
background-position:left -88px;
border-color:#d00000;
}

.thumb .wrap {
background:url(../images/img-wrap-small.png) no-repeat left top;
float:left;
height:88px;
left:0;
position:absolute;
top:0;
width:93px;
}

.block2 ul li {
background:none;
list-style-type:none;
margin:45px 0 0;
overflow:hidden;
padding:0;
position:relative;
vertical-align:top;
width:100%;
}

.block2 ul li:first-child {
margin-top:0;
}

.block2 ul li .thumb {
margin-bottom:0;
}

.block2 ul li .date {
background:url(../images/postDate-left.png) no-repeat left top;
color:#FFF;
cursor:pointer;
display:inline-block;
font-size:12px;
margin:3px 0 8px;
padding-left:5px;
}

.block2 ul li .date:hover {
background-position:left -23px;
}

.block2 ul li .date span {
background:url(../images/postDate-right.png) no-repeat right top;
display:block;
padding-right:5px;
}

.block2 ul li .date:hover span {
background-position:right -23px;
}

.block2 ul li .date span span {
background:#d00000;
height:23px;
line-height:23px;
padding:0 6px;
}

.block2 ul li .date:hover span span {
background:#696969;
}

.block2 ul li p {
margin:0;
}

.block2 .bot {
background:url(../images/box-bot.png) no-repeat scroll left top transparent;
font-size:0;
height:10px;
line-height:0;
overflow:hidden;
}

Footer section

Here are our footer area



    
        
            LinkBlock#1
            
                Link #1
                Link #2
                Link #3
                Link #4
            
        
        
            LinkBlock#2
            
                Link #1
                Link #2
                Link #3
                Link #4
            
        
        
            Networks
            
                RSS
                Facebook
                Twitter
            
        
        
            Recent tutorials
            
                How to Resize images on Server Side
                Creating CSS3 Slideout Menu #5
                Creating A Globe Shaped Photo Gallery
                Creating A Photo Carousel Flashmo 230
            
        
    



    Gray Theme #4 © 2011 | Privacy

CSS for footer section

/* footer section */
.footer {
background:url(../images/footer-widget-tail.gif) repeat-x center top #605e57;
overflow:hidden;
padding:57px 0 37px;
}

.footer_wrap .wcont {
display:inline;
float:left;
margin-left:5px;
margin-right:5px;
padding-right:40px;
position:relative;
width:160px;
}

.footer_wrap .recent {
width:260px;
}

.footer_wrap .wcont h3 {
color:#E4E3E3;
font-size:18px;
font-weight:400;
margin-bottom:35px;
}

.footer_wrap .wcont ul {
margin:0;
padding:0;
}

.footer_wrap .wcont ul li {
background:none;
list-style-type:none;
margin:0;
padding:0;
}

.footer_wrap .wcont ul.social li {
margin-bottom:11px !important;
}

.footer_wrap .wcont ul li a {
color:#b7b7b7;
display:inline-block;
height:28px;
line-height:28px;
text-decoration:none;
}

.footer_wrap .wcont ul li:first-child {
margin-top:0;
}

.footer_wrap .wcont ul li a:hover {
color:#e4e3e3;
}

.footer_wrap .wcont ul li img {
float:left;
margin-right:12px;
}

footer .copyright {
background:none repeat scroll 0 0 #28261D;
font-style:italic;
padding:30px 0;
}

footer .copyright,footer .copyright a {
color:#BCBCBC;
}

JS for our template

Here are all necessary custom JS scripts

js/script.js

jQuery(window).load(function() {

    // apply supersubs and superfish for navigation menu
    jQuery('ul.topnav').supersubs({minWidth: 12, maxWidth: 27, extraWidth: 1}).superfish();
    jQuery('ul.topnav').superfish({
        delay: 1000,
        animation: {opacity:'false',height:'show'},
        speed: 'normal',
        autoArrows: false,
        dropShadows: false
    });

    // nivo slider
    jQuery('#slider').nivoSlider({
        effect: 'fade',
        slices:15,
        boxCols:8,
        boxRows:8,
        animSpeed:500,
        pauseTime:5000,
        directionNav:false,
        directionNavHide:false,
        controlNav:true});
});

All other JS files (jquery.js, jquery.nivo.slider.js, superfish.js and supersubs.js) available in package

Live Demo

download result

Conclusion

Congrats, our new template ‘Gray theme’ is complete! You can use this as is, but please leave the back link to us intact. Don`t forget to say thanks

Creating A Dark and clean HTML CSS website layout

admin — Fri, 24 Jun 2011 17:41:45 +0000

Creating nice clean HTML CSS website layout #3 – Dark theme

Today we have a little anniversary. Today`s article has a demo with the number 100 So I prepared a very interesting article – this will new nice template (in dark colors) for our readers. You can learn some new coding lessons and download result and use it at your own site (free of charge).

I going to start step-by-step tutorial for creating html-css layout.

Final Result

Live Demo

download result

Get started

Ok, let`s start. Lets create new folder and few more folders inside (to keep proper structure):

css – which will contain style files (style.css, menu.css and meteor-slides.css)
images – which will contain all our images
js – we will keep here all javascripts (jquery.js, jquery.cycle.all.js, script.js and slideshow.js)

Head section code

Now I am going to give you the usual HTML head area of index.html with the attached CSS/JS.




    
    Dark Theme #3 | Script tutorials

Moving forward – Main layout (body)

Whole layout consist of 3 main section: header, center (content), and footer. It looks like:


    
    
    

    
    
        .........
    

    
    
        .........
    

    
        .........

CSS for main layout (plus all base styles)

/* base styles */
* {margin:0; padding:0;}
img {border:0;}
.clear {clear:both; line-height:0; height:0; font-size:1px;}
.marg {width:916px; margin:0 auto;}
.mid {background:url(../images/bg.png) repeat top; width:100%; height:1108px; top:174px; left:0; position:absolute;}
.top {background:url(../images/top.jpg) repeat-x top; width:100%; height:175px; top:0; left:0; position:absolute;}
.bottom {background:url(../images/bottom.jpg) repeat-x top; width:100%; height:389px; top:1109px; position:absolute; left:0;}
body {font:13px Arial, Helvetica, sans-serif; color:#000000;}
a {text-decoration:none; color:#fff; outline:none; cursor:pointer;}
a:hover {text-decoration:underline;}

These CSS styles defines the basic element styling, backgrounds to different sections, positions, fonts etc.

Header section

Our header will contain logo, and navigation menu at right side. Here are HTML for that section:




    
        
            Dark Theme #3
        
        
            
            
                Home
                Tutorials
                    
                        HTML / CSS
                        JS / jQuery
                        PHP
                        MySQL
                        XSLT
                        Ajax
                    
                
                Tags
                    
                        animation
                        html5
                        captcha
                        gallery
                        animation
                    
                
                Back

CSS for Header section

/* header area */
.header {position:relative; width:916px; height:174px; z-index:1000;}
.h_user {position:absolute; right:225px; top:16px; color:#292929;}
.h_user a, .h_user span, .h_user img {vertical-align:middle;}
.h_user span {padding:0 2px;}
.h_user a {color:#717171; font-size:10px; text-transform:uppercase;}
.h_user .h_tw {padding:0 2px 0 18px;}
.h_title {position:absolute; left:33px; top:23px; font-size:10px; color:#484848; text-transform:uppercase;}
.logo {position:absolute; width:231px; height:50px; left:35px; top:83px;}
.logo a {background:url(../images/logo.png) no-repeat; width:231px; height:50px; display:block; text-indent:-9999px;}

CSS for Navigation menu

css/menu.css

.nav {position:absolute; right:0; top:86px;}
.nav ul {list-style:none; position:relative;}
.nav ul li {display:block; float:left; position:relative; z-index:1000;}
.nav ul li a {display:block; font-family:Verdana, sans-serif; color:#c5c5c5; font-size:24px; font-weight:bold; height:49px; line-height:49px; position:relative; padding:0 9px; z-index:2;}
.nav ul li a span {display:block; height:49px;}
.nav ul li a .m {padding:0 12px;}
.nav ul li a .l {position:absolute; width:9px; left:0; top:0;}
.nav ul li a .r {position:absolute; width:9px; right:0; top:0;}
.nav ul li a:hover {text-decoration:none;}
.nav ul li a:hover .m, .nav ul li.hover a .m {background:url(../images/pag_bg.png) repeat-x top;color:#fff;}
.nav ul li a:hover .l, .nav ul li.hover a .l {background:url(../images/pag_l.png) no-repeat left;}
.nav ul li a:hover .r, .nav ul li.hover a .r {background:url(../images/pag_r.png) no-repeat right;}
.nav ul .current .m {background:url(../images/pag_bg.png) repeat-x top;}
.nav ul .current .l {background:url(../images/pag_l.png) no-repeat left;}
.nav ul .current .r {background:url(../images/pag_r.png) no-repeat right;}

.nav ul li ul {display:none; width:207px; position:absolute; z-index:1; top:49px; left:0;}
.nav ul li ul li {}
.nav ul li ul li .l, .nav ul li ul li .r {display:none;}
.nav ul li ul li .m {background:none; padding:0;}
.nav ul li ul li a {width:171px; padding:0 18px; background:#171717; font-size:18px;}
.nav ul li ul li ul {top:0; left:207px;}

.nav ul .hover ul {display:block;}
.nav ul .hover ul li ul {display:none;}
.nav ul .hover ul .hover ul {display:block;}
.nav ul .hover ul li a {background-color:#000;}
.nav ul .hover ul .hover a {background-color:#444;}

Pretty easy styles. Next section is central content section. As you see – I have promo section (slider) inside our main content area as first element

Promo section

In this area we will put few rotating images (slider promo) with prev-next buttons. I selected Meteor Slides for our template (this is jQuery plugin). Here are its HTML code:



    
        
            Previous
            Next
        

        
            
                
                    
                    
                    promo 1 text
                
                
                    
                    
                    promo 2 text
                
                
                    
                    
                    promo 3 text

CSS for Promo section

/* promo area */
.promo_area {width:1000px; margin:0 auto; padding:0 0 0 0;}
.promo_area .meteor-slides {z-index:inherit !important;}
.promo_area .meteor-slides .slides {width:860px !important; height:460px !important;}
.promo_area .meteor-slides .slide {z-index:inherit !important; width:860px !important; height:460px !important;}
.promo_wrap {background:url(../images/slider_bg.png) no-repeat; width:930px; height:489px; margin:0 auto; padding:30px 0 0 70px;}
.promo_area .meteor-nav {display:block !important;}
.promo_area .meteor-nav li {display:block !important;}
.promo_area .meteor-nav .prev a {background:url(../images/sl_l.png) no-repeat left top; width:55px; position:absolute; height:96px !important; top:202px; left:1px !important; }
.promo_area .meteor-nav .prev a:hover {background:url(../images/sl_l.png) no-repeat left bottom;}
.promo_area .meteor-nav .next a {background:url(../images/sl_r.png) no-repeat right top; width:66px; position:absolute; height:102px !important; top:202px; right:-10px !important;}
.promo_area .meteor-nav .next a:hover {background:url(../images/sl_r.png) no-repeat right bottom;}
.promo_area .title {position:absolute; bottom:0; z-index:100; background:url(../images/sl_bg.png) repeat; height:60px; width:859px;}
.promo_area .title p {line-height:60px; padding:0 0 0 20px; font-size:18px; color:#fff;}
.promo_area .title p a {color:#fff;}
.promo_area .title p a:hover {color:#ff7e20; text-decoration:none;}

Main content section

After our promo – we have main content area. I separated this section into 3 columns. All 3 columns have similar, but still different missions. Forst column will display some info about you, second – recent popular posts, third – last X posts. You can feel free to have here anything own. I will provide you with HTML code of single element per each column.



    
        
        
            

                
                
                    About us
                    
                        
                    
                    
                        About us - description, about us - description, about us - description
                            continue
                        
                    
                

                
                
                    Recent popular
                    
                        
                            06-20-2011 |  1 comment
                        
                        
                            How to create water Ripple effect using HTML5 canvas
                        
                        
                            Today we continue JavaScript examples, and our article will about using javascript in modeling of water effects. This will emulation of water drops at images. Continue
                        
                    
                    ..............
                

                
                
                    All posts
                    
                        
                            
                                
                                    
                                
                                
                                    Short description text #1
                                
                            
                            

                        
                        ..............

CSS for Main content section

/* main area */
.main {padding:30px 0 0 0;}
.con {position:relative; padding:5px 0 18px 0;}
.con_bg {background:url(../images/con_bg.png) repeat-y; min-height:470px;}
.con_t {background:url(../images/con_t.png) no-repeat top; position:absolute; height:458px; width:100%; top:0; left:0;}
.con_b {background:url(../images/con_b.png) no-repeat bottom; position:absolute; height:18px; width:100%; bottom:0; left:0;}
.con_wrap {z-index:1;padding:30px;}

/* blocks */
.block {float:left; width:29%; padding:0 2%; position:relative;}
.btitle {font-size:30px; color:#000; font-family:Arial, Helvetica, sans-serif; font-weight:bold; padding:0 0 25px 0;}
.bcon {padding:15px 0 0 0; line-height:19px;}
.post {padding:0 0 38px 0;}
.post .head {font-size:11px; color:#000; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif; font-weight:normal; padding:0 0 6px 0;}
.post .head a {color:#000; text-decoration:none;}
.post .head b {font-weight:normal;}
.post .head span {vertical-align:middle;}
.post .head .s {padding:0 3px;}
.post .title {font-size:18px; font-family:Arial, Helvetica, sans-serif; padding:0 0 8px 0;}
.post .title a {color:#000;}
.post .con p {line-height:19px; color:#1c1c1c; padding:0 0 30px 0;}
.snews {overflow:hidden;}
.snews li {display:block; padding:7px;}
.snews li:hover {background-color:#888;}
.snews .img {display:block; float:left; width:100px;}
.snews a p {color:#1c1c1c;}
.snews :hover a p {color:#fff;}
.snews .con {float:left; display:block; width:115px; padding:9px 0 0 12px; line-height:19px;}

.continue {display:block; background:url(../images/more_link.png) no-repeat top left; width:91px; height:26px; text-indent:-9999px; margin:15px 0 0 0;}
.continue:hover {background:url(../images/more_link.png) no-repeat bottom left;}

Footer section

Here are our footer area



    
        
            LinkBlock#1
            
                Link #1
                Link #2
                Link #3
                Link #4
                Link #5
            
        
        
            LinkBlock#2
            
                Link #1
                Link #2
                Link #3
                Link #4
                Link #5
            
        
        
            LinkBlock#3
            
                Link #1
                Link #2
                Link #3
                Link #4
                Link #5
            
        
        
    



    Dark Theme #3 © 2011 | Privacy

CSS for footer section

/* footer section */
.footer {padding:25px 0 0 33px;}
.footer_wrap {width:800px; margin:0 auto; position:relative; padding:0 0 50px 0;}
.footer .wcont {float:left; width:235px; padding:0 15px; color:#7c7c7c;}
.footer .wcont .title {font-family:Arial, Helvetica, sans-serif; color:#fff; font-size:24px; padding:0 0 18px 0; display:block;}
.footer .wcont .title a {color:#fff;}
.footer .wcont .title a:hover {text-decoration:none;}
.footer .wcont a {color:#7c7c7c;}
.footer .wcont ul {list-style:none;}
.footer .wcont ul li {padding:5px 0 5px 10px; background:url(../images/cat_li.png) no-repeat left;}
.footer .wcont ul li a:hover {color:#ff7e20; text-decoration:none;}
.footer .wcont .twitter li {background:none; padding:5px 0;}
.footer .wcont .twitter li a {color:#fff;}

/* foot section */
.foot {font-size:10px; color:#ddd; text-transform:uppercase; background:url(../images/foot_bg.jpg) repeat; position:relative;}
.foot .foot_wrap {margin:0 auto; text-align:center; padding:35px 0;}
.foot a {color:#ddd;}

JS for our template

Here are all necessary custom JS scripts

js/script.js

$(document).ready(function($){
    var conh = $('div.content').height();
    $(document).ready(function(){
        $('div.mid').css('height',conh);
        $('div.bottom').css('top',conh+174);
    });

    $('div.nav ul li').hover(function(){
        $(this).addClass('hover')},
        function(){
            $(this).removeClass('hover');
    });
});

var meteorslidessettings = {
    meteorslideshowspeed: "2000",
    meteorslideshowduration: "0",
    meteorslideshowheight: "519",
    meteorslideshowwidth: "1000",
    meteorslideshowtransition: "fade"
};

All other JS files (jquery.js, jquery.cycle.all.js and slideshow.js) available in package

Live Demo

download result

Conclusion

Congrats, our new template ‘Dark theme’ is complete! You can use this as is, but please leave the back link intact. Don`t forget to say thanks

First Name:
Last Name:
Your Email:
Re-enter Email:
New Password:
I am:
Birthday:

Script Tutorials » css | Script Tutorials | Web development

How to Generate Runtime Multi-columns with CSS3

Step 1. HTML

index.html

Step 2. CSS

css/main.css

Step 3. JavaScript

js/script.js

Conclusion

Related Stuff You Will Love!

How to Create Your Own 5 Stars Voting System

Step 1. SQL

Step 2. PHP

index.php

'.$aItemInfo['title'].'

'.date('F j, Y', $aItemInfo['when']).'

Description:

'.$aItemInfo['description'].'

List of items:

vote.php

classes/CMySQL.php

Step 3. JS

js/script.js

js/jquery-1.5.2.min.js

Step 4. CSS

css/main.css

Step 5. Images

Conclusion

Related Stuff You Will Love!

Creating a Robo Splash Page Layout

Here are how our final result will looks:

Get started

Head section code

Moving forward – Body

here are you can see base CSS styles

1. Header section with logo and login form

CSS for header section

2. Main content section

CSS for Main content section

3. Footer section

CSS for footer section

Conclusion

Related Stuff You Will Love!

How to Create a Fantastic Photo Album with TN3

Step 1. HTML

index.html

Creating photo galleries with TN3 | Script Tutorials

Image 1 title

Image 1 title

Image 2 title

Step 2. CSS

css/tn3/tn3.css

css/style.css

Step 3. JS

js/jquery.tn3lite.min.js

js/main.js

Step 4. Images

Conclusion

Related Stuff You Will Love!

Creating new HTML5/CSS3 single page layout – Art theme

Final Result

Get started

Head section code

Moving forward – Main layout (body)

here are you can see base CSS styles

Header section with logo and navigation

CSS for header section

Main content section

Your promo text 1

Your promo text 2

Your promo text 3

Your promo text 4

CSS for Main content section

css/nivo-slider.css

Post #1

Post #2

Post #3

Attractive Presentation with HTML5

Creating Advance Level Login system with Logic captcha

Footer section