A bike riders template.

thank you for this

 

Joel,

Can you stick link up for us all to see when site is fully completed? This would be much appreciated.

 

ahh,

its my site, and i would be happy to post up a link of when its done

 

yer lol its his site i was just asking for a template

 

Nice can't wait to see it in full working order. Keep us posted.

 

ok why do u like it so much?

 

mr mimoun...can u help me to design a bicycle shop website template?thanks alot...

 

资源太少了。这位大哥！
i'm from china.thanks!

 

good work!

 

Great template! The site built with the help of this template will be easy to navigate and satisfy the eyes of its visitors.

 

Great template as always!
Keep it on!

 

Thank you for the website. Is there a way I can make the content area one column instead of two?

 

If something like this is what you looking for then
replace your style.css with this:

HTML:

* {margin:0px;padding:0px;top:0px;left:0px;}
body{
    text-align: center;
    background-color: #666666;
}
#central{
    margin-right: auto;
    margin-left: auto;
    margin-top: 10px;
    position: relative;
    width: 777px;
    text-align: left;
    background-color: #FFFFFF;
}
#header{
    background-image: url(images/header.jpg);
    height: 226px;
    width: 777px;
    left: 0px;
    top: 0px;
}
#header a{
    font-size: 14px;
    font-style: normal;
    line-height: normal;
    font-weight: bolder;
    color: #FFFFFF;
    text-decoration: none;
    /*margin-left: 112px;*/
    /*font-family: "Courier New", Courier, mono;*/
    /*margin-top: 35px;*/
    font-family: Verdana;
    position: relative;
    left: 98px;
    top: 154px;
}
 
.sitename {
    text-align: center;
    width: 109px;
}
 
#navlist{
    margin-left: 0px;
    padding-left: 0px;
    white-space: nowrap;
    position: absolute;
    height: 26px;
    width: 777px;
    top: 225px;
    background: url(images/menubg.jpg) repeat-x top left;
    font-family: Arial;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 20px;
}
 
#navlist li{
    display: inline;
    list-style-type: none;
}
 
#navlist li a {
    padding: 3px 10px;
    /*background-image: url(images/button.gif);*/
    height: 20px;
    width: 91px;
    display: inline;
    position: absolute;
    text-align: center;
    color: #fff;
    text-decoration: none;
    margin-top: 5px;
}
 
#navlist li a span{
    padding: 3px 10px;
    /*background-image: url(images/button.gif);*/
    height: 20px;
    width: 91px;
    display: inline;
    position: absolute;
    text-align: center;
    color: #fff;
    text-decoration: none;
    margin-top: -5px;
}
 
#navlist a:hover { background: #0687eb; height: 10px; cursor: pointer;}
 
 
/*#navlist a:hover{background-image: url(images/buttonover.gif); height: 17px; width: 97px;}*/
#n1{left: 0px;}
#n2{left: 111px;}
#n3{left: 222px;}
#n4{left: 333px;}
#n5{left: 444px;}
#n6{left: 555px;}
#n7{left: 666px;}
#leftside{
    float: left;
}
#leftside h3{
    border-top-width: 3px;
    border-right-width: 3px;
    border-bottom-width: 0px;
    border-left-width: 3px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #00306f;
    border-right-color: #00306f;
    border-bottom-color: #00306f;
    border-left-color: #00306f;
    width:200px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    background-color: #FFFFFF;
    text-align: center;
    display: block;
    margin-left: 35px; 
    margin-top: 35px; 
}
#content{
    margin-top: 252px;
    position: absolute;
    width: 777px;
    background-color: #FFFFFF;
}
#picture1{
    margin-left: 35px;
    height: 150px;
    width: 200px;
    background-image: url(images/photoofthemonth.jpg);
    margin-top: 63px;
}
#picture2{ 
    margin-left: 35px;
    height: 150px;
    width: 200px;
    background-image: url(images/bikeofthemonth.jpg);
    margin-top: 60px;
}
#footer{
    clear: both;
    background-color: #FFFFFF;
    position: relative;
    height: 122px;
    background-image: url(images/footer.jpg);
    background-repeat: no-repeat;
}
#onecolumn{
    background-color: #FFFFFF;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 20px;
    overflow: hidden;
}
#onecolumn p{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #666666;
    margin-left: 0px;
    margin-bottom: 20px;
}
#onecolumn h1{
    margin: 10px 0px 10px 0px;
    width: 300px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #033387;
}
#onecolumn span{
    margin-top: 10px;
    margin-bottom: 4px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #649721;
}
#onecolumn a{color: #666666;}
#footer p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    float: right;
    padding-top: 98px;
    margin-right: 10px;
}
#footer a{color: #fff;}
#footer a:hover{color: #fff;}
#imagepreloader{
    visibility: hidden;
    overflow: hidden;
    height: 0px;
    width: 0px;
}

and your index.html with this:

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>
<title>Free Website Templates</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="central">
  <div id="header">
      <div class="sitename"><a href="http://www.freewebsitetemplates.com">Bike Riders <br />Website</a></div>
  </div>
  <ul id="navlist">
      <li><a id="n1" href="http://www.freewebsitetemplates.com"><span>Home</span></a></li>
      <li><a id="n2" href="http://www.freewebsitetemplates.com"><span>News</span></a></li>
      <li><a id="n3" href="http://www.freewebsitetemplates.com"><span>Events</span></a></li>
      <li><a id="n4" href="http://www.freewebsitetemplates.com"><span>Reviews</span></a></li>
      <li><a id="n5" href="http://www.freewebsitetemplates.com"><span>Forum</span></a></li>
      <li><a id="n6" href="http://www.freewebsitetemplates.com"><span>Contact Us</span></a></li>
      <li><a id="n7" href="http://www.freewebsitetemplates.com"><span>Links</span></a></li>
  </ul>
  <div id="content">
      <div id="onecolumn">
    <h1>Bike Riders News</h1>
    <p>
        This is a template designed by <strong><a href="http://www.freewebsitetemplates.com">free website templates</a></strong> for you for free you can replace all the text by your own text. This is just a place holder so you can see how the site would look like. If you're having problems editing the template please don't hesitate to ask for help <a href="http://www.freewebsitetemplates.com/forum/">on the forum</a>. You will get help as soon as possible. You can also use the forum to tell us what you like or dislike and what you would like to see more. Your feedback is very important to us and we will do everything to fulfil your wishes. <a href="http://www.freewebsitetemplates.com">more ...</a>
    </p>
    <h1>Bike Riders News</h1>
    <p>
        This is a template designed by <strong><a href="http://www.freewebsitetemplates.com">free website templates</a></strong> for you for free you can replace all the text by your own text. This is just a place holder so you can see how the site would look like. If you're having problems editing the template please don't hesitate to ask for help <a href="http://www.freewebsitetemplates.com/forum/">on the forum</a>. You will get help as soon as possible. You can also use the forum to tell us what you like or dislike and what you would like to see more. Your feedback is very important to us and we will do everything to fulfil your wishes. <a href="http://www.freewebsitetemplates.com">more ...</a>
    </p>
    <h1>Bike Riders News</h1>
    <p>
        This is a template designed by <strong><a href="http://www.freewebsitetemplates.com">free website templates</a></strong> for you for free you can replace all the text by your own text. This is just a place holder so you can see how the site would look like. If you're having problems editing the template please don't hesitate to ask for help <a href="http://www.freewebsitetemplates.com/forum/">on the forum</a>. You will get help as soon as possible. You can also use the forum to tell us what you like or dislike and what you would like to see more. Your feedback is very important to us and we will do everything to fulfil your wishes. <a href="http://www.freewebsitetemplates.com">more ...</a>
    </p>
      </div>
      <div id="footer"><p>Powered by <!-- Do not remove this see terms of use on http://www.freewebsitetemplates.com/termsofuse.htm --><a href="http://www.freewebsitetemplates.com">Free Website Templates</a></p></div>
  </div>
  <div id="imagepreloader"><img src="images/buttonover.gif" alt="mouseover" /></div>
</div>
</body>
</html>

 

tomw...wow! thank you so much! everything looks great but I am having a hard time setting a bookmark to link a question to the answer section on the same page. any suggestions?

 

I’m not sure I understand your question but take a look at this page again.
If that is what you are looking for then read this article for the explanation.

 

AGAIN, thank you so much. That was perfect. Great template and great support. Thanks!