960.gs проблема с макетом - PullRequest
Новая
       20

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

1 голос
/ 15 апреля 2011

Я пытаюсь выучить систему координат 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>

Ответы [ 3 ]

0 голосов
/ 07 мая 2011

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

Сначала будет сразу после закрытия тега div для id = mainLogo.И второе - после закрытия тега div с id = testcontainer.

0 голосов
/ 07 мая 2011

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

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

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

0 голосов
/ 15 апреля 2011

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

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

Дополнительная высота этого h1 приводит к тому, что div 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, вам следует включить эту таблицу стилей.

...