Четверг, 2024-03-28, 5:54 PM

Поиск
Меню
Категории раздела
PHP [40]
Cкриптовый язык программирования общего назначения
MySQL [1]
Cвободная система управления базами данных (СУБД)
jQuery [8]
Библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML
CSS [60]
Cредство описания, оформления внешнего вида веб-страниц
JavaScript [161]
Прототипно-ориентированный скриптовый язык программирования
Веб-дизайн [2]
Проектирование пользовательских веб-интерфейсов для сайтов или веб-приложений
RegExp [1]
Регулярные выражения
SEO [2]
Продвижение и раскрутка сайтов. Заработок в сети.
C/C++ [3]
Компилируемый статически типизированный язык программирования общего назначения
Windows [4]
Программистам под ОС MS Windows
HGE [2]
Игровой движок HGE (Haaf's Game Engine)
Игровой дизайн [8]
Психология дизайна игр
Разработка игр [2]
Общие моменты, относящиеся к геймдеву
wxWidgets [2]
Библиотека инструментов для разработки кроссплатформенных приложений
PureBasic [10]
Кроссплатформенный компилятор и IDE для быстрой разработки
VST [6]
Steinberg's Virtual Studio Technology (VST)
iOS [1]
Mобильная операционная система, разрабатываемая и выпускаемая американской компанией Apple
Пиксельная графика [9]
Pixel art и все, что с ним связано
libGDX [2]
Кроссплатформенный открытый движок на Java, позволяющий создавать 2D и 3D игры под различные платформы, среди которых: Android, HTML5, Windows, Linux, iOS.
Поддержи проект!
Рекомендуем


Блог разработчика

Главная » 2013 » Июнь » 19 » Блоки в пять колонок
10:31 PM
Блоки в пять колонок
Cмотреть пример
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html lang="en-GB">
 <head>
 <title>
 Блоки в пять колонок
 </title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <style media="screen" type="text/css">
/* <!-- */
 body {
 margin:0;
 padding:0;
 }
 #header h1,
 #header h2,
 #header p {
 margin-left:2%;
 padding-right:2%;
 }
 #active2 #tab2,
 #active3 #tab3,
 #active4 #tab4,
 #active5 #tab5 {
 font-weight:bold;
 text-decoration:none;
 color:#000;
 }
 #footer {
 clear:both;
 float:left;
 width:100%;
 }
 #footer p {
 margin-left:2%;
 padding-right:2%;
 }

 /* Start of Column CSS */
 #container5 {
 clear:left;
 float:left;
 width:100%;
 overflow:hidden;
 background:#eee; /* column 5 background colour */
 }
 #container4 {
 clear:left;
 float:left;
 width:100%;
 position:relative;
 right:20%;
 background:#b2f0f9; /* column 4 background colour */
 }
 #container3 {
 clear:left;
 float:left;
 width:100%;
 position:relative;
 right:20%;
 background:#89ffa2; /* column 3 background colour */
 }
 #container2 {
 clear:left;
 float:left;
 width:100%;
 position:relative;
 right:20%;
 background:#ffa7a7; /* column 2 background colour */
 }
 #container1 {
 float:left;
 width:100%;
 position:relative;
 right:20%;
 background:#fff689; /* column 1 background colour */
 }
 #col1 {
 float:left;
 width:16%;
 position:relative;
 left:82%;
 overflow:hidden;
 }
 #col2 {
 float:left;
 width:16%;
 position:relative;
 left:86%;
 overflow:hidden;
 }
 #col3 {
 float:left;
 width:16%;
 position:relative;
 left:90%;
 overflow:hidden;
 }
 #col4 {
 float:left;
 width:16%;
 position:relative;
 left:94%;
 overflow:hidden;
 }
 #col5 {
 float:left;
 width:16%;
 position:relative;
 left:98%;
 overflow:hidden;
 }
 /* --> */
 </style>
 </head>
 <body id="active5">
 <div id="container5">
 <div id="container4">
 <div id="container3">
 <div id="container2">
 <div id="container1">
 <div id="col1">
 <h2>
 Equal height columns
 </h2>
 <p>
 It does not matter how much content is in each column, the background colours will always stretch down to the height of the tallest column.
 </p>
 <h2>
 5 Column Dimensions
 </h2>
 <p>
 Each column is 20% percent wide with 2 percent padding on each side.
 </p><!-- Column one end -->
 </div>
 <div id="col2">
 <!-- Column two start -->
 <h2>
 No CSS hacks
 </h2>
 <p>
 The CSS used for this 5 column layout is 100% valid and hack free. To overcome Internet Explorer's broken box model, no horizontal padding or margins are used. Instead, this design
 uses percentage widths and clever relative positioning.
 </p>
 <h2>
 No Images
 </h2>
 <p>
 This five column layout requires no images. Many CSS website designs need images to colour in the column backgrounds but that is not necessary with this design. Why waste bandwidth
 and precious HTTP requests when you can do everything in pure CSS and HTML?
 </p><!-- Column two end -->
 </div>
 <div id="col3">
 <!-- Column three start -->
 <h2>
 No JavaScript
 </h2>
 <p>
 JavaScript is not required. Some website layouts rely on JavaScript hacks to resize divs and force elements into place but you won't see any of that nonsense here.
 </p>
 <h2>
 Valid XHTML strict markup
 </h2>
 <p>
 The HTML in this layout validates as XHTML 1.0 strict.
 </p><!-- Column three end -->
 </div>
 <div id="col4">
 <!-- Column four start -->
 <h2>
 This layout is FREE for anyone to use
 </h2>
 <p>
 You don't have to pay anything. Simply view the source of this page and save the HTML onto your computer. My only suggestion is to put the CSS into a separate file. If you are
 feeling generous however, link back to this page so other people can find and use this layout too.
 </p><!-- Column four end -->
 </div>
 <div id="col5">
 <!-- Column five start -->
 <h2>
 Cross-Browser Compatible
 </h2>
 <p>
 This 5 column layout has been tested on the following browsers:
 </p>
 <h3>
 iPhone & iPod Touch
 </h3>
 <ul>
 <li>Safari
 </li>
 </ul>
 <h3>
 Mac
 </h3>
 <ul>
 <li>Safari
 </li>
 <li>Firefox
 </li>
 <li>Opera 9
 </li>
 <li>Netscape 7 & 9
 </li>
 </ul>
 <h3>
 Windows
 </h3>
 <ul>
 <li>Firefox 1.5, 2 & 3
 </li>
 <li>Safari
 </li>
 <li>Opera 8 & 9
 </li>
 <li>Explorer 5.5, 6 & 7
 </li>
 <li>Google Chrome
 </li>
 <li>Netscape 8
 </li>
 </ul><!-- Column five end -->
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </body>
</html>
Категория: CSS | Просмотров: 593 | Добавил: poster | Теги: CSS, пример | Рейтинг: 0.0/0

Поблагодарить автора



Комментарии