Горизонтальный сайт

Помимо горизонтальности используется Foundation.

Описание разных способов создания горизонтальности и пример с таблицами:

How To Create a Horizontally Scrolling Site


<html> 
<head>
  <title>Page</title>
  <link rel="stylesheet" href="foundation/css/normalize.css" />
  <link rel="stylesheet" href="foundation/css/foundation.css" />
 
  <script src="js/vendor/custom.modernizr.js"></script>
 
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="jquery.mousewheel.js"></script>
	<script>
	$(function(){
		$("#page-wrap").wrapInner("<table cellspacing='30'><tr>");
		$(".row-wrap").wrap("<td></td>");
		$("body").mousewheel(function(event, delta) {
			this.scrollLeft -= (delta * 30);
			event.preventDefault();
		});   
	});
	</script>
</head>
<body>
	<script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
  </script>
  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.alerts.js"></script>
  <script src="js/foundation/foundation.clearing.js"></script>
  <script src="js/foundation/foundation.cookie.js"></script>
  <script src="js/foundation/foundation.dropdown.js"></script>
  <script src="js/foundation/foundation.forms.js"></script>
  <script src="js/foundation/foundation.joyride.js"></script>
  <script src="js/foundation/foundation.magellan.js"></script>
  <script src="js/foundation/foundation.orbit.js"></script>
  <script src="js/foundation/foundation.placeholder.js"></script>
  <script src="js/foundation/foundation.reveal.js"></script>
  <script src="js/foundation/foundation.section.js"></script>
  <script src="js/foundation/foundation.tooltips.js"></script>
  <script src="js/foundation/foundation.topbar.js"></script>
  <script src="js/foundation/foundation.interchange.js"></script>
  <script>
    $(document).foundation();
  </script>
 
  <style>
	tr { 
		vertical-align: top;
	}
	.row-wrap { 
		width: 2000px; 
	}
  </style>
 
<div id="page-wrap">  
<div class="row-wrap"><div class="row">
  <div class="small-2 large-4 columns">A</div>
  <div class="small-4 large-4 columns">B</div>
  <div class="small-6 large-4 columns">C</div>
</div></div>
<div class="row-wrap"><div class="row">
  <div class="large-3 columns">D</div>
  <div class="large-6 columns">E</div>
  <div class="large-3 columns">F</div>
</div></div>
<div class="row-wrap"><div class="row">
  <div class="small-6 large-2 columns">G</div>
  <div class="small-6 large-8 columns">H</div>
  <div class="small-12 large-2 columns">I</div>
</div></div>
<div class="row-wrap"><div class="row">
  <div class="small-3 columns">J</div>
  <div class="small-9 columns">K</div>
</div></div>
<div class="row-wrap"><div class="row">
  <div class="large-4 columns">L</div>
  <div class="large-8 columns">M</div>
</div></div>
<div class="row-wrap"><div class="row">
  <div class="small-6 large-5 columns">N</div>
  <div class="small-6 large-7 columns">O</div>
</div></div>
<div class="row-wrap"><div class="row">
  <div class="large-6 columns">P</div>
  <div class="large-6 columns">Q</div>
</div></div>
</div>
</body> 
</html>

Оставить комментарий


Примечание - Вы можете использовать эти HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>