Верстка » Горизонтальный скролл? Запросто!


21 июля 2008 от CashBy
Горизонтальный скролл элементарно делается для тэга pre (писал об этом пару дней назад). Но иногда скроллить надо не только его.
Писать много не буду. В общем простой и рабочий вариант с комбинированием блочной и табличной верстки. HTML-код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <title>
  </title> 
  <link rel="stylesheet" href="styles.css" type="text/css" />
 </head>
 <body> 
  <div class="scroller"> 
   <table>
    <tr>
     <td><div class="block_info">Здесь какая-то информация, например блок рекламы</div></td>
     <td><div class="block_info">Здесь какая-то информация, например блок рекламы</div></td>
     <td><div class="block_info">Здесь какая-то информация, например блок рекламы</div></td>
     <td><div class="block_info">Здесь какая-то информация, например блок рекламы</div></td>
     <td><div class="block_info">Здесь какая-то информация, например блок рекламы</div></td>
    </tr>
   </table>
  </div>
 </body>
</html>


css-код:

body {
	font-size: 11px;
	font-family: Arial;
}
div.scroller {
	width: 380px;
	padding: 5px;
	background: #ff9;
	overflow-x: scroll;
}
div.block_info {
	width: 100px;
	height: 100px;
	padding: 5px;
	margin: 5px;
	border: 1px solid #888;
	background: #ddd;
	color: #000;
}


Результат:

scroll.jpg (11.79 Kb)