Отцентровать форум по середине страницы браузера (через CSS)

Солярис · 13 марта 2011, 20:35:47

Всем доброго времени суток!

Вопрос вроде бы простой, но что-то никак не пойму, как через CSS (в файле style.css) отцентровать весь форум по середине страницы (а то он прижимается к левой стороне страницы)?

Нашел вроде бы нужный код, который начинаете с body, но вот какой параметр нужно установить что-то никак не пойму.

Заранее спасибо за помощь.

0daliska · 13 марта 2011, 21:20:00

Ну, может ссылочку на форум укажите...
А то тот форум, что в профиле, отцентрирован нормально...

Солярис · 13 марта 2011, 23:53:52

Я уже не помню, отцентрировал ли я его (форум в профиле) или нет. Во всяком случае, в CSS я ничего не добавлял для центровки.

Я бы хотел в принципе знать, какой код необходимо поставить в файле стиль.цсс для центровки. Сейчас я это пытаюсь сделать на локальном форуме (с фиксированной шириной). И вот форум к левой стороне прижимается, а не по центру.

З.Ы. Я думаю, что если я сейчас и действующий форум сделаю с фиксированной шириной, то он тоже будет к левой стороне страницы прижиматься.
А впечатление, что он сейчас отцентрирован создается скорее всего от того, что заданы одинаковые отступы от края страницы (слева и справа) форума.

Заранее спасибо.

0daliska · 13 марта 2011, 23:58:01

Цитата: Солярис от 13 марта 2011, 23:53:52
Я уже не помню, отцентрировал ли я его (форум в профиле) или нет. Во всяком случае, в CSS я ничего не добавлял для центровки.

Я бы хотел в принципе знать, какой код необходимо поставить в файле стиль.цсс для центровки. Сейчас я это пытаюсь сделать на локальном форуме (с фиксированной шириной). И вот форум к левой стороне прижимается, а не по центру.

З.Ы. Я думаю, что если я сейчас и действующий форум сделаю с фиксированной шириной, то он тоже будет к левой стороне страницы прижиматься.
А впечатление, что он сейчас отцентрирован создает скорее всего заданные одинаковые отступы слева и справа форума.

Заранее спасибо.

Ну разница между фиксированной версткой и резиновой - существенная в стилях...

Так и надо было сразу написать...
в стиле

Код Выделить

body {
padding: 0 auto;
тут еще могут быть параметры;
}

где 0 - это отступы сверху и снизу
а auto - это слева и справа
а можно и так:

Код Выделить

body {
padding: 0 auto 10px;
тут еще могут быть параметры;
}

где 0 - это отступ сверху
10 пикселей - снизу
а auto - это слева и справа

только ширину задавать не для body, а для дива внутри боди!!!
Например:

Код Выделить


<html>
<head>
</head>
<body>
<div class="forum_div">
тут наш форум целиком
</div>
</body>
</html>

Так вот блок форума фиксированной ширины, куда мы посместили форум:

Код Выделить

.forum_div {
width:1000px;
}

тогда прекрасно срабоает и стиль для боди из ранее упомянутых

Солярис · 17 марта 2011, 22:02:20

Спасибо за подробный ответ.

А в каком файле проводить манипуляции с кодом с дивами, кроме стилей? В индекс.темплейт?

Кстати, в стилях для дива можно будет установить параметры ширины с min width и max width?

++++++++++++

Хм, попробовал с дивом и никакой центровки форума. Все то же самое - форум прижимается к левой стороне.
А если в диве использовать код align="center", то не форум по середине становится, а все его содержимое центрируется по середине, а он как прижимался к левой стороне, так и продолжает пребывать в этом виде.

0daliska · 17 марта 2011, 22:25:33

Внимательно перечитайте то, что Вам написала... В принципе, не видя, что у Вас и как, подсказать сложно... Тем более, подозреваю, что Вы делаете абсолютно не то, что Вам написала я...
Где я написала про align="center"?

Да, обрамляющий див открытие и закрытие надо будет в индекс.темплейт делать...
Можно и макс-ширину указывать и мин-ширину указывать...
Теоретически именно так и выравнивается форум...
Зайдите на форум из моего профиля, - увидите, что фиксированная ширина и никуда ничего не сдвигается...
Если есть файербаг или стрекоза, разберите код, чтобы вникнуть, как это организовывается...

Солярис · 17 марта 2011, 22:27:16

Кстати, вместо вот этого кода

Код Выделить

.forum_div {
width:1000px;
}

Я ранее уже использовал вот такой и в боди:

Код Выделить


body
{
min-width:1024px;
max-width: 1400px;
}

И в этом случае я даже не добавлял код с дивом в форум.

0daliska · 17 марта 2011, 22:28:07

Цитата: Солярис от 17 марта 2011, 22:27:16
Кстати, вместо вот этого кода
Код Выделить Развернуть
.forum_div { width:1000px; }

Я ранее уже использовал вот такой и в боди:
Код Выделить Развернуть
body { min-width:1024px; max-width: 1400px; }

И в этом случае я даже не добавлял код с дивом в форум.

А это и есть ваша ошибка!!!

Солярис · 17 марта 2011, 22:30:19

Цитата: 0daliska от 17 марта 2011, 22:25:33
Где я написала про align="center"?

Это уже мое добавление, после того, как я добавил код с дивом в индекс.темплейт и у меня форум так и остался прижатым к левой стороне.
Я решил попробовать с этим доп. кодом.

Я не понимаю, почему он к левой стороне прилип?

Солярис · 17 марта 2011, 22:32:15

Цитата: 0daliska от 17 марта 2011, 22:28:07
А это и есть ваша ошибка!!!

И в чем ошибка? Когда я вставил Ваш код, то я, разумеется, из боди убрал свой и оставил только стиль с дивом, но форум все равно упорно прижимается к левой стороне.

На тестовом форуме у меня в индекс темплейт сейчас стоит такой код:

Код Выделить

<body><div class="forum_div">';
тут идет весь код форума
</div></body></html>';

0daliska · 17 марта 2011, 22:45:11

Поверьте... Нельзя задавать ширину для body...
Внимательно посмотрите, какие параметры для этого тега предусмотрены...
Тело должно расползаться на всю ширину монитора...
http://htmlbook.ru/html/body
а плавающий блок помещается внутрь боди, вот этот блок и должен быть фиксированной ширины будет плавающим только в этом случае...
Задав фиксированную ширину для боди Вы сами прижимаете влево все, что выводится для сайта, и сужаете область для выводимого контента...
Где конкретно Вы допускаете ошибку, я сказать не могу, ибо не вижу вообще, что и как Вы делаете...
Теоретически я описала, как это делается, но в каждом конкретном случае надо смотреть, что Вы там пишите и какие стили наследуются... Факторов может быть много...

Солярис · 17 марта 2011, 23:02:33

Да не ставлю я для боди ничего. Один раз только попробовал, а потом убрал.

Вот, еще раз. Цитирую себя.

Цитата: Солярис от 17 марта 2011, 22:32:15
И в чем ошибка? Когда я вставил Ваш код, то я, разумеется, из боди убрал свой и оставил только стиль с дивом, но форум все равно упорно прижимается к левой стороне.

На тестовом форуме у меня в индекс темплейт сейчас стоит такой код:
Код Выделить Развернуть
<body><div class="forum_div">'; тут идет весь код форума </div></body></html>';

Теперь привожу то, что прописано в стилях на тестовом форуме:

Код Выделить

/* The main body of the entire forum. */
body
{
   background-color: #E5E5E8;
   margin: 0px;
   padding: 12px 30px 12px 30px;
}

.forum_div
{
    min-width:1024px;
    max-width: 1400px;
}

Ничего у меня здесь не имеется в коде такого (на мой взгляд), чтобы заставляло форум прижиматься к левой стороне браузера.

0daliska · 17 марта 2011, 23:09:23

Уже что-то... Сюда смотрим:

Код Выделить

 body
{
   background-color: #E5E5E8;
   margin: 0px;
   padding: 12px 30px 12px 30px;
}

padding: 12px 30px 12px 30px; - Разве я так Вам сказала написать?
Цитирую...

Цитата: 0daliska от 13 марта 2011, 23:58:01

Код Выделить Развернуть
body { padding: 0 auto; тут еще могут быть параметры; }
где 0 - это отступы сверху и снизу
а auto - это слева и справа
а можно и так:
Код Выделить Развернуть
body { padding: 0 auto 10px; тут еще могут быть параметры; }
где 0 - это отступ сверху
10 пикселей - снизу
а auto - это слева и справа

клюевое слово auto для отступов слева и справа...
Хотя, возможно, дополнительно также потребуется еще дополнительно ввести и для внутреннего дива .forum_div {margin: 0 auto;} - все зависит от вложенности и того, что Вы пишите в стилях...

Солярис · 17 марта 2011, 23:28:36

Изменение padding на Ваш вариант ничего не дает. Форум все равно прижимается к левой стороне.

Да и почему он должен сам по себе отцентроваться по середине, если не задан никакой код для его центровки? Ведь задание отступа слева и справа - это не центровка форума.

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

К примеру, если я задам вот такой код.

Код Выделить

<div>
пример
</div>

То браузер его и отобразит с левой стороны (по умолчанию), поскольку не задана центровка.

0daliska · 17 марта 2011, 23:40:25

У меня больше нет слов... padding: 0 auto; и margin: 0 auto и есть центровка

Проще тыкнуть носом...
http://www.ef-tsu.ru/indexer.html
Код странички:

Код Выделить

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <title>Центровка</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
body {
padding: 0 auto;
background-color: #E5E5E8;
}
.forum_div
{
	background: #ffffff;
    min-width:1024px;
    max-width: 1400px;
	margin: 0 auto;
}
  </style>

 </head>
 <body>
<div class="forum_div">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper 
  suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
 </body>
</html>

В чем я была не права, в том,что для боди отступы плавающие задавала исключительно, а правильнее было для вложенного дива акцент делать...
Результат на скрине...

Солярис · 18 марта 2011, 00:12:23

Это конечно же замечательно, что Вы привели обычную страницу с этим кодом, но, как видите, с кодом форума это не работает.

Только что СПЕЦИАЛЬНО установил на локалке заново тестовый форум версии 1.1.13 (с нуля). Следовательно, код форума девственно чистый изначально.
Вставил Ваш пример с кодом и... НИЧЕГО, форум точно также прижимается к левой стороне браузера и не центрируется.

Вы забываете, что кроме вставляемого нами кода в форуме предостаточно еще другого кода и, следовательно, нашего с Вами кода недостаточно для отображения форума посередине.

А с кодом на html и у меня все замечательно центрируется, но не с кодом форума.

0daliska · 18 марта 2011, 00:19:49

Цитата: Солярис от 18 марта 2011, 00:12:23
Это конечно же замечательно, что Вы привели обычную страницу с этим кодом, но, как видите, с кодом форума это не работает.

Только что СПЕЦИАЛЬНО установил на локалке заново тестовый форум (с нуля). Следовательно, код форума девственно чистый изначально.
Вставил Ваш пример с кодом и... НИЧЕГО, форум точно также прижимается к левой стороне браузера и не центрируется.

Вы забываете, что кроме вставляемого нами кода в форуме предостаточно еще другого кода и, следовательно, нашего с Вами кода недостаточно для отображения форума посередине.

А с кодом на html и у меня все замечательно центрируется, но не с кодом форума.

Если Вы зайдете на мой форум, то воочию можете убедиться, что работает и на форуме...
Если у Вас не получается, то это еще не показатель, что не работает...
Незакрытый див может портить все, либо див, закрытый не там, где полагается... Валидность Вашего форума в порядке?
Извините, разговор идет сейчас не о чем... Вам показали как работает центрирование,, Вы можете убедиться, что и на SMF это прекрасно работает... А то, что Вы это не в состоянии реализовать - причин может быть масса..
Разбирайтесь, каковы причины сами, раз показать не можете

Солярис · 18 марта 2011, 00:22:12

Стоп, стоп...пока я печатал свой ответ, Вы что-то в коде изменили, не так ли?!

Вот сейчас пробую и ВОТ ТОЛЬКО ТЕПЕРЬ РАБОТАЕТ.

0daliska · 18 марта 2011, 00:25:08

Цитата: Солярис от 18 марта 2011, 00:22:12
Стоп, стоп...пока я печатал свой ответ, Вы что-то в коде изменили, не так ли?!

Вот сейчас пробую и ВОТ ТОЛЬКО ТЕПЕРЬ РАБОТАЕТ.

В коде странички я не меняла, я дописала про свою ошибку, и приложила рисунок... Более ничего не меняла... Возможно, Ваш браузер кэширует css...

Солярис · 18 марта 2011, 00:30:58

Цитата: 0daliska от 18 марта 2011, 00:25:08
В коде странички я не меняла, я дописала про свою ошибку, и приложила рисунок... Более ничего не меняла... Возможно, Ваш браузер кэширует css...

Какой-то код был все же был не тот, поскольку именно самый последний Ваш пример стал РАБОЧИМ. Поскольку я не спец. в коде, я всегда стараюсь делать так, как мне советуют знающие люди.

Главное, что в конце концов вопрос оказался решенным. Спасибо за внимание и терпение.

0daliska · 18 марта 2011, 00:37:11

Цитата: Солярис от 18 марта 2011, 00:30:58
Какой-то код был все же был не тот, поскольку именно самый последний Ваш пример стал РАБОЧИМ. Поскольку я не спец. в коде, я всегда стараюсь делать так, как мне советуют знающие люди.

Главное, что в конце концов вопрос оказался решенным. Спасибо за внимание и терпение.

помогло отцентрировать еще из этого ответа:

Цитата: 0daliska от 17 марта 2011, 23:09:23
Хотя, возможно, дополнительно также потребуется еще дополнительно ввести и для внутреннего дива .forum_div {margin: 0 auto;} - все зависит от вложенности и того, что Вы пишите в стилях...

именно об этом я и добавила коментарий, когда вносила изменения:

Цитата: 0daliska от 17 марта 2011, 23:40:25
...
В чем я была не права, в том,что для боди отступы плавающие задавала исключительно, а правильнее было для вложенного дива акцент делать...
Результат на скрине...

Но сам код странички, приведенный Вам для примера в последнем цитируемом сообщении, полностью остался неизменным, ибо там присутствовал этот параметр изначально, я просто решила, что нужно обратить Ваше внимание на это, поэтому и отредактировала...
Рада, что Вы наконец-то поняли, что полями и отступами можно центрировать блоки

Удачи!

Солярис · 20 мая 2011, 14:13:37

Возвращаюсь к этому вопросу.

Стал изменять ширину по приведенной здесь схеме на рабочем форуме. Так вот, до начала таблицы самого форума (с категориями, разделами и подразделами) ширина изменилась, как и положена. Но далее (ниже по странице) ничего не меняется. Форум все равно продолжает на всю ширину страницы растягиваться.

В чем может быть проблема?!

Заранее спасибо за помощь.

Солярис · 20 мая 2011, 18:00:31

Елки-палки, сделал.
Оказывается, перед // The main content should go here. стоял закрывающий оператор </div>. Вот поэтому весь форум уже и не становился.