[Eilianta]

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

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

 #thisDiaryPhoto {background: url('/userdir/1/8/2/2/1822873/57325568.png') no-repeat !important; height:179px; width:135px; top:70px; left:940px; margin-left: 10px ;position: fixed !important;}
 #writeToAuthor {top:172px; left:950px; position: fixed !important; color: #e7faff !important; font-size: 12px; font-family:Georgia; font-weight: bold !important; }
 #mainpageLink {top:192px; left:955px; position: fixed !important; color: #e7faff !important; font-size: 12px; font-family:Georgia; font-weight: bold !important; }
 #myDiaryLink { top:212px; left:960px; position: fixed !important; color: #b8d8b5 !important; font-size: 16px; 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:1000px; 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:470px; width:800px; margin-left:0px; margin-top: 0px; }
 #extrabottom {background: url('/userdir/1/8/2/2/1822873/57323747.png') no-repeat; width:800px; height: 117px; margin-left:0px; margin-top: 0px; }
 .postInner a {text-decoration:none;}
 .atTag SPAN {display:block; width:14px; height:19px; line-height:500px; float:left; overflow:hidden; background: url('/userdir/1/8/2/2/1822873/57326123.png') 0px 0px no-repeat; margin-left:7px;}
 .atMusic SPAN {display:block; width:14px; height:19px; line-height:500px; float:left; overflow:hidden; background: url('/userdir/1/8/2/2/1822873/57326210.png') 0px 0px no-repeat; margin-left:7px;}
 .atMood SPAN {display:block; width:14px; height:19px; line-height:500px; float:left; overflow:hidden; background: url('/userdir/1/8/2/2/1822873/57326216.png') 0px 0px no-repeat; margin-left:7px;}
 .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:179px; width:135px; top:70px; left:940px; margin-left: 10px ;position: fixed !important;}
 #writeToAuthor {top:172px; left:950px; position: fixed !important; color: #e7faff !important; font-size: 12px; font-family:Georgia; font-weight: bold !important; }
 #mainpageLink {top:192px; left:955px; position: fixed !important; color: #e7faff !important; font-size: 12px; font-family:Georgia; font-weight: bold !important; }
 #myDiaryLink { top:212px; left:960px; position: fixed !important; color: #b8d8b5 !important; font-size: 16px; font-family:Georgia; font-weight: bold !important; }
 #side h1 a {display: block; overflow:hidden; height:40px; line-height:700px; width:317px; top:420px; left:250px; position: absolute; background: url('/userdir/1/8/2/2/1822873/57324026.png') no-repeat !important;}
 #authorName {display: block; overflow:hidden; height:67px; line-height:586px; width:200px; top:10px; left:930px; 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: 16px; height: 16px;background: url('/userdir/1/8/2/2/1822873/57326525.png') no-repeat; display:block; overflow:hidden !important;}
 li.delPostLink {width: 16px; height: 16px;margin-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: 20px; padding-bottom: 3px !important;}
 #epigraph, #post0 {background: none !important;}
 .urlLink a {padding-left: 20px !important;}
 .postLinks {padding-right: 20px;}
 .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):


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

@темы: меню, отступы

Comments

[Aloria]

Не по теме: проставьте еще #authorLiks {display: none; }
Вылезает ссылка при подключенном платном сервисе, оооочень некрасиво вылезает.

Что касается вашей проблемы: #wrapper у вас выстроен по центру с помощью автоматических марджинов. Блок же thisDiaryPhoto жестко зафиксирован на одном месте. Поэтому, когда меняется разрешение экрана, он просто улетает в сторону.
Я вижу два выхода:
1. Забить на центрирование дизайна во всех разрешениях. Сделать его центрированным только при одном разрешении экрана с помощью фиксированного margin-left. Тогда он при всех разрешениях будет находиться на одном расстоянии от левой стороны экрана: при 1280 будет в центре, при бОльшем разрешении - слева, при мЕньшем - уйдет в правую сторону.
2. Попробовать проставить для #wrapper min-width и max-width. Может быть, поможет.

[Eilianta]

Aloria

Не по теме: проставьте еще #authorLiks {display: none; }
Спасибо, не подумала)

Что касается вашей проблемы

Кажется, знаю решение проблемы... возникла мысля, попробуй, посмотрим...

[Aloria]

Itory, если решите, то потом напишите, как именно. Я редко работаю с фиксированными элементами, поэтому сходу не могу сказать, как это решается, надо бы посидеть и подумать, а некогда...

[MysteryLove]

Как вариант: убрать из кода этих ссылок left и отпозиционировать ссылки с помощью margin-left или margin-right.
Например для фото код будет так:
#thisDiaryPhoto {background:url("secure.diary.ru/userdir/1/8/2/2/1822873/5732556...") no-repeat scroll 0 0 transparent !important; height:179px; margin-left:30px !important; position:fixed !important; top:70px; width:135px; }

[Melanger]

Itory
Ну и месево

Если конкретно по вопросу, то убери с #thisDiaryPhoto свойства top и left - тогда "панелька" зафиксируется и будет связана с контентом при смене расширений.
А дальше уже играйся с .bordered, чтобы правильно спозиционировать.

[Eilianta]

Aloria MysteryLove Senteplex
Спасибо, сейчас все попробую и выложу результат ^^

Ну и месево

Знаю много раз код переделывался по кускам