Доброго времени суток. При работе с зафиксированным меню (fixed) столкнулась с досадной неприятностью - при смене разрешения на меньшее панелька уползает от экстратопа, но это не так критично, как то, что при более высоком разрешении она накладывается на него.
Работаю сейчас над этим дизайном.

Ссылки у меня прописаны отдельно каждая, наложены на поле аватара (знаю, что не лучший вариант, но их всего три и мне показалось, что так проще)
Кусок кода для меню:

 #thisDiaryPhoto {background: url('/userdir/1/8/2/2/1822873/57325568.png') no-repeat !important; height:179 width:135 top:70 left:940 margin-left: 10px ;position: fixed !important;}
 #writeToAuthor {top:172 left:950 position: fixed !important; color: #e7faff !important; font-size: 12 font-family:Georgia; font-weight: bold !important; }
 #mainpageLink {top:192 left:955 position: fixed !important; color: #e7faff !important; font-size: 12 font-family:Georgia; font-weight: bold !important; }
 #myDiaryLink { top:212 left:960 position: fixed !important; color: #b8d8b5 !important; font-size: 16 font-family:Georgia; font-weight: bold !important; }

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

body {background: url('/userdir/1/8/2/2/1822873/57358190.jpg') repeat; background-attachment: fixed;}
 #wrapper{ min-width:1000px!important;width:1000 margin-left: -50 !important; margin: 0 auto !important; overflow:visible !important; position: relative;}
 #page-c {background: url('/userdir/1/8/2/2/1822873/57323753.png') 0 0 repeat; width:800px !important; padding:0 !important; padding:0 !important; font-family:Georgia; font-size: 14px !important; color: #080808 !important; }
 #page-t {margin:0 !important; }
 #extratop {background: url('/userdir/1/8/2/2/1822873/57358421.png') 0 0 no-repeat; height:470 width:800 margin-left:0 margin-top: 0 }
 #extrabottom {background: url('/userdir/1/8/2/2/1822873/57323747.png') no-repeat; width:800 height: 117 margin-left:0 margin-top: 0 }
 .postInner a {text-decoration:none;}
 .atTag SPAN {display:block; width:14 height:19 line-height:500 float:left; overflow:hidden; background: url('/userdir/1/8/2/2/1822873/57326123.png') 0px 0px no-repeat; margin-left:7}
 .atMusic SPAN {display:block; width:14 height:19 line-height:500 float:left; overflow:hidden; background: url('/userdir/1/8/2/2/1822873/57326210.png') 0px 0px no-repeat; margin-left:7}
 .atMood SPAN {display:block; width:14 height:19 line-height:500 float:left; overflow:hidden; background: url('/userdir/1/8/2/2/1822873/57326216.png') 0px 0px no-repeat; margin-left:7}
 .avatar img {width:100px !important; border: 1px solid #205789 }
 .avatar img {-moz-opacity:.65 !important;opacity:.65 !important; filter:alpha(opacity=50);}
 .avatar img:hover {-moz-opacity:.100 !important;opacity:.80 !important; filter:alpha(opacity=50);}
 #albumLink{display:none}
 #addToFav{display:none}
 #rssLink{display:none}
 #authorQuot{display:none}
 #all_links{display:none}
 #authorAlbum{display:none}
 #postsCalendar{display:none}
 #faqLink{display:none}
 #myLinksLink{display:none}
 #myLinks{display:none}
 #upInChart{display:none}
 #headlineList{display:none}
 #more_login{display:none}
 #paySupportLink{display:none}
 #diarySpiritLink{display:none}
 .quote_post{display:none}
 #myQuotLink{display:none}
 #photolibLink{display:none}
 #allDiaryLink {display:none}
 #pchListLink{display:none}
 #myNotepadLink{display:none}
 #communityCatalogueLink{display:none}
 #myCommunitiesLink {display:none}
 #diarySupportLink{display:none}
 #iAmQuit{display:none}
 #more_login{display:none}
 #photolibLink{display:none}
 #YaSearch{display:none}
 #sortFromBegin {display:none;}
 #sortFromEnd {display:none;}
 #unsubscribeEmail{display:none;}
 #delFromFav{display:none;}
 #tagslistlink {display:none;}
 #subscribeEmail{display:none;}
 #pchs{display:none;}
 #lastComments {display:none;}
 #randomDiaryLink {display:none;}
 #favListLink{display:none;}
 #favListLink{display:none;}
 #myLinksLink{display:none;}
 #authorLinks {display:none;}
 #writeThisDiary {display:none;}
 #myDraftLink {display:none;}
 #umailLink {display:none;}
 #myFavLink {display:none;}
 #discussionLink {display:none;}
 #myProfileLink {display:none;}
 #optionsLink {display:none;}
 #authorFav {display:none;}
 #thisDiaryPhoto {background: url('/userdir/1/8/2/2/1822873/57325568.png') no-repeat !important; height:179 width:135 top:70 left:940 margin-left: 10px ;position: fixed !important;}
 #writeToAuthor {top:172 left:950 position: fixed !important; color: #e7faff !important; font-size: 12 font-family:Georgia; font-weight: bold !important; }
 #mainpageLink {top:192 left:955 position: fixed !important; color: #e7faff !important; font-size: 12 font-family:Georgia; font-weight: bold !important; }
 #myDiaryLink { top:212 left:960 position: fixed !important; color: #b8d8b5 !important; font-size: 16 font-family:Georgia; font-weight: bold !important; }
 #side h1 a {display: block; overflow:hidden; height:40 line-height:700 width:317 top:420 left:250 position: absolute; background: url('/userdir/1/8/2/2/1822873/57324026.png') no-repeat !important;}
 #authorName {display: block; overflow:hidden; height:67 line-height:586 width:200 top:10 left:930 position: fixed !important; background: url('/userdir/1/8/2/2/1822873/57325106.png') no-repeat !important;}
 .postLinksBackg {text-shadow: 3px 3px 3px #fff !important; color: #000000 !important;}
 .urlLink. {text-shadow: 3px 3px 3px #000000 !important; color: #000000 !important;}
 postLinks {text-shadow: 3px 3px 3px #000000 !important; color: #000000 !important;}
 .atTag a:link {color: #52705e !important;}
 .atTag a:hover {color: #000000 !important;}
 .atTag a:visited {color: #52705e !important;}
 a:visited {TEXT-DECORATION: none !important;}
 #epigraph a {color: #000000 !important;}
 li.editPostLink {width: 16 height: 16background: url('/userdir/1/8/2/2/1822873/57326525.png') no-repeat; display:block; overflow:hidden !important;}
 li.delPostLink {width: 16 height: 16margin-top:0;background: url('/userdir/1/8/2/2/1822873/57326531.png') no-repeat; display:block; overflow:hidden !important;}
 .header li img{visibility:hidden}
 .TagL {color: #043807 !important; font-weight: bold !important; font-size: 14px !important;}
 .authorName a {color: #043807 !important; font-weight: bold !important; font-size: 14px !important;}
 .communityName a {color: #043807 !important; font-weight: bold !important; font-size: 14px !important;}
 .LinkMore {color: #52705e !important;}
 .paragraph div {margin-left: 30px !important; margin-right: 20px!important;}
 .header {padding-top: 25px !important;}
 .header h2 {display:block; text-align:center; padding: 2px !important;}
 #epigraph {height:90px}
 .singlePost {background: url('/userdir/1/8/2/2/1822873/57325865.png') no-repeat; background-position:bottom; !important;padding-left: 20 padding-bottom: 3px !important;}
 #epigraph, #post0 {background: none !important;}
 .urlLink a {padding-left: 20px !important;}
 .postLinks {padding-right: 20}
 .header span {padding-left: 20px !important;}
 #pageBar a {text-shadow: 3px 3px 3px #000000 !important;}
 .prevPostLink{display:none !important;}
 .nextPostLink{display:none !important;}
 #EditFavSmileysLink{color: #52705e !important;}
 #change_avatar_box a{color: #52705e !important;}
 .quote_text {color: #000000 !important; text-shadow: 0 0 0.1em #52705e, 0 0 0.1em #52705e, 0 0 0.1em #52705e !important;}
 .postInner a {color: #2f4855 !important; text-shadow: 3px 3px 3px #ffffff !important;}
 a:visited {text-decoration: none !important;}
 a:hover, a:active {color:#d8e8df !important; text-transform: bold;}
 #Journal a {text-decoration: none !important;}

Вот желаемое расстояние от экстатопа и постов (около 20px):

Есть у кого предложения, как переделать? В процентах у меня что-то не получается(

Смотрите также