hola tengo un diseño que me gusta para mi pagina pero estoy teniendo problemas a la hora de adaptarlo ya que soy algo nuevo en esto, el tema de las imágenes y las paginas se trabajarlas.
les dejo el código fuente y el style.css para ver si esta bien o si tiene algún fallo aver si me pueden ayudar.
un saludo a todos
CODIGO FUENTE:
<!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" />
<title>Bike Rider Club</title>
<link href="style.css" media="screen" rel="stylesheet"/>
</head>
<body>
<div id="top-background">
<div id="top-wrapper">
<!-- menu -->
<div id="menu">
<ul>
<li class="menu-btn"><a href="#" id="selected">HOME</a></li>
<li class="divider"><img alt="" src="images/divider.png"/></li>
<li class="menu-btn"><a href="#">ABOUT US</a></li>
<li class="divider"><img alt="" src="images/divider.png"/></li>
<li class="menu-btn"><a href="#">MEMBERS</a></li>
<li class="divider"><img alt="" src="images/divider.png"/></li>
<li class="menu-btn"><a href="#">EVENTS</a></li>
<li class="divider"><img alt="" src="images/divider.png"/></li>
<li class="menu-btn"><a href="#">GALLERY</a></li>
<li class="divider"><img alt="" src="images/divider.png"/></li>
<li class="menu-btn"><a href="#">LINKS</a></li>
<li class="divider"><img alt="" src="images/divider.png"/></li>
<li class="menu-btn"><a href="#">CONTACTS</a></li>
</ul>
<div style="clear:both;"></div>
</div>
<!-- banner -->
<div id="banner">
<div id="banner-content">
<div id="logo"><img alt="" src="images/logo.png"/></div>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam dui nulla, ultricies et, ultrices at, rhoncus sodales, eros.
</div>
<div class="more-btn"><a href="#"><img alt="" src="images/more-btn1.png" border="0"/></a></div>
</div>
</div>
</div>
</div>
<!-- content -->
<div id="wrapper">
<div id="top-box"></div>
<div id="middle-box">
<!-- welcome -->
<div id="welcome"><div class="inner_copy"></div>
<div class="title">WELCOME TO OUR CLUB!</div>
<div>
<p>
This is a free and fully standards compliant css template designed by <a href="#">MyTemplateBox</a>. You can use it for your personal and commercial projects without any restrictions. The only stipulation to the use of this free template is that the links appearing in the footer remain intact. Beyond that, simply enjoy and have fun with it!
</p>
</div>
<div class="more-btn"><a href="#"><img alt="" src="images/more-btn.png" border="0"/></a></div>
<div id="content-divider"></div>
<!-- newsletter signup -->
<div id="newsletter">
<form action="">
<div id="newsletter-top">NEWSLETTER SIGN UP</div>
<div id="signup-box"><input type="text" value=""/></div>
<div id="subcribe-btn"><input type="image" src="images/subcribe-btn.png"/></div>
<div style="clear:both;"></div>
<div id="unsubcribe"><a href="#">Unsubcribe here</a></div>
</form>
</div>
</div>
<!-- events -->
<div id="events">
<div style="margin-bottom:10px;"><img alt="" src="images/photo1.jpg"/></div>
<div class="title">LATEST EVENT</div>
<div>
Donec dignissim, lacus eu ultricies sollicitudin, nibh nisi dictum ante, eget accumsan ipsum tellus vel neque. Vivamus leo pede, cursus eu, bibendum ac, viverra id, nisl. Nullam at urna. Curabitur ac tortor. Curabitur dui sem, vulputate id, dapibus id, lobortis at, urna. Sed felis dui, pretium vel, lobortis eget, pharetra ut, urna. Curabitur in lacus..
</div>
<div class="more-btn"><a href="#"><img alt="" src="images/more-btn.png" border="0"/></a></div>
</div>
<!-- news -->
<div id="news">
<div id="news-top">NEWS & EVENTS</div>
<div id="news-blue">
<div class="sub-title">DONEC DIGNISSIM</div>
<div>
ultricies sollicitudin, nibh nisi dictum ante, eget accumsan ipsum tellus vel neque. Vivamus leo pede, cursus euvbn mkljuo.
</div>
</div>
<div id="more-news1"><a href="#">MORE</a></div>
<div id="news-gery">
<div class="sub-title">DONEC DIGNISSIM</div>
<div>
ultricies sollicitudin, nibh nisi dictum ante, eget accumsan ipsum tellus vel neque. Vivamus leo pede, ipsum tellus cursus euvbn mkljuo nmbhgyumj.
</div>
</div>
<div id="more-news2"><a href="#">MORE</a></div>
</div>
<div style="clear:both;"></div>
</div>
<div id="bottom-box"></div>
</div>
<!-- footer -->
<div id="footer">
<div class="fleft"><p>Copyright statement.</p></div>
<div class="fright"><p>Plantillas web populares gratis <a href="http://www.websitetemplatesonline.com" target="_blank">en
www.MejoresPlantillasGratis.es</a>.</p></div><div class="fclear"></div>
<div class="fcenter"><p>Template Designed By: <a href="http://www.mytemplatebox.com/">Free Website Templates</a></p></div>
</div>
</body>
</html>
STYLE:
.fleft {float:left}
.fright {float:right}
.fclear {clear:both}
.fcenter {float:none;text-align:center}
a {color:#3cb0f2}
body {background-color:#d3d2d2;margin:0;padding:0;font-family:Arial, Helvetica, sans-serif;font-size:14px;color:#000}
#top-background {background-color:#ececec}
#top-wrapper {width:960px;margin:0 auto}
#menu {background:url(images/menu.png) top center no-repeat;width:965px;height:45px}
#menu ul {margin:0;padding:0}
#menu ul li {float:left;clear:none;list-style:none}
.menu-btn {width:135px;height:30px;padding-top:10px}
ul li a {color:#3cb0f2}
#menu ul li a {display:block;text-decoration:none;font-size:14px;font-weight:bold;cursor:pointer;width:135px;height:16px;text-align:center;margin-top:3px}
#menu ul li a:hover, #selected {background:url(images/menu-selected.png) top center no-repeat;color:#fff}
#banner {background:url(images/banner-img.jpg) top center no-repeat;width:963px;height:255px}
#banner-content {width:350px;padding-top:50px;padding-left:60px;font-size:16px;color:#fff}
#logo {margin-bottom:10px}
.more-btn {text-align:right;margin-top:10px;margin-right:10px}
#wrapper {width:960px;margin:0 auto;background:#fff;margin-top:20px}
#top-box {background:url(images/top-box.png) top center no-repeat;width:960px;height:18px}
#bottom-box {background:url(images/bottom-box.png) top center no-repeat;width:960px;height:18px}
#middle-box {padding:0 20px 0px 20px}
#welcome {float:left;clear:none;width:300px}
#events {float:left;clear:none;width:300px;margin-left:45px;margin-right:40px}
#news {float:left;clear:none;width:232px}
.title {font-size:20px;color:#3cb0f2;font-weight:bold;margin-bottom:10px}
.inner_copy {border:0;color:#f00;float:left;width:50% !important;margin:-100% 0 0 0;overflow:hidden;line-height:0;padding:0;font-size:11px}
#content-divider {border-top:1px solid #3cb0f2;margin-top:20px;margin-bottom:20px}
#newsletter {background:#e8e8e8 url(images/newsletter-bg.png) bottom center no-repeat;;width:302px;padding-bottom:20px}
#newsletter-top {background:url(images/newsletter-top.png) top left no-repeat;width:302px;height:30px;padding-left:15px;font-size:13px;padding-top:3px;color:#3cb0f2;font-weight:bold}
#signup-box input {margin-left:15px;margin-top:10px;width:180px;height:16px;float:left;clear:none}
#subcribe-btn {float:right;clear:none;margin-right:15px;margin-top:10px;margin-bottom:5px}
#unsubcribe {margin-left:15px}
#unsubcribe a {color:#3cb0f2;font-weight:bold;font-size:13px}
#news-top {background:url(images/top-news.png) top left no-repeat;width:232px;height:27px;padding-left:15px;font-size:13px;padding-top:3px;color:#3cb0f2;font-weight:bold}
#news-blue {background:#3cb0f2;width:212px;padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:20px}
.sub-title {font-weight:bold;margin-bottom:5px}
#more-news1 {background:url(images/more-news1.png) top left no-repeat;text-align:right;padding-right:10px}
#more-news1 a {color:#fff;font-weight:bold;text-decoration:none;font-size:13px}
#news-gery {background:#e8e8e8;width:212px;padding-left:10px;padding-right:10px;padding-top:10px;padding-bottom:20px}
#more-news2 {background:url(images/more-news2.png) top left no-repeat;text-align:right;padding-right:10px}
#more-news2 a {color:#3cb0f2;font-weight:bold;text-decoration:none;font-size:13px}
#footer {width:915px;margin:0 auto;font-size:12px;color:#585858;padding:10px}
#footer div {padding:0 15px}
