Вопросы касательно CSS дизайна с использованием сетки 960 - PullRequest
Новая
       9

Вопросы касательно CSS дизайна с использованием сетки 960

4 голосов
/ 07 апреля 2009

Я использую сеточную систему 960 для создания прототипа макета.

Я хотел бы установить цвет между Навигация и Контент до # 000 (сплошной черный), но я не могу понять, как. Что я сейчас получаю:

alt text

Используя этот код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/custom.css" />
<title>The system</title>
</head>
<body>

<div class="container_16" id="base">
    <div class="grid_16" id="header">Graphical banner</div>
    <div class="grid_16" id="logoutrow">Logout row</div>
    <div class="grid_3" id="navigation">Navigation</div>
    <div class="grid_13" id="content">Content</div>
    <div class="grid_16" id="footer">Footer</div>
</div>

</body>
</html>

Мои два вопроса:

  • Как указать цвет для всех пробелов между ними, например, между навигацией и содержимым?
  • Мой макет выглядит так, как я хочу, только если я не использую clear, как в этом руководстве. Почему?

Для промежуточного цвета я попытался поместить это в custom.css без успеха: 

div#base {
    background-color: #000;
}

Если вы не знакомы с сеткой 960, но все же хотели бы попытаться помочь всему 960.css, вы можете найти здесь .

Оба вопроса решены:

  • Мой второй вопрос решается ниже в сообщении Яна Агаарда. Я не включил сущность XML nbsp и у меня был пустой div. Это не сработало, по крайней мере, в Firefox 3.x.

Мой текущий код выглядит так: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/custom.css" />
<title>The system</title>
</head>
<body>

<div class="container_16" id="base">
    <div class="grid_16" id="header">Graphical banner</div>
    <div class="clear">&nbsp;</div>
    <div class="grid_16" id="logoutrow">Logout row</div>
    <div class="clear">&nbsp;</div>
    <div class="grid_16" id="navigation-content>
        <div class="grid_3 alpha" id="navigation">Navigation</div>
        <div class="grid_13 omega" id="content">Content</div>
    </div>
    <div class="clear">&nbsp;</div>
    <div class="grid_16" id="footer">Footer</div>
    <div class="clear">&nbsp;</div>
</div>

</body>
</html>

В сеточной системе сказано, что дочерние узлы сетки должны следовать определенным правилам. Первый дочерний узел должен иметь класс alpha , а последний - класс omega . Что я и делаю выше. Это отличие от ответа, который GateKiller дал ниже, который помимо этого дал решение.

Ответы [ 4 ]

5 голосов
/ 07 апреля 2009

Лучший способ сделать это - заключить #navigation и #contents в контейнер div следующим образом: 

<div class="container_16" id="base">
    <div class="grid_16" id="header">Graphical banner</div>
    <div class="grid_16" id="logoutrow">Logout row</div>
    <div class="grid_16" id="navigation-content">
        <div class="grid_3" id="navigation">Navigation</div>
        <div class="grid_13" id="content">Content</div>
    </div>
    <div class="grid_16" id="footer">Footer</div>
</div>

Вы можете установить фон следующим образом: 

#navigation-content {
    background: #000
}

Вы действительно нуждаетесь в очищающем div, только если вы не используете полные 16 сеток или если вы используете какие-либо правила с плавающей точкой, которые требуют очистки. Автор имеет право сказать следующее: :

Наконец, я хотел поговорить о методах очистки, включенных в 960.css. Прежде всего, это мое личное предпочтение, добавление безобидной разметки для очистки всех элементов. Я уже много писал об этом, поэтому больше не буду рассказывать об этом. По сути, добавьте class = "clear" к или , который вы хотите удалить. Единственный эффект, который он даст, - очистить поплавки.

Другой метод предназначен для всех тех, кто занимается пуристами разметки, которые не хотят портить ваш HTML. Вместо этого вы можете вставить разметку через ваш CSS. Эта техника уже хорошо документирована. По сути, добавьте class = "clearfix" к элементам, чтобы очистить то, что следует за ними.

1 голос
/ 07 апреля 2009

Ответы на второй вопрос: <div class="clear">&nbsp;</div> добавляет на страницу элемент со следующими стилями. По сути, это пустой элемент, который не позволяет никаким элементам располагаться слева или справа, эффективно вынуждая контент находиться до и после него в отдельных строках. Это может быть необходимо не для всех браузеров. 

{
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

Вместо элемента очистки вы можете использовать класс clearfix. Добавьте его к элементу contianer следующим образом: 

<div class="container_16 clearfix" id="base">

Таким образом, вы можете избежать пустых элементов, но я думаю, что это решение менее совместимо с различными браузерами.

0 голосов
/ 07 апреля 2009

Они все плавают, поэтому я предполагаю, что контейнер #base не расширяется, чтобы содержать их. Попробуйте добавить overflow: hidden; к вашему #base div, чтобы он содержал плавающие дочерние элементы, что позволит вам увидеть цвет фона, который вы применили к нему.

0 голосов
/ 07 апреля 2009

Сделай это. 

<div class="container_16" id="base" style="background:#000">
...