[roscoe]

дизайнер из меня тот ещё ломанный лобастер, но пусть. название и имя автора съезжается в зависимости от разрешения экрана \как его прикрепить я не знаю, а если и знаю то надо менять расстояния и место меню, что в плане дизайне меня не устраивало\ вот. можно обойтись без него, можно заменить собственной картинкой, а можно просто изменить разрешения самому - top: (в зависимости как у вас уедет, ( и что самому не забыть, ололо)) в #side h1 a и #authorName.

оформление

body { color:#929299; background-color:#2c2c30; font-family: Courier New; font-size: 12px; line-height:12px; background-attachment: fixed; }
#side h1 a { position: absolute ; left:150px !important; text-transform: uppercase; font-family: Impact; font-size:25px; color:#e231bf; text-shadow: 0px -1px 0px #9b1690; width: 700px; top: -455px ; }
 #authorName { position: absolute; left: 1110px;font-family: Impact; font-size:20px; color:#e231bf; text-shadow: 0px -1px 0px #9b1690; top: -455px ; }
 .countFirst .postDate, .countSecond .postDate { margin-top:0px; text-transform: uppercase; color:#a01194; text-shadow: 0px 0px 1px #b118a4; font-size: 16px; width: 280px; height: 0px; margin-left: 366px; letter-spacing: -1px; word-spacing: -6px; }
 #wrapper{position:relative !important;}
 #page-t {width:700px !important;margin-left: 226px !important; margin-top: 58px !Important; }
 .singlePost, .singleComment { position: relative; width:710px !important; background-color:#403f45; margin-bottom: 27px !important; border-radius: 3px 3px; border: 1px solid #313135;}
 .postContent{ padding: 14px; margin-top: -24px !Important;}
 #epigraph {position:fixed; left: 0px; font-family: ; font-size:12px; color:#929299; z-index: 2;}
 #epigraph .singlePost {width: 200px!important; margin-top: -44% !important; background: none;}
 #page-t #epigraph {width: 190px!important; background: none; border: none;}
 #add_block1 {position:fixed; left:0%; height:100%; background:#151517; width: 200px !important; top: 0px; z-index: 1;}
 #add_block2{background: url('ДОПОЛНИТЕЛЬНЫЙ БЛОК') 1px 0px no-repeat; position:fixed; top:50px; margin-left:965px; width:233px; height:260px; border:6px solid #450954; border-radius: 0px 0px 200px 200px; opacity:.5;-webkit-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease; }
 #add_block2:hover {opacity:.9; -moz-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
 #add_block3 {position:fixed; width: 100%; height:40px; padding:5px; top:-5px; border-radius: 14px; margin-left: 218px; background-color:#212124; border-bottom:10px solid #450954;}
 #postsCalendar, #rssLink, #upInChart , #thisDiaryLinks_title, #authorFav , #authorQuot , #authorLinks, #authorAlbum , #joinThisCommunity , #writeThisCommunity , #communityDraftLink , #communityMyPosts, #communityFav , #communityQuote , #communityAlbum #leaveThisCommunity , #headlineList , #myNotepadLink , #myQuotLink , #myLinksLink, #myProfileLink, #albumLink, #photolibLink, #allDiaryLink , #globalLinks_title , #favListLink , #pchListLink , #communityCatalogueLink , #myCommunitiesLink , #myCommunityLink , #randomDiaryLink , #diarySpiritLink , #diarySupportLink, #faqLink , #lastComments, #pchs, #myLinks , #Stats, #iAmQuit, #YaSearch, #thisDiaryPhoto, #iAmQuit, #TagsList, .atTag span, .atMusic, .atMusic span, .atMood, .atMood span, .order_button, .prevnext, .prevPostLink, .nextPostLink, #from_form, .opac6, #commentsArea_title, .urlLink, #JournalDraft .sign, #addCommentArea_title, #new_post_title, .Attention {display:none !important;}
 a { color:#6b7094; text-decoration:none !important; border: none !importan; -webkit-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease;}
 a:hover { color:#929299;-moz-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }
 #side{width:224px; position: fixed; color: transparent;}
 #side {left:-16px; z-index: 2; width: 200px; bottom: 5%;}
 .header span { position:absolute; margin-top:-11px; text-transform: uppercase; color:#a01194;text-shadow: 0px 0px 1px #b118a4; font-size: 16px; width: 660px; margin-left: 50px; letter-spacing: -1px; }
 .header h2 { position:absolute; margin-top:-11px; text-transform: uppercase; color:#a01194; text-shadow: 0px 0px 1px #b118a4; font-size: 16px; width: 360px; margin-left: 100px; letter-spacing: -1px;}
 .postTitle { margin-top: 10px !Important; }
 .header {background: url('РАЗДЕЛИТЕЛЬ') 0px 100% no-repeat; }
 #epigraph .postActionLinks, #epigraph .postLinksBackg {display:none !important;}
 .editPostLink a{ position:absolute; padding: 0px 0px 0px 2px !important; -moz-opacity:.10 !important;opacity:.10 !important; filter:alpha(opacity=10);}
 .delPostLink a { position:absolute; padding: 13px 0px 0px 5px !important; -moz-opacity:.10 !important;opacity:.10 !important; filter:alpha(opacity=10);}
 .upPostLink a { position:absolute; padding: 27px 0px 0px 4px !important; -moz-opacity:.10 !important;opacity:.10 !important; filter:alpha(opacity=10);}
 .postActionLinks a:hover {-moz-opacity:.90 !important;opacity:.90 !important; filter:alpha(opacity=90);}
 #thisDiaryOwner {margin-bottom: -19px !Important;}
 #mainpageLink {margin-top: -19px !Important;}
 .menuSection li { height:26px !important; width: 200px; background-color: #1c1c1f; -moz-transition: all 1s ease; -webkit-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}
 .menuSection li:hover { background-color:#e231bf; -moz-transition: all 0.2s ease; -webkit-transition: all 0.1s ease; -o-transition: all 0.1s ease; transition: all 0.1s ease; }
 .menuSection a { position: absolute; text-transform:uppercase; font-size: 11px; color:#39393e; letter-spacing:1px; margin-left: 13px; margin-top: 6px; }
 .count_box a {margin-left: 75px;}
 .menuSection a:hover {color:#ee84e5;}
 .postLinksBackg {opacity: 1; float: right; margin-top: -15px; height:15px !important; background-color: #232326; width:210px; border-radius: 100px 0px 0px 0px; -webkit-transition: all 0.9s ease;-moz-transition: all 0.9s ease;-o-transition: all 0.9s ease; }
 .postLinksBackg:hover {opacity:90; height:15px !important; margin-top: -15px; width:434px; -webkit-transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; -ms-transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out; }
 .postLinksBackg a {color: #2c2c30; text-decoration:none; text-transform:uppercase; font-size:10px; letter-spacing:1px; word-spacing: -6px; }
 .postLinksBackg a:hover {opacity:90; color:#a01194;-webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; }
 .postLinks a, .comments_count_link { color:#2c2c30; }
 .comments a {font-size:13px; }
 .comments_count_link a{ color:#a01194; font-size:13px;}
 .atTag {margin: -10px 0px -5px 0px; color:#39393e;}
 .atTag a {color:#636472; color:#39393e; font-family: Palatino Linotype; font-size:13px;font-weight: bold; -webkit-transition: opacity 0.5s linear;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;}
 .atTag a:hover {margin-left:10px; color:#a01194;text-shadow: 0px 0px 1px #b118a4;}
 .paragraph img {background-color: rgb(255,255,255); max-width:360px;}
 img.smile {background:none !important;}
 #message {background-color: rgba(255,255,255,0.5);}
 #cc {background-color:#90ecf5; color:#fff;}
 .offtop { font-size:11px; font-family: Palatino Linotype; font-style: obligue; }
 #pageBar { width:440px; margin-left: 125px; padding: 5px 3px 5px 3px !important; background-color: #232326;-moz-border-radius: 2px; -wenkit-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px;border-radius: 100px 100px 0px 0px; }
 .pages_str {position:absolute; left:50%; margin-left: 95px; color: #2c2c30 !important;; background: none !important; }
 #pageBar a { color: #4d2757; text-decoration: none !important; font-size: 12px; font-style: normal !important; background-color: #232326; padding: 3px 5px 3px 4px !important; -moz-border-radius: 2px; -wenkit-border-radius: 2px; -o-border-radius: 2px; }
 #pageBar a:hover {color: #929299; text-decoration: none !important; font-size: 12px; font-style: normal !important; padding: 5px 5px 6px 5px !important; -moz-border-radius: 2px; -wenkit-border-radius: 2px; -o-border-radius: 2px; background-color: #e231bf ;}
 #pageBar strong {color: #929299; background-color:#e231bf;padding: 4px 4px 3px 4px !important; -moz-border-radius: 2px; -wenkit-border-radius: 2px; -o-border-radius: 2px;}
 #JournalComments .singleComment .quote_text {display: block; margin: 13px; background: #39393e; border-left: 3px solid #232326; padding: 3px;}
 #JournalFavorite .postLinksBackg:hover {opacity:90; height:15px !important; margin-top: -15px; width:545px; -webkit-transition: all 0.9s ease-in-out; -moz-transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; -ms-transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out; }
 #JournalFavorite .postLinksBackg {margin-top: -14px; height:14px !important; }
 #JournalFavorite .postLinksBackg:hover {margin-top: -14px; height:14px !important;}
 #JournalFavorite .singlePost { margin-bottom: 33px !important; }
 #JournalComments .singlePost { margin-bottom: 43px !important; }
 #JournalFavorite .comments_count_link a, .comments_count_link { color:#2c2c30; font-size:13px;}
 .avatar img{ width: 80px; height:80px; border: 9px solid #232326; border-radius: 0px 100px 100px 0px; opacity:.6; -moz-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;}
 .avatar img:hover{ width: 100px; height:100px; opacity:.9; -webkit-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease; }
 .sign { text-align: center; color:#636472; color:#39393e; font-family: Palatino Linotype; font-size: 11px; width: 120px !important; word-wrap: break-word; line-height:7px;}
 #JournalComments .commentAuthor {position:absolute; right:-152px; margin-top: -29px;}
 #JournalComments .authorName { left:682px; width: 80px; margin-top: 18px; position: relative; font:bold; word-wrap: break-word; background-color: transparent !important; border: transparent !important; font-family: cambria;color:#90ecf5; font-size:16px; letter-spacing:-1px; -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); opacity:.4;}
 #JournalComments .postContent{ margin-top: -46px !Important;}
 #JournalFavorite .postContent{ margin-top: 10px !Important;}
 #JournalFavorite #page-t { margin-top: 25px !Important; }
 #JournalFavorite .singlePost{ margin-top:40px !Important;}
 #JournalFavorite .commentAuthor{position: absolute; right:-150px; margin-top: -18px;}
 #JournalFavorite .authorName { left:739px; margin-top: -42px; position: relative; width: 120px; font:bold; word-wrap: break-word; border: transparent !important; font-family: cambria;letter-spacing:0px;line-height:7px; }
 #JournalFavorite .communityName {width: 140px; left:651px; margin-top: 32px; position: relative; font:bold; word-wrap: break-word; background-color: transparent !important; border: transparent !important; font-family: cambria; font-size:13px; letter-spacing:-1px; -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); opacity:.4;}
 #JournalComments .paragraph, #JournalDraft .paragraph, #JournalFavorite .paragraph { margin-left: 0px !important;}
 #JournalComments .editPostLink a{ position:absolute; ; margin-left: -728px !important;}
 #JournalComments .delPostLink a { position:absolute; margin-left: -728px !important;}
 #JournalComments .upPostLink a { position:absolute; margin-left: -728px !important;}
 #JournalFavorite #add_block2, #JournalComments #add_block2 {display:none !important;}
 #JournalComments .singlePost .postLinksBackg {margin-top: -20px; }
 #JournalComments .singlePost .postTitle { margin-top: 16px !Important; }
 #JournalComments .postDate {color:#403f45; text-shadow: 0px 0px 1px #403f45; }

ОФОРМЛЕНИЕ

дизайн - блочный, навигация - слева,
цвет текста - оффтопик - #636472

КАРТИНКИ

дополнительный блок - hostingkartinok.com/show-image.php?id=b8d42d630...
разделитель - hostingkartinok.com/show-image.php?id=eada1d434...

@темы: CSSDesign