№670 Not Afraid

[Invisible]

Дизайн относительно простой, зато динамический.
Предупреждаю: есть небольшой баг - горизонтальный скроллбар, он вообще не мешает и ни на что не влияет, просто есть) Я честно пыталась его убрать, но у меня не получилось.

Пример

можно посмотреть "в живую" здесь

Настройки

Дизайн - табличный, меню - слева
Шрифт - Helvetica
заголовок - обычный, 12
текст - обычный, 12

цвета
заголовок - #305160
запись - #13171f
ссылки - #436674
оффтоп - #b1aa9a

цвета фона и границ - все окошки пустые

картинки
ЭКСТРАТОП
i146.photobucket.com/albums/r252/oricontest/des...

ЛЕВЫЙ_КРАЙ
i146.photobucket.com/albums/r252/oricontest/des...

ПРАВЫЙ_КРАЙ
i146.photobucket.com/albums/r252/oricontest/des...

ЭКСТРАБОТТОМ
i146.photobucket.com/albums/r252/oricontest/des...

код (в скобках указанно количество картинок в куске кода)

body{background: #90aca6; padding:0 !important; margin:0 !important;}
 #wrapper{position:relative !important;margin: 0 auto 10 !important; display:block; overflow:visible;}
{-----------------------------ЭКСТРАТОП(3)-----------------------------}
 #extratop{background: url('ЭКСТРАТОП') no-repeat center; height:400px; width:100%; position:relative; display:block; overflow:visible;}
 #add_block1{background: url('ЛЕВЫЙ_КРАЙ') right; position:absolute; right:50%; top:0px; margin-right:511px; height:400px; width:100%; z-index:-1;}
 #add_block2{background: url('ПРАВЫЙ_КРАЙ') left; position:absolute; left:50%; top:0px; margin-left:510px; height:400px; width:28%; z-index:-2; overflow-x: hidden !important;}
{----------------------------ЭКСТРАБОТТОМ(1)------------------------}
 #add_block3{background: url('ЭКСТРАБОТТОМ') repeat-x bottom fixed; width:100%; height:119px; margin-top:-10px; background-attachment:inherit; }
 #side {width:180px; margin-left:5%; text-transform:uppercase; }
 #side a{color:#436674;}
 #side ul li { border-bottom:1px dotted #86a49f; padding:5px 10px; }
 .menuSection_title { background: #fff; display:block; font-size:1.1em; font-weight:bold; height:40px; line-height:43px; padding:0 10px 0 0; margin-left:-30px; text-align:right; color:#4c7275;}
 #page-c { background: #eee6da; width:90%; margin-right:5%;}
 #page-t { position:relative; left:-30px;}
 #YaSearch {display:none !important}
 #albumLink, #faqLink, #myLinksLink, #upInChart, #communityCatalogueLink, #randomDiaryLink, #subscribeEmail, #paySupportLink, #diarySpiritLink, #myNotepadLink {display:none}
 #side ul li b{font-weight: normal;}
 #postsArea .postDate {color:#fff; background: #90aca6; text-transform:uppercase; font-weight:bold !important; font-size:1.1em; font-weight:bold; height:30px; line-height:30px; padding:0 10px 0 0; text-align:right; margin-right:-30px;}
 .postTitle.header h2, .postTitle.header {color:#305160; font:bold 14px "Arial"; text-align:center; padding:10px 0 10px 0;}
 #bottomNav, #topNavLinks, #YaSearch {display: none !important;}
 a:hover,a:active{color: #8caca5!important; text-decoration:none !important; }
 .postDate {text-align:left; text-transform:lowercase;}
 .postLinksBackg {display:block !important; border-top:1px dotted #86a49f; padding:5px 10px;}
 .postLinksBackg {text-align:center;}
 #authorName{font-size: 22px !important; position: absolute; top: 120px; right:50%; margin-right:-470px !important; text-transform:none !important; font-weight:bold; white-space:nowrap;}
 #side h1 A {font-size: 20px !important; position:absolute; top: 100px; right:50%; margin-right:-490px !important; text-transform:none !important; font-weight:bold; white-space:nowrap;}
 

Исходник - капс из клипа Эминема "Not Afraid".
Пожалуйста, ничего не меняйте в коде и дизайне, если берете носить - берите в таком виде, какой он есть.

Comments

[Eilianta]

обалденный дизайн, лучшее, что я видела за последнее время, именно по духу *___*

[Valerie MFM]

очень хороший и красивый дизайн, спасибо)
а скроллбар разве не из-за длинного экстратопа ? или мне только так кажется ? типа, дизайн сделан под все мониторы ?
и да, вопрос, если поставить себе дизайн, то левое меню будет оставаться на одном месте или будет опускаться со страницей ?

[Invisible]

Itory
Оо, не смущайте меня)))) Тут много отличных дизайнов)

именно по духу

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

Takemasa Kujou
Нет, со скроллбаром там такая фигня - "правый край" подогнан точно под конец картинки экстратопа и множится на 25% от экрана влево. Это оптимальное значение, при котором практически на всех разрешениях (кроме 800Х600, но не думаю, что оно у кого-то есть) экстратоп растягивается на всю ширину экрана. Но вылазит вот такой баг, и я сколько пыталась - не получилось его убрать. В идеале я бы просто перекрыла горизонтальный скроллбар кодом, но я такого не нашла((

левое меню будет оставаться на одном месте или будет опускаться со страницей

Не совсем поняла вопрос, но вы можете пройти по ссылке под превью, посмотреть как оно в живую. Меню как в бесплатном дизайне - уезжает наверх.

[~VivaLaVita~]

Просто и лаконично, понравился очень.. надо брать спасибо.. я сразу подумала, что это Эминевское)) да, клип отличный..

[Лира Сирин.]

ооо...
как раз под мою атмосферу сейчас)))
возьму носить)) красиво))

[misspillow]

мне так понравился Оо
с одной стороны такой спокойный, а с другой такой "живой"

Я тоже возьму себе)

[Benj]

И я возьму. Спасибо))

Странно, у меня дизайн нормально встал ==
Спасибо большое автору ))

[Eilianta]

Тут много отличных дизайнов

Отличных - много, а вот чтобы прямо так за душу цепляли, для меня разумеется, - не так уж)

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

[Mir Charime]

обалденно красивый!! потрясающе))) *жаль, что у меня бесплатный*

[Fate]

невероятно красивый дизайн и цвета очень приятные)

[Invisible]

Люди, все кто взяли диз, я поменяла немножко код, теперь этого глюка быть не должно. Поменяйте у себя пожалуйста!

[Mary B.]

Взяла поносить такую красоту.

[polishastik]

Invisible, чтобы убрать код для 2го доп блока используй код. у меня скролл пропал. смотрю на 1280 и на 1024.

#add_block2{background: url('/userdir/1/7/8/5/1785934/57415430.jpg') left; position:absolute; right:0; top:0px; margin-left:510px; height:400px; width:28%; z-index:-2; overflow-x: hidden !important;}

[Invisible]

Mary B.


polishastik
Но тогда получается, что виден стык между картинкой эпиграфа и доп.блоком( По крайней мере на разрешении 1400Х900 и выше

[polishastik]

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

[Invisible]

polishastik
У меня получается даже если уменьшить и еще обрезать - больше 250 кб, я пробовала) Я не совсем олень)))
Конечно можно бы раздробить ее еще на три части и сделать плавны пнг-переходы отдельными картинками - но это уже извращение
Но спасибо за попытку))

[Diz Sheldon]

обожаю такое. и клип действительно красивый.
а идея дизайна потрясающая

[капля новокаина]

вот буквально только что смотрела клип ) возьму носить. очень крутой )

[Invisible]

Diz Sheldon
капля новокаина
Спасибо, рада, что понравилось)

[Joshy]

сразу поняла, что с клипа)) суперский дизайн! жаль, к моему дневу не идет((

[13йен]

шикарный **

Возьму себе, спасибо. Потрясающий дизайн.

[Kie-Lanna]

Очень нравится))

[на глубине]

скажите пожалуйста,как вставлять эти картинки?

[Invisible]

Всем большое спасибо, носите на здоровье

курить
Я не знаю, про какие вы именно картинки, но у меня большое подозрение, что все-все написано в FAQ'е сообщества, нужно только не полениться и поискать

[на глубине]

да я сама разобралась, но из-за глюкнутого браузера комент не удалился.

[Gabrielsen]

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