Лучший способ реализовать веб-сайт с тремя столбцами, используя теги <DIV>?[закрыто]
Вопрос
Я разрабатываю веб-сайт с тремя столбцами, используя такой макет:
<div id='left' style='left: 0; width: 150px; '> ... </div>
<div id='middle' style='left: 150px; right: 200px' > ... </div>
<div id='right' style='right: 0; width: 200px; '> ... </div>
Но, учитывая свойство CSS «position» по умолчанию <DIV>'s
является «статичным», мой <DIV>'s
как и ожидалось, были показаны один под другим.
Поэтому я установил свойство CSS «позиция» на «относительное» и изменил свойство «верхнее» для «среднего» и «правого». <DIV>'s
до -(минус) высота предыдущего <DIV>
.Все работало нормально, но этот подход принес мне две проблемы:
1) Несмотря на то, что Internet Explorer 7 правильно отображает три столбца, вертикальная полоса прокрутки по-прежнему сохраняется, как если бы <DIV>'s
были расположены один под другим, и после того, как контент закончился, остается много пустого пространства.Мне бы хотелось этого.
2) Высота этих элементов является переменной, поэтому я не знаю, какое значение установить для каждого. <DIV>
свойство 'top';и я бы не хотел его жестко закодировать.
Итак, мой вопрос: как лучше всего (простой и элегантный) реализовать этот макет?Я хотел бы избежать абсолютного позиционирования, а также оставить свой дизайн без таблицы.
Решение
Если вы еще не выписались Список врозь вам следует это сделать, поскольку он содержит несколько отличных руководств и рекомендаций по дизайну веб-сайтов.
Эта статья в частности, должно помочь вам.
Другие советы
Давать BluePrint CSS попытка.Начать работу с ним действительно просто, но он достаточно мощный для большинства приложений.
Понятные уроки и примеры.Имеет библиотеку типографики, которая дает достойные результаты прямо из коробки.
Безусловно, самый простой способ сделать 3 столбца (или любое другое количество столбцов, странным образом разделенных по доступному пространству) - это ЮИ сетки.Eсть YUI Grids Builder чтобы дать вам базовый макет.Ниже приведен базовый макет шириной 750 пикселей с тремя столбцами (разделён на 1/3, 1/3 1/3) и левой боковой панелью шириной 160 пикселей.Изменить его на другую ширину, настройки боковой панели и разделение столбцов очень просто.
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html>
4 <head>
5 <title>YUI Base Page</title>
6 <link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
7 </head>
8 <body>
9 <div id="doc" class="yui-t1">
10 <div id="hd"><h1>YUI: CSS Grid Builder</h1></div>
11 <div id="bd">
12 <div id="yui-main">
13 <div class="yui-b"> <div class="yui-gb">
14 <div class="yui-u first">
15 <!-- YOUR DATA GOES HERE -->
16 </div>
17 <div class="yui-u">
18 <!-- YOUR DATA GOES HERE -->
19 </div>
20 <div class="yui-u">
21 <!-- YOUR DATA GOES HERE -->
22 </div>
23 </div>
24 </div>
25 </div>
26 <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div>
27
28 </div>
29 <div id="ft">Footer is here.</div>
30 </div>
31 </body>
32 </html>
Существует ряд примеров и библиотек, по которым вы можете выполнить поиск — пара уже перечислена (обязательно прочитать A List Apart).
Я использовал Библиотека пользовательского интерфейса Yahoo (YUI) на моих последних нескольких сайтах, и мне это очень нравится.Yahoo полностью поддерживает его, его легко понять и использовать.Вот там CSS для сеток, что позволяет форматировать страницу на любое количество столбцов и разделов.
YUI удобен тем, что вам не нужно заново изобретать велосипед для создания основы вашего сайта, и они берут на себя всю работу по обеспечению того, чтобы их основы работали во всех браузерах.И что самое приятное, это бесплатно.
Мне нравится Сетка 960.Это легкий и простой в использовании CSS, который делит экран на 12 (или 16) столбцов.Вы можете использовать его для дизайна из 3 колонок и соответствующим образом выровнять остальной контент.
Попробуйте переместить элементы div влево, чтобы они все находились на одной линии — при условии, что места достаточно.
Для фиксированного столбца просто установите высоту:xxxpx, и они станут равными.
Использовать это Генератор макетов из 3 столбцов пытаться.
Этот код работает на моем компьютере с IE 8, Chrome, Firefox.
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title> Test </title>
</head>
<body>
<div id="grad2" style="width:15%; height:100%; position:fixed; top:0px; left:0px; background-color:rgb(147,81,73);">
<a href="http://abv.bg"> Column1 </a> </div>
<div id="grad4" style="width:70%; height:100%; position:fixed; top:0px; left:15%; background-color:rgb(0,0,0);">
<font color="#FFFFFF">Column 2 </font> </div>
<div id="grad3" style="width:100%; height:100%; position:fixed; top:0px; left:85%; background-color:rgb(60,255,4);">
<a href="http://abv.bg"> Column 3 </a> </div>
</body>
</html>
Во-первых, относительное позиционирование делает то, что вы описали:он резервирует место в исходном месте, но отображает смещение DIV на некоторую величину.
Если вы разместите DIV в плавающем положении, они будут располагаться слева направо, но это может вызвать проблемы.
Разметка из трех столбцов с использованием CSS довольно сложна.Посмотри на [http://www.glish.com/css/7.asp]