Examples | CSS Rockers

<!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=iso-8859-1" />

<title>Rowleys</title>

<body>
    
        <div id="mainDiv">
             
                  <div id="top_part">
                        <img src="images/logo.gif" alt="Rowleys" title="Rowleys" width="145" height="45" />
                              </div>
                                    
                                         
                          <div id="header">
                               <ul>
                                     <li><a href="#" title="home">home</a></li>
                                     <li><a href="#" title="about us" class="hover">about us</a></li>
                                     <li><a href="#" title="services">services</a></li>
                                     <li><a href="#" title="portfolio">portfolio</a></li>
                                     <li><a href="#" title="news">news</a></li>
                                     <li><a href="#" title="contact us">contact us</a></li>
                              </ul>
                              <h2>Welcome to Rowleys IT Services</h2>
                             <p class="header_text">Is your website out of date or do you need a brand new website design? Would you benefit from more visitors to your website? Or is your website not showing in the top search engine listing results? - Then you've come to the right people!</p>
                             <h1 class="slogan">forget luck let us launch you on the first page of Google</h1>
                             <p class="call"></p>
                        </div>
                              
                              
                            <div class="body">
                                  <div id="inner_body_bg">
                                  
                                       <div id="inner_left">
                                              <h2 class="boldText">About Us</h2>
                                       <div>
                                             <img src="images/about_pic.gif" alt="" class="img_left" />
                                             <p class="text_right">Our creative team provide everything you need for the web... and we don't even look that strange! Why
not arrange a meeting to come in and talk to us - we'd love to meet you.<strong> Call us on 0116 282 2185.</strong></p>
                                             <br class="spacer" />
                                       </div>
                                       <h2 class="boldText">What can you expect from Rowley's IT Services?</h2>
                                       <ul class="list innerlist">
                                            <li>Services that grow your business</li>
                                            <li>We deliver when we say we are going to deliver</li>
                                            <li>Expert advice, a strategy, a plan</li>
                                            <li>No Jargon, the answers you need in plain English</li>
                                            <li>Services that you can easily manage in-house</li>
                                            <li>We give you a competitive edge</li>
                                       </ul>
                                       <p class="text">Rowleys IT Services is part of the Rowley's group of companies. Find out more about the<strong> Rowley's group</strong>. IT since 2002, Rowley's since 1922.</p>
                                 </div>
                                 
                                 
                                      <div id="innerright">
                                           <h2 class="boldText">Our Services</h2>
                                           <ul class="list1">
                                               <li>website design</li>
                                               <li>ecommerce</li>
                                               <li>email marketing</li>
                                               <li>search engine optimisation</li>
                                               <li>IT support</li>
                                               <li>website hosting</li>
                                               <li>logo design</li>
                                           </ul>
                                           <a class="inner_more" href="#">more services..</a>
                                           <h2 class="boldText">Quick Contact</h2>
                                           <p class="text mar_bot"><strong>Rowleys IT Services Limited.</strong><br />
                                           Co. Reg. No. 6576052<br />
                                           VAT No. 935 0680 23</p>
                                           <p class="text mar_bot">Registered in the United Kingdom,<br />
                                           6 Dominus Way,<br />
                                           Meridian Business Park,<br />
                                           Leicester, LE19 1RP</p>
                                          <p class="text"> email: <a href="#" class="link">info@rowleysit.com</a><br /> call us toll free: <strong>0116 282 2185</strong>
                                          </p>
                                          </div>
                                          
                                          <br class="spacer" />
                                      </div>
                                   </div>
                                       
                                           </div>
                                                
                                                
                                                <div id="search_big">
                                                    <div class="search_div">
                                                        <div class="search_div_left">
                                                            <h2>Email Newsletter</h2>
                                                            <p>Signing up for our e-newsletter means you can quicky and easily keep in touch with our latest news.</p>
                                                        </div>
                                                   <form id="subscribe" method="post" action="newsletter.php" onsubmit="return checkform(this);">
                                                        <label>Name:</label>
                                                            <input type="text" name="name" value="" id="name" />
                                                        <label>Email:</label>
                                                        <input type="text" name="email" value="" id="email" />
                                                        <input type="hidden" name="sss" value="submit123" />
                                                        <input type="submit" name="submit1" value="submit" class="subscribe" />
                                                   </form>
                                                        </div>
                                                        </div>
                                                        
                                                   
                                             <div id="footer">
                                                <ul>
                                                   <li><a href="#" title="home">home</a></li>
                                                   <li><a href="#" title="about us" class="hover">about us</a></li>
                                                   <li><a href="#" title="services">services</a></li>
                                                   <li><a href="#" title="portfolio">portfolio</a></li>
                                                   <li><a href="#" title="news">news</a></li>
                                                   <li><a href="#" title="sitemap">sitemap</a></li>
                                                   <li><a href="#" title="terms & conditions">terms & conditions</a></li>
                                                   <li><a href="#" title="privacy policy">privacy policy</a></li>
                                                   <li class="nobor"><a href="#" title="contact us">contact us</a></li>
                                                 </ul>
                                                 <p>Copyright 2008. Rowley’s IT Services. All rights Reserved.</p>
                                                 <p class="xhtml"><a href="#" target="_blank">XHTML</a>/<a href="#" target="_blank">CSS</a>Valid</p>
                                          </div>
                             
</body>
</html>

/* CSS Document */

body{
    padding:0;
    margin:0;
    background:url(../images/bg.gif) repeat-x 0 0 #57b2c4;
    color:#b9edff;
    font-family:Georgia, "Times New Roman", Times, serif;
}

div, p, ul, form, h2, h3, h1, img, form{
    padding:0;
    margin:0;
}

.spacer{
    clear:both;
    font-size:0;
    line-height:0;
}

/*-------------------main div start------------*/
#mainDiv{
    width:858px;
    margin:0 auto;
}

/*-------------top part start-------------*/
#top_part{
    height:56px;
    background:url(../images/top_bg.gif) no-repeat 0 0;
    padding:48px 0 0 376px;
}

.logo{
    font-size:0;
    line-height:0;
    display:block;
}

/*----------------------header part start--------------*/
#header{
    background:url(../images/header_pic.gif) no-repeat 0 0;
    height:294px;
    padding:0 0px 0 50px;
    position:relative;
}

#header ul{
    list-style-type:none;
    height:48px;
    background:url(../images/navi_sapa.gif) no-repeat left top;
    margin:0 0 0 91px;
}

#header ul li{
    float:left;
    padding:0 20px;
    background:url(../images/navi_sapa.gif) no-repeat right top;
}

#header ul li a{
    display:block;
    text-decoration:none;
    font-size:20px;
    color:#006172;
    background-color:inherit;
    line-height:48px;
}

#header ul li a.hover{
    color:#fff;
    background-color:inherit;
    cursor:pointer;
}

#header h2{
    color:#ebfeff;
    background-color:inherit;
    font-size:30px;
    line-height:30px;
    margin:44px 0 10px 0;
    font-weight:normal;
}

.header_text{
    color:#ebfeff;
    background-color:inherit;
    font-size:16px;
    line-height:20px;
    width:500px;
}

.call{
    background:url(../images/call.gif) no-repeat 0 0;
    height:28px;
    position:absolute;
    width:232px;
    right:16px;
    top:217px;
}

.slogan{
    background:url(../images/slogan.gif) no-repeat 0 0;
    position:absolute;
    right:15px;
    top:126px;
    width:156px;
    height:71px;
    text-indent:-222222px;
}

/*-----------------body part start------------------*/
.body{
    width:858px;
}

.nobg{
    background-image:none;
}

.line{
    background:url(../images/line.gif) repeat-x left top;
    height:23px;
    display:block;
    margin:3px 0 0 0;
}

/*--------------------home page body-----------*/
#body_bg{
    background:url(../images/home_body_bg.gif) repeat-y 0 0;
    padding:0 0 44px 0;
    width:860px;
}

.commond_div{
    width:242px;
    padding:0 25px 0 17px;
    float:left;
}

.commond_div h2{
    color:#024854;
    background-color:inherit;
    font-size:20px;
    line-height:20px;
    margin:0 0 4px 0;
}

.commond_div img{
    display:block;
    margin:0 0 20px 0;
    font-size:0;
    line-height:0;
}

.text{
    color:#b9edff;
    background-color:inherit;
    font-size:12px;
    line-height:18px;
}

p.xhtml {
    padding:10px 0 0;
}

p.xhtml a {
    color:#003366;
    background-color:inherit;
}

p.xhtml a:hover {
    text-decoration:none;
}

ul.list{
    list-style-type:none;
    margin:17px 0 18px 0;
}

ul.list li{
    font-size:11px;
    font-weight:bold;
    color:#b9edff;
    line-height:20px;
    background:url(../images/left_arrow.gif) no-repeat 0 6px;
    background-color:inherit;
    padding:0 0 0 20px;
}

ul.list li a{
    color:#B7ECFF;
    background-color:inherit;
}

ul.list li a:hover{
    text-decoration:none;
}

ul.list1{
    list-style-type:none;
    margin:17px 0 18px 0;

}

ul.list1 li{
    font-size:11px;
    font-weight:bold;
    color:#b9edff;
    line-height:20px;
    background:url(../images/left_arrow1.gif) no-repeat 0 8px;
    padding:0 0 0 20px;
    background-color:inherit;
}

.more{
    background:url(../images/more_bg.gif) no-repeat 0 0;
    height:26px;
    width:122px;
    display:block;
    margin:0 0 0 121px;
    color:#dcdcda;
    text-align:center;
    font-size:11px;
    line-height:26px;
    font-weight:bold;
    background-color:inherit;
    text-decoration:none;
}

.more:hover{
    color:#fff;
    background-color:inherit;
}

.mar_bot{
    padding-bottom:23px;
}

.link{
    color:#aceaff;
    background-color:inherit;
    text-decoration:none;
    font-weight:bold;
}

.link:hover{
    color:#fff;
    background-color:inherit;
}

/*------------------------feature------------*/
.feature{
    background:url(../images/featured_wasked.gif) no-repeat 0 0;
    height:54px;
    text-indent:-22222px;
    margin:0 0 17px 0;
}

.blue{
    width:241px;
    float:left;
    background-color:#bfe7f1;
    color:#57b2c4;
    margin:0 28px 0 0;
    padding:9px 11px;
    height:255px;
}

.blue img{
    display:block;
    margin:0 0 17px 0;
}

.blue h2{
    color:#017b90;
    background-color:inherit;
    font-size:12px;
    line-height:20px;
    margin:0 0 16px 0;
}

.blue p{
    color:#57b2c4;
    background-color:inherit;
    font-size:12px;
    line-height:18px;
    margin:0 30px 0 0;
}

.blue_more{
    width:70px;
    height:20px;
    color:#017b90;
    font-size:12px;
    line-height:20px;
    text-decoration:none;
    background-color:inherit;
    margin:0 0 0 175px;
    display:block;
}

.blue_more:hover{
    color:#000;
    background-color:inherit;
}

.no_right_mar{
    margin-right:0 !important;
}

.padding_bot{
    padding-bottom:27px;
    width:858px;
}

.more_work{
    background:url(../images/big_more_bg.gif) no-repeat 0 0;
    height:26px;
    display:block;
    text-align:center;
    color:#dcdcda;
    background-color:inherit;
    font:bold 11px/26px Arial, Helvetica, sans-serif;
    margin:0 0 13px 332px;
    width:201px;
    text-decoration:none;
}

.more_work:hover{
    color:#fff;
    background-color:inherit;
}

/*-----------------search part start------------*/
#search_big{
    background:url(../images/email_bg.gif) repeat-x 0 0;
    height:230px;
    padding:47px 0 0 0;
}

.search_div{
    width:598px;
    margin:0 auto;
    background-color:#57b2c4;
    color:#aceaff;
    border:#ffffff 6px solid;
    height:144px;
    padding:32px 35px 0 18px;
    background:url(../images/search_bg.gif) repeat-x 0 0;
}

.search_div_left{
    width:232px;
    background:url(../images/email_icon.gif) no-repeat 0 0;
    float:left;
    padding:0 0 0 71px;
}

.search_div_left h2{
    font-size:20px;
    line-height:20px;
    color:#024854;
    background-color:inherit;
    margin:0 0 8px 0;
}

.search_div_left p{
    font-size:12px;
    line-height:18px;
    color:#aceaff;
    background-color:inherit;
}

.search_div form{
    width:233px;
    float:right;
}

.search_div form label{
    font-size:12px;
    line-height:18px;
    color:#aceaff;
    background-color:inherit;
}

.search_div form input{
    width:231px;
    height:21px;
    border:#16a0b8 1px solid;
}

.search_div form input.subscribe{
    background:url(../images/subscribe.gif) no-repeat 0 0 #57B2C4;
    height:26px;
    width:82px;
    color:#DCDCDA;
    font-size:11px;
    font-weight:bold;
    border:none;
    margin:14px 0 0 152px;
    cursor:pointer;
}

/*-------------------footer part start-----------*/
#footer{
    width:750px;
    color:#024854;
    background-color:inherit;
    padding:20px 0 17px 0;
    margin:0 auto;
}

#footer ul{
    list-style-type:none;
    height:20px;
    margin:0 0 18px 0;
}

#footer ul li{
    float:left;
    display:block;
    font-size:14px;
    line-height:20px;
    padding:0 10px;
    color:#4e4e4e;
    background-color:inherit;
    border-right:#7fc8d6 1px solid;
}

#footer ul li.nobor{
    border-right:none;
}

#footer ul li a{
    color:#d3f3fb;
    background-color:inherit;
    text-decoration:none;
}

#footer ul li a:hover{
    color:#024854;
    background-color:inherit;
}

#footer ul li a.hover{
    color:#024854;
    background-color:inherit;
}

#footer p{
    text-align:center;
    line-height:16px;
    font-size:12px;
}

/*--------------------home page body-----------*/
#inner_body_bg{
    background:url(../images/inner_body_bg.gif) repeat-y 0 0;
    width:860px;
    padding:0 0 104px 0;
}

#inner_left{
    width:580px;
    float:left;
    padding:0 25px 0 18px;
    font-size:12px;
    line-height:18px;
}

.boldText{
    color:#024854;
    background-color:inherit;
    font-size:20px;
    line-height:18px;
    margin:0 0 12px 0;
    font-weight:normal;
}

.boldText span{
    font-size:18px;
}

.boldText span span{
    color:#B9EDFF;
    background-color:inherit;
}

.boldText span.sm{
    font-size:14px;
}

.nopad{
    padding-top:0 !important;
}

.img_left{
    float:left;
    display:block;
    font-size:0;
    line-height:0;
    margin:0 15px 30px 0;
}

.text_right{
    font-size:12px;
    line-height:18px;
    float:left;
    padding:0 0 25px;
    width:318px;
}

.text_right a{
    color:#B9EDFF;
    background-color:inherit;
    font-weight:bold;
}

.text_right a:hover{
    text-decoration:none;
}

.full {
    width:100%;
}

.innerlist{
    padding-bottom:1px !important;
}

.innerlist li{
    margin-bottom:12px;
}

/*----------------right part start-----------*/
#innerright{
    width:215px;
    float:right;
    padding:0 0 0 22px;
}

.inner_more{
    margin:0 0 30px 110px;
    color:#dcdcda;
    font:bold 11px/18px Arial, Helvetica, sans-serif;
    background-color:inherit;
    text-decoration:none;
    width:94px;
    display:block;
}

.inner_more:hover{
    color:#fff;
    background-color:inherit;
}

/*----------------contact form start-----------*/

form.cont {
padding:10px 0 0;
}

form.cont label {
    font-size:12px;
    width:77px;
    float:left;
    display:block;
    line-height:20px;
}

form.cont input {
    width:192px;
    border:1px solid #2C7D8C;
    float:left;
    height:20px;
    background:#ABD9E2;
    color:#2C7D8C;
    margin:0 0 10px;
}

form.cont input.btn {
    background:url(../images/cont_btn.png) no-repeat 0 0 #57B2C4;
    color:#DCDCDA;
    font-size:11px;
    width:87px;
    height:26px;
    border:none;
    margin:8px 0 0 185px;
    font-weight:bold;
    cursor:pointer;
}