17:37 

Тень под аватарами.

Трубчатый Кот
Зверь-чародей
Делаем тень под аватарками как у меня

Не работает в IE.

1. Сохранить эту картинку себе в библиотеку изображений
http://static.diary.ru/userdir/9/3/...20/17429427.png

2. Добавить код
читать дальше

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

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;}

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

13:03 

Доступ к записи ограничен

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

Клуб любителей узкоглазиков

главная