THE NEW CREATOR: css

1st step your file name.html

code for html file goes here

your file name.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style114.css" type="text/css">
<title>Header and Navigation Tutorial</title>
</head>

<body>
        <div id="header">
<ul id="nav">
       <li>
           <a href="#" title="Return home">Home</a>
       </li>
       <li>
           <a href="#" title="About the company">About</a>
           <ul>
               <li><a href="#">The product</a></li>
               <li><a href="#">Meet the team</a></li>
           </ul>
       </li>
       <li>
           <a href="#" title="The services we offer">Services</a>
           <ul>
               <li><a href="#">Sevice one</a></li>
               <li><a href="#">Sevice two</a></li>
               <li><a href="#">Sevice three</a></li>
               <li><a href="#">Sevice four</a></li>
           </ul>
       </li>
       <li>
           <a href="#" title="Our product range">Product</a>
           <ul>
               <li><a href="#">Small product (one)</a></li>
               <li><a href="#">Small product (two)</a></li>
               <li><a href="#">Enourmous product
</li>

            </ul>
       </li>
       <li>
           <a href="#" title="Get in touch with us">Contact</a>
           <ul>
               <li><a href="#">Out-of-hours</a></li>
               <li><a href="#">Directions</a></li>
           </ul>
       </li>
    </ul>

</div>

<div id="container">

            <div id="left"></div>
            <div id="right"></div>
            <div id="content">

                     <center><h1>YOUR CONTENT GOES HERE </h1></center>




<a class="nowandthen">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqZeAcUMbwC_xELbLB24nffQa_GQclKR2YKuFSyCF_bKcAaJc0URQQ6xS3Pgsds8HDdGWKVo0dnK3ByWBU6A4kiR9vRnRS8kN2hQvP8lhbdB7C9eGAHkXSPQXaPT2M7OgtGoeSQDKNAgdd/s1600/DSC03406.JPG" alt="">
    <img src="643FBAAA-0B64-4A13-9DEA-0422C8E163B2.gif" alt=""></a>

<a class="nowandthen alt">
    <img src="http://img23.imageshack.us/img23/3189/before2f.jpg" alt="">
    <img src="http://img824.imageshack.us/img824/2466/after2g.jpg" alt="">
</a>

</div>

</div>
<div id="footer">

<ul>
               <li><a href="#">twitter</a></li>
               <li><a href="#">facebook</a></li>
           </ul>

</div>

</body>
</html>

2nd step create style114.css file style114 should not changed

style114.css

html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style:none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }


body{
    margin: 0;
    padding:0;
    font:13px/1.5 Segoe UI, Arial, Helvetica, sans-serif;
    width: 100%;
    display: table;
    color:#444444;
    }
    h1 {
    margin:0px;
    font:22px/100% Segoe UI, Arial, Helvetica, sans-serif;
    text-shadow: 0 1px 0 #fff;
    color:#444;
    margin:10px 10px;
}
#header{
                 margin: 0;
    padding:0;

        width:;
        height:141px;

background-color: #0071b2;

    }

#container {
                width: 100%;
                min-height: 100%;
                position: relative;
            }

            #left, #right {
                width: 50%;
                height: 100%;
                position: absolute;
                z-index: -1;
            }

            #left {
                left: 0;
                background-color: 9966FF;

            }

            #right {
                right: 0;
                background-color: 9966FF;
            }

            #content {
                width: 1000px;
                height: 100%;
                margin: 0 auto;
                background-color: white;
            }

#footer {
position:relative;
bottom:0;
width:100%; height:128px; /* Height of the footer */
background:#6cf;
}

/*------------------------------------*\
    NAV
\*------------------------------------*/
#nav{
    list-style:none;
    font-weight:bold;
    margin-bottom:10px;
    /* Clear floats */
    float:left;
    width:100%;
    /* Bring the nav above everything else--uncomment if needed.
    position:relative;
    z-index:5;
    */
}
#nav li{
    float:left;
    margin-right:10px;
    position:relative;
}
#nav a{
    display:block;
    padding:5px;
    color:#fff;
    background:#333;
    text-decoration:none;
}
#nav a:hover{
    color:#fff;
    background:#6b0c36;
    text-decoration:underline;
}

/*--- DROPDOWN ---*/
#nav ul{
    background:#fff; /* Adding a background makes the dropdown work

properly in IE7+. Make this as close to your page's background as possible (i.e. white

page == white background). */
    background:rgba(255,255,255,0); /* But! Let's make the background fully

transparent where we can, we don't actually want to see it if we can help it... */
    list-style:none;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible

than display:none;) */
}
#nav ul li{
    padding-top:1px; /* Introducing a padding between the li and the a give

the illusion spaced items */
    float:none;
}
#nav ul a{
    white-space:nowrap; /* Stop text wrapping and creating multi-line

dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link

stays 'hovered' even when your cursor has moved down the list. */
    background:#6b0c36;
    text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for

links even before they're hovered. Here we undo these effects. */
    text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what

happens when you hover each individual link. */
    background:#333;
}

a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 650px; /* set width of image container */
height: 434px; /* set height of image container */
}

a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.5s ease; /* enable transition */
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
z-index: 2;
clip: rect(0,650px,434px,0); /* clip values should be

rect(0,image_width,image_height,0) */
}

a.nowandthen img:nth-of-type(2){ /* hide "after" image beneath "before" so it's

initially out of view */
z-index: 1;
}

a.nowandthen:hover img:nth-of-type(1){ /* clip "before" image to reveal "after" */
clip: rect(0,0,434px,0); /* clip values should be rect(0,0,image_height,0) */
opacity: 0;
}

a.nowandthen.alt{
width: 300px; /* set width of image container */
height: 354px; /* set height of image container */
}

a.nowandthen.alt img{
clip: rect(0,300px,354px,0); /* clip values should be

rect(0,image_width,image_height,0) */
}

a.nowandthen.alt:hover img:nth-of-type(1){
clip: rect(0,0,354px,0); /* clip values should be rect(0,0,image_height,0) */
}

THE NEW CREATOR

Thursday, 16 May 2013

BEST CSS CODE FOR WEB DESIGNING