Ответ 1
Если вы еще не проверили A List Apart, вы должны, так как в нем содержатся отличные уроки и рекомендации по дизайну веб-сайта.
Эта статья в частности должна помочь вам.
Лучший способ реализовать сайт с тремя столбцами, используя теги <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 по умолчанию CSS <DIV>'s, является "static", мой <DIV>'s был показан один ниже другого, как и ожидалось.
Итак, я установил свойство "свойство" CSS как "относительное" и изменил свойство "top" в "middle" и "right" <DIV>'s на - (минус) на высоту предыдущего <DIV>. Он работал отлично, но этот подход привел к двум проблемам:
1) Несмотря на то, что Internet Explorer 7 показывает три столбца должным образом, он по-прежнему сохраняет вертикальную полосу прокрутки, как если бы <DIV>'s располагались один под другим, и после завершения содержимого было много свободного места. Я бы этого хотел.
2) Высота этих элементов является переменной, поэтому я не знаю, какое значение установить для каждого свойства <DIV> 'top'; и я бы не хотел его жестко кодировать.
Итак, мой вопрос: какой лучший (простой + элегантный) способ реализовать этот макет? Я хотел бы избегать абсолютного позиционирования, и я также должен сохранять свой дизайн безрезультатным.
Ответы
Ответ 2
Дайте BluePrint CSS. На самом деле очень просто начать работу, но достаточно мощный для большинства приложений.
Легко понять учебники и примеры. Имеет библиотеку типографики, которая дает достойные результаты прямо из коробки.
Ответ 3
На сегодняшний день самым простым способом, который я нашел, чтобы сделать 3 столбца (или любое другое количество столбцов, разделенных на доступное пространство странными способами), YUI Сетки. Существует YUI Grids Builder, чтобы дать вам базовый макет. Следующее даст вам базовый 3-х столбцовый макет шириной 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>
Ответ 4
Существует несколько примеров и библиотек, в которых вы можете выполнить поиск - уже указанная пара (A List Apart - обязательное чтение).
Я использовал библиотеку пользовательского интерфейса Yahoo (YUI) на моих последних сайтах и очень понравился. Yahoo полностью поддерживает его, и это быстро понять и использовать. Здесь CSS for Grids, который позволяет вам отформатировать вашу страницу на столько столбцов и разделов, сколько захотите.
YUI хорош, потому что вам не нужно изобретать колесо для основания вашего сайта, и они делают все, чтобы убедиться, что их фонды работают во всех браузерах. И, самое главное, это бесплатно.
Ответ 5
Мне нравится 960 Grid System. Это легкий, простой в использовании css, который делит экран на 12 (или 16) столбцов. Вы можете использовать его для дизайна из 3 столбцов и соответствующим образом выровнять остальную часть вашего контента.
Ответ 6
Попробуйте плавать div влево, что будет держать их всех в одной строке - при условии, что имеется достаточное расстояние.
Ответ 7
Для фиксированного coloumn просто установите высоту: xxxpx сделает их равными.
Используйте этот 3 генератор макета столбца, чтобы попробовать.
Ответ 8
Этот код работает на моем компьютере с 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>
Ответ 9
Во-первых, относительное позиционирование делает то, что вы описали: он резервирует место в исходном местоположении, но отображает смещение DIV на некоторую величину.
Если вы плаваете DIV, то они будут складываться слева направо, но это может вызвать проблемы.
Разметка с тремя колонками с использованием CSS довольно сложна. Взгляните на [http://www.glish.com/css/7.asp]