вторник, 13 ноября 2007
13:52

Дизайн фиксированной ширины по центру страницы II

все записи пользователя в сообществе Трубчатый Кот
Зверь-чародей
Интро
Вы все видели код от Tex делающий тоже самое, но он обладает двумя недостатками:
1. Падающее у всех кому не лень меню. Оно, конечно, исправляется, но мало кто осиливает весь мануал от Тех и вопросы про меню появляются с завидной регулярностью.
2. Обрезаемость дизайна при маленьких разрешениях.

Сам Tex хитрый жук :tongue: и использует другой код для центрирования. О нем и расскажу.

Пример для дизайна с меню слева:

.left #wrapper {width: 790px;}
.left #side {width:180px !important; }
.left #page-c {width:600px !important; }
body.left {padding-left: 10px !important;}

body {text-align: center;}
.left #wrapper {text-align: left; margin: 0 auto !important; padding: 0 !important;}
.left #side { margin: 0 !important;}
.left #page-c {overflow: hidden; padding: 0 !important;}
div.paragraph {overflow: auto;}
#page-c div.menuSection {overflow: auto;}



Я не буду оригинален и чтобы избежать путаницы буду использовать обозначения Tex:
Вам надо придумать три значения:

X - ширина блока текста (в примере 600px)
Y - ширина блока меню (в примере 180px)
R - отступ между меню и текстовой зоной (в примере 10px)
потом нужно посчитать (можно на калькуляторе :tongue: ) значение Z
Z=X+Y+R (790px=600px+180px+10px)

и подставить в один(!) из следующих кодов.

Если у вас меню слева:

.left #wrapper { width: Zpx;}
.left #side {width:Ypx !important; }
.left #page-c {width:Xpx !important; }
body.left {padding-left: Rpx !important;}

body {text-align: center;}
.left #wrapper {text-align: left; margin: 0 auto !important; padding: 0 !important;}
.left #side { margin: 0 !important;}
.left #page-c {overflow: hidden; padding: 0 !important;}
div.paragraph {overflow: auto;}
#page-c div.menuSection {overflow: auto;}



Если у вас меню справа:

.right #wrapper {width:Zpx;}
.right #side {width:Ypx !important;}
.right #page-c {width:Xpx !important;}
.right #page-t {margin: 0 !important;}

body {text-align: center;}
.right #wrapper {text-align: left; margin: 0 auto !important; padding: 0 !important;}
.right #side { margin: 0 !important;}
.right #page-c {overflow: hidden; padding: 0 !important;}
div.paragraph {overflow: auto;}
#page-c div.menuSection {overflow: auto;}


@темы: основные блоки

URL
Комментарии
13.11.2007 в 14:07

Трубчатый Кот
Зверь-чародей
- А почему у меня посты со скроллом появляются?
- Потому что в них есть слишком большие картинки.
Есть три варианта решения проблеммы:
1. Убрать большие картинки ))
2. Включить в настройках просмотра отображение всех больших картинок со скроллбаром
3. заменить в коде
div.paragraph {overflow: auto;}
на
div.paragraph {overflow: hidden;}
тогда скроллбар не появится, но картинки будут обрезаться.
4. прописать
div.paragraph img{position:relative; z-index: 3; display: block; zoom:1;}
но за последствия я не ручаюсь ))

- А почему не видно поля "пароль" при "от другого пользователя"
- потому что у вас слишком узкий текстовый блок. Можно уменьшить поля для логина и пароля
.fromAnotherName, .fromAnotherPass {width:020px !important;}

- А что делать с блоком написания комментария?
- Уменьшать, если нужно, до ширины блока записей.
textarea, .javabut{width:Xpx !important; overflow: auto;}
nobr {white-space: normal !important;}


URL
13.11.2007 в 15:38

Рёцке
эм, а генератором кода теперь бесполезно пользоваться?
URL
13.11.2007 в 15:50

Трубчатый Кот
Зверь-чародей
Salivan von Spiera генератор кода генерирует универсальный код с присущими тому коду недостатками, указанными вначале. Этот код - конкретно для центрированного дизайна фиксированной ширины.
URL
13.11.2007 в 15:59

Рёцке
м-да, теперь всё ясно... спасибо)
URL
13.11.2007 в 16:54

с этим кодом при написании комментария меню не будет уезжать вниз?
или это касется только главной страницы дневника/сообщества?..
URL
13.11.2007 в 17:06

Трубчатый Кот
Зверь-чародей
<семантик и герменевтик> я тестировал на ширине 490px - не уезжало ни в каком браузере.
URL
13.11.2007 в 17:10

Dark
я не держу зла. моё зло неудержимо.
фцитатнек на шпаргалку себе и юзерам *)

URL
13.11.2007 в 17:16

Рёцке
тогда спасибо за код! пойду все менять.
URL
13.11.2007 в 18:55

kakrqba
почему как
Рёцке а если у меня дневник слева?
URL
13.11.2007 в 19:13

Трубчатый Кот
Зверь-чародей
[банка] подумайте, что непонятного
1. во фразе "Дизайн фиксированной ширины по центру страницы"
2. в фразах "Если у вас меню справа:" и "Если у вас меню слева:"
и уточните после этого свой вопрос. потому что с такой формулировкой вопроса я могу ответить лишь:
- то у вас дневник слева
поскольку я не понимаю, о чем конкретно вы спрашиваете.
URL
13.11.2007 в 19:15

kakrqba
почему как
Рёцке ну поэтому и спросила, что у вас написано что это только для центра.
в общем, не важно, я нашла решение соей проблемы
URL
13.11.2007 в 19:48

kaya ultraviolence
never say die
Рёцке спасииибо огромное!!)
URL
14.11.2007 в 00:01

Tex
Неисправимый оптимист
На самом деле просто не доходили руки сделать новый генератор, а без него запускать используемый у себя вариант центрования в массы я не хотел.

Генератор кода для создания дневников фиксированной ширины обновлен.
Вторая версия кода более универсальная, более корректная.
Обновленный код успешно прошел обкатку и, по результатам тестирования, полностью совместим со всеми основными броузерами.

Обновленный генератор кода расположен по адресу www.quartex.ru/diary/cssgen

Приглашаю принять участие в бета-тестировании генератора и формируемого кода.
О неточностях и ошибках - сообщать в этой записи.

Подробное описание обновленного CSS на подходе.

URL