Preview - HTML - CSS

<!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" xml:lang="en" lang="en">
<head>
	<title></title>
	<link rel="stylesheet" href="stylesheets/style.css" type="text/css" media="screen" /> 
	
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/easySlider1.7.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){	
			$("#slider").easySlider({
				auto: true, 
				continuous: true,
				numeric: true
			});
		});	
	</script>
	
</head>

<body>

	<div class="container">
	
		<div id="header">
		
			<div id="logo" ><h1><a href="#">Example 18</a></h1></div>
			<div id="taal">
				<a href="#"><img src="images/nl.jpg" width="16" height="11" alt="nl" /></a>
				<a href="#"><img src="images/en.jpg" width="16" height="11" alt="en" /></a>
			</div>
			
			<div id="clear"></div>
			
			<ul class="menu_top" >
				<li class="home" ><a href="#">Home</a></li>
				<li><a href="#">men</a></li>
				<li><a href="#">woman</a></li>
				<li><a href="#">children</a></li>
				<li><a href="#">electronics</a></li>
				<li class="last" ><a href="#">Lorum Ipsum</a>
					<div id="dropdown_content">
						<a href="#">Lorum</a>
						<a href="#">Ipsum</a>
						<a href="#">Dollor</a>
						<a href="#">SIT</a>
						<a href="#">Amet</a>
					</div>
				</li>
			</ul>
			
		</div> <!-- END HEADER --> 
	
		<div id="slider">
			<ul>
				<li>
					<div class="blok">
						<h2><a href="#">Macbook pro 13"</a></h2>
						<img class="aanbieding_thumb" src="images/laptop.jpg" width="305" height="190" alt="laptop" />
						<p class="aanbieding_specs" >
							2,3-GHz dual-core<br /> Intel Core i5<br />
							4 GB, 1333 MHz<br />
							320 GB, 5400 rpm1<br />
							Intel HD Graphics 3000<br />
							Ingebouwde batterij (7uur)<br />
						</p>
						<div class="price">
							<p class="line_through" >1199,99</p>
							<p>1099,99</p>
						</div>
					</div>
				</li>
				<li>
					<div class="blok">
						<h2><a href="#">Macbook pro 13"</a></h2>
						<img class="aanbieding_thumb" src="images/laptop.jpg" width="305" height="190" alt="laptop" />
						<p class="aanbieding_specs" >
							2,3-GHz dual-core<br /> Intel Core i5<br />
							4 GB, 1333 MHz<br />
							320 GB, 5400 rpm1<br />
							Intel HD Graphics 3000<br />
							Ingebouwde batterij (7uur)<br />
						</p>
						<div class="price">
							<p class="line_through" >1199,99</p>
							<p>1099,99</p>
						</div>
					</div>
				</li>
				<li>
					<div class="blok">
						<h2><a href="#">Macbook pro 13"</a></h2>
						<img class="aanbieding_thumb" src="images/laptop.jpg" width="305" height="190" alt="laptop" />
						<p class="aanbieding_specs" >
							2,3-GHz dual-core<br /> Intel Core i5<br />
							4 GB, 1333 MHz<br />
							320 GB, 5400 rpm1<br />
							Intel HD Graphics 3000<br />
							Ingebouwde batterij (7uur)<br />
						</p>
						<div class="price">
							<p class="line_through" >1199,99</p>
							<p>1099,99</p>
						</div>
					</div>
				</li>
				<li>
					<div class="blok">
						<h2><a href="#">Macbook pro 13"</a></h2>
						<img class="aanbieding_thumb" src="images/laptop.jpg" width="305" height="190" alt="laptop" />
						<p class="aanbieding_specs" >
							2,3-GHz dual-core<br /> Intel Core i5<br />
							4 GB, 1333 MHz<br />
							320 GB, 5400 rpm1<br />
							Intel HD Graphics 3000<br />
							Ingebouwde batterij (7uur)<br />
						</p>
						<div class="price">
							<p class="line_through" >1199,99</p>
							<p>1099,99</p>
						</div>
					</div>
				</li>
			</ul>
		</div> <!-- END SLIDER --> 
		
		<div id="winkelmandje">
			<h4 class="mand" >Chart</h4>
			<table>
				<tr>
					<td>Lorum Ipsum:</td>
					<td>4</td>
				</tr>
				<tr>
					<td>Total price:</td>
					<td>&#8364;125.50</td>
				</tr>
			</table>
			<div class="inhoud">
				<a href="#">Lorum Ipsum</a>
					<img src="images/border.jpg" width="29" height="11" alt="border" />
				<a href="#">Checkout</a>
			</div>
			<h4 class="lijst" >Lorum Ipsum</h4>
			<p>Lorem Ipsum is simply dummy text of the printing.</p>
		</div> <!-- END WINKELMANDJE --> 
		
		<div class="spacer"></div>
		
		<div id="content">
			<div id="cats">
				<h3>Categorie&#235;n</h3>
				<ul>
					<li><a href="#">t-shirts</a></li>
					<li><a href="#">t-shirts</a></li>
					<li><a href="#">t-shirts</a></li>
					<li><a href="#">t-shirts</a></li>
					<li><a href="#">t-shirts</a></li>
					<li><a href="#">t-shirts</a></li>
					<li><a href="#">t-shirts</a></li>
					<li><a href="#">t-shirts</a></li>
					<li><a href="#">t-shirts</a></li>
					<li><a href="#">t-shirts</a></li>
					<li><a href="#">t-shirts</a></li>
					<li><a href="#">t-shirts</a></li>
					<li><a href="#">t-shirts</a></li>
					<li><a href="#">t-shirts</a></li>
					<li><a href="#">t-shirts</a></li>
				</ul>
			</div>
			
			<div id="products">
				<p>You are here: <a href="#">Electronics</a> &#160;&#160;>>>&#160;&#160; <a href="#">Apple</a></p>
				
				<div class="prod">
					<div class="prod_left">
						<img src="images/iphone.jpg" width="112" height="138" alt="iphone" />
						<div class="specs">
							<a href="">Lorum Ipsum</a>
						</div>
					</div>
					<div class="prod_right">
						<h2>iPod Touch 4g 8GB</h2>
						<p>
							Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap <a class="leesverder" href="#">..read more</a>
						</p>
						<div class="voorraad">
							<p>Lorum ipsum dollor sit</p>
							<p class="groen" >lorum</p>
						</div>
						<div class="ww">
							<a href="#">add to chart</a>
						</div>
					</div>
				</div> <!-- END PROD --> 
				
				<div class="prod">
					<div class="prod_left">
						<img src="images/iphone.jpg" width="112" height="138" alt="iphone" />
						<div class="specs">
							<a href="">Lorum Ipsum</a>
						</div>
					</div>
					<div class="prod_right">
						<h2>iPod Touch 4g 8GB</h2>
						<p>
							Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap <a class="leesverder" href="#">..read more</a>
						</p>
						<div class="voorraad">
							<p>Lorum ipsum dollor sit</p>
							<p class="groen" >lorum</p>
						</div>
						<div class="ww">
							<a href="#">add to chart</a>
						</div>
					</div>
				</div> <!-- END PROD --> 
				
				<div class="prod">
					<div class="prod_left">
						<img src="images/iphone.jpg" width="112" height="138" alt="iphone" />
						<div class="specs">
							<a href="">Lorum Ipsum</a>
						</div>
					</div>
					<div class="prod_right">
						<h2>iPod Touch 4g 8GB</h2>
						<p>
							Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap <a class="leesverder" href="#">..read more</a>
						</p>
						<div class="voorraad">
							<p>Lorum ipsum dollor sit</p>
							<p class="groen" >lorum</p>
						</div>
						<div class="ww">
							<a href="#">add to chart</a>
						</div>
					</div>
				</div> <!-- END PROD --> 
				
				
			</div> <!-- END PRODUCTS --> 
			<div id="sidebar">
				<div class="cats2">
					<h3>Informatief</h3>
					<ul>
						<li><a href="#">Lorum Ipsum dollor</a></li>
						<li><a href="#">It is a long established</a></li>
						<li><a href="#">Lorum Ipsum dollor</a></li>
						<li><a href="#">It is a long established</a></li>
						<li><a href="#">Lorum Ipsum dollor</a></li>
						<li><a href="#">It is a long established</a></li>
					</ul>
				</div>
			
				<div class="cats2">
					<h3>Informatief</h3>
					<p>
						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
					</p>
					<form method="get" action="#">
						<fieldset>
							<input class="input" type="text" value="" name="s"/>
							<input name="submit" value="" type="submit" />
						</fieldset>
					</form>
				</div>
			
			</div> <!-- END SIDEBAR --> 
			
			<div class="spacer"></div>
			
		</div> <!-- END CONTENT --> 	
		
	</div> <!-- END CONTAINER --> 
	
	<div id="footer">
		<div class="container">
			<div class="footer_list">
				<h3>Lorum Ipsum</h3>
				<ul>
					<li><a href="#">about us</a></li>
					<li><a href="#">about us</a></li>
					<li><a href="#">about us</a></li>
					<li><a href="http://www.psdtohtmlshop.com" title="PSD to HTML" >PSD to HTML</a></li>
				</ul>
			</div>
			<div class="footer_list">
				<h3>Lorum Ipsum</h3>
				<ul>
					<li><a href="#">about us</a></li>
					<li><a href="#">about us</a></li>
					<li><a href="#">about us</a></li>
					<li><a href="#">about us</a></li>
				</ul>
			</div>
			<div class="footer_list">
				<h3>Lorum Ipsum</h3>
				<ul>
					<li><a href="#">about us</a></li>
					<li><a href="#">about us</a></li>
					<li><a href="#">about us</a></li>
					<li><a href="#">about us</a></li>
				</ul>
			</div>
			<div class="betaalmethodes">
				<a href="#"><img src="images/ideal.png" width="51" height="44" alt="ideal" /></a>
				<a href="#"><img src="images/postnl.png" width="46" height="45" alt="postnl" /> </a>
				<a href="#"><img src="images/paypal.png" width="100" height="28" alt="paypal" /> </a>
			</div>
		</div>
	</div> <!-- END FOOTER --> 

<p style="position: fixed; top: 20px; right: 120px;" >
	<a href="http://validator.w3.org/check?uri=https%3A%2F%2Fwww.psdtohtmlshop.com%2FExamples%2FExample-18%2Findex.html" rel="nofollow" target="_blank" >
		<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" />
	</a>
</p>

<p style="position: fixed; top: 20px; right: 10px;">
	<a href="http://jigsaw.w3.org/css-validator/" rel="nofollow" target="_blank" >
   	<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valide CSS!" />
   </a>
</p>

</body>
</html>