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" class="hover">home</a></li>
                                     <li><a href="#" title="about us">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="body_bg">
                                              <div class="commond_div">
                                                   <h2>Why Choose Us?</h2>
                                                    <img src="images/pic.jpg" alt="" />
                                                    <p class="text">Our creative team provide everything you need for the internet. We believe in "<strong>real measurable results</strong>" and tailor our web design solutions to our client's needs, while constantly monitoring and analysing your<strong> online growth.</strong></p>
                                                    <ul class="list">
                                                          <li>IT since 2002, Rowley's since 1922.</li>
                                                          <li>Over 35 combined years of expert IT experience</li>
                                                          <li>Based in Leicestershire</li>
                                                          <li>We meet your deadlines</li>
                                                          <li>Backed by one of the largest firms of accountants in the east midlands</li>
                                                          <li>Passionate about what we do</li>
                                                    </ul>
                                                   <p class="text"> Rowleys IT Services offer Leicestershire businesses<strong> quality web design</strong>, search engine optimisation and ecommerce solutions at an<strong> affordable price.</strong> </p>
                                          </div>
                                                   <div class="commond_div">
                                                        <h2>Our Services</h2>
                                                             <img src="images/pic1.jpg" alt="" />
                                                             <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="more" href="services.html">more services</a>

                                                         </div>
                                                             <div class="commond_div">
                                                                   <h2>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>
                                            &nbs                                               &n                                               &n                                               &n                                                                                                                                                                                                                                                                                                                                                                                                 and more sales. What else could we wish for?" </p>
                                                                                                                                                                                                                                                                                                                                merchandise at fantastic prices.</p>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                p;                </div>
bsp;              <br class="spacer" />
bsp;              </div>
bsp;                 <span class="line"> </span>
<h2 class="feature">feature works</h2>
<div class="padding_bot">
    <div class="blue">
           <img src="images/works.jpg" alt="" />
           <h2>Web Design</h2>
           <p>Vale Software say: "wow - fantastic looking new website, great search engine rankings, more visitors
           <a href="#" target="_blank" class="blue_more">read more..</a></div>
   <div class="blue">
         <img src="images/works1.jpg" alt="" />
         <h2>Ecommerce Website</h2>
         <p>Love for stuff is an offshoot from a very well known company. Love for stuff offers the best branded
         <p>  </p>
         <a href="#" target="_blank" class="blue_more">read more..</a></div>
    <div class="blue no_right_mar">
         <img src="images/works.jpg" alt="" />
         <h2>IT Support </h2>
         <p>Full case study coming soon.<br /><br /><br /><br /><br /></p>
         <a href="#" target="_blank" class="blue_more">read more..</a>

                                                                    </div>
                                                                         <br class="spacer" />
                                                                    </div>
                                                                         <a class="more_work" href="#">click to view more works</a>

</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="#" class="hover" title="home">home</a></li>
                                                   <li><a href="#" title="about us">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;
}