960.gs проблема с макетом

#css #960.gs #grid-layout

Вопрос:

Я пытаюсь изучить сеточную систему 960. Мой левый основной текст отображается справа, и наоборот для другого текста. Мое намерение состоит в том, чтобы поместить эти два поля в одну строку. Левый основной текст также отображается выше на странице, чем правый основной текст.

Есть идеи? Запутался!

 <!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" xml:lang="en" lang="en">
    <head>
        <title>Site name</title>
        <link rel="stylesheet" type="text/css" href="./960.css" />
        <link rel="stylesheet" type="text/css" href="./styles/main.css" />
    </head>

    <body>
        <div id="skip">
            <a href="#content">Skip navigation</a>
        </div>

        <div id="header" class="container_12">
            <div id="mainLogo" class="grid_4">
                <h1>Page name</h1>
            </div>

            <div id="testContainer" class="grid_8">
                <div id="mainNavigation">
                    <ul>
                        <li><a href="#">nav1</a></li>

                        <li><a href="#">nav2</a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div id="content" class="container_12">
            <div id="contentleft" class="grid_8">
                <p>Left body text</p>
            </div>

            <div id="contentright" class="grid_4">
                <p>Right body text</p>
            </div>
        </div>

        <div id="footer" class="container_12">
        </div>
    </body>
</html>

1. Для меня это выглядит нормально на jsfiddle в Opera, IE8, Chrome и FF. Можете ли вы опубликовать пример URL-адреса?

2. Как странно. Для меня это тоже выглядит правильно. Смотрите здесь: jentestsite01.cjb.net

3. Я имею в виду вышесказанное. Выглядит правильно на jsfiddle, но не на URL, который я предоставил. Рад, что это не кажется простой проблемой! Я тоже проверил IE и Firefox, и все та же проблема.

Ответ №1:

Для меня (в Chrome 8) проблема вызвана полем на H1. В частности, таблица стилей пользовательского агента Chrome вставляет:

 h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin: 0.67em 0px;
}

Дополнительная высота для этого h1 приводит к тому, что раздел contentleft div начинается непосредственно под разделом testContainer.

Установка поля в 0 устраняет проблему для меня в Chrome 8.

Обратите внимание на инструкции по настройке 960.gs упомяните использование таблицы стилей reset.css:

 <head>
<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" />
</head>

что также должно устранить эту проблему. Обычно рекомендуется включать таблицу стилей сброса в любом случае, поэтому, если вы изучаете сеточную систему 960, вам следует включить эту таблицу стилей.

Ответ №2:

После каждой строки, пожалуйста, добавьте div с классом clear.

Первый будет сразу после того, как вы закроете тег div для id= mainLogo. И 2-й будет после того, как вы закроете тег div с id = testcontainer.

Ответ №3:

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

  <div id="content" class="container_12 clear_fix">
 </div>

Если вы посмотрите на исходный код любого из примеров сайтов на 960.gs они сделали это там, где используют много контейнеров.