- все съезжает

[Finsternis]

Здравствуйте, сделала дизайн, и повылазили проблемы.

Решеный вопрос

Вот так должно выглядеть, и в общем-то выглядит:


Но когда меняешь размер окна все съезжает, та же песня с разрешением экрана.


Как прописать так, чтобы все это меню не съезжало? В настройках стоит что оно "справа". код привожу ниже

body {background-attachment:fixed}
 #wrapper{ background: #ffffff; min-width:970px !important; width: 970px; position: center !important; margin-top: -10px !important; margin-bottom: 0px !important; padding: 0 !important; -webkit-box-shadow: 0px 0px 15px #707172; -moz-box-shadow: 0px 0px 15px #707172; box-shadow: 0px 0px 15px #707172; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; }
 #extratop { background: url('/userdir/1/4/1/5/14155/58323755.png') !important; no-repeat; height:300px; width:970px; margin-top: 0px !important; margin-left: 0px !important; padding-top:0px !important; }
 {------------------------------------------------------- меню горизонтальное-------------------------------------}
 #side {margin-left: 90px !important; position: absolute; top: 00px; width:970px; background: # 0 0 no-repeat; margin-left: 0px !important; text-transform: no; font: 12px Book Antiqua !important; }
 #postsCalendar {position: absolute; top: 80px; right: 200px; width: 131px; height: 80px; background: # 0 -50px no-repeat; padding: 130px 0 0 0px !important; text-align: center;}
 #tagslistlink {position: absolute; top: 80px; right:-30px; width: 150px; height: 80px; background: # 0 -50px no-repeat; padding: 130px 60px 0 35px !important; text-align: center;}
 #TagsList{ width: 150px; font-size:80% !important; font-weight: normal !important; font-size: 8px !important; margin: 0px 0px 0 -5px !important; padding-bottom: 1px !important; text-transform:none; text-align:left; background: #ffffff; -webkit-box-shadow: 0px 0px 5px #707172; -moz-box-shadow: 0px 0px 5px #707172; box-shadow: 0px 0px 5px #969696; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; opacity:.90 !important; filter: alpha(opacity=90); -moz-opacity: 0.90;}
 #tagslistlink a, #postsCalendar a, #addToFav a, #delFromFav a, #writeToAuthor a, #subscribeEmail a, #unsubscribeEmail a {color: #91735E !important; font-weight: bold !important;}
 #tagslistlink a:hover, #postsCalendar a:hover, #addToFav a:hover, #delFromFav a:hover, #writeToAuthor a:hover, #subscribeEmail a:hover, #unsubscribeEmail a:hover {color: #03578E !important;}
 #addToFav, #delFromFav {position: absolute; top: 80px; left: 440px; width: 181px; height: 80px; background: # 0 -50px no-repeat; padding: 130px 0 0 0px !important; text-align: center; }
 #writeToAuthor {position: absolute; top: 80px; left: 240px; width: 190px; height: 80px; background: # 0 -50px no-repeat; padding: 130px 60px 0px 15px !important; text-align: center;}
 #writeToAuthor {word-wrap: break-word; }
 #subscribeEmail, #unsubscribeEmail {display: none; }
 #side h1 A { position: absolute; top: 165px; left: 500px; font: bold 32px Book Antiqua !important; width: 470px; color: #0E5F95 !important; opacity:.50 !important; filter: alpha(opacity=50); -moz-opacity: 0.50;}
 #side h1 a:active, #side h1 a:hover { position: absolute; top: 165px; left: 500px; font: bold 32px Book Antiqua !important; width: 470px; color: #0E5F95 !important;opacity:.70 !important; filter: alpha(opacity=70); -moz-opacity: 0.70; }
 #authorName { position: absolute; top: 100px; left: 810px; font: bold 10px Book Antiqua !important; width: 170px; color: #0E5F95 !important;opacity:.60 !important; filter: alpha(opacity=60); -moz-opacity: 0.60;}
 #authorName a { position: absolute; top: 100px; left: 810px; font: bold 10px Book Antiqua !important; width: 170px; color: #0E5F95 !important;opacity:.60 !important; filter: alpha(opacity=60); -moz-opacity: 0.60;}
 #authorName a:active, #authorName a:hover { position: absolute; top: 100px; left: 810px; font: bold 10px Book Antiqua !important; width: 170px; color: #0E5F95 !important; opacity:.60 !important; filter: alpha(opacity=60); -moz-opacity: 0.60;}
 {------------------------------------------------------- меню вертикальное -------------------------------------}
 .menuSection { margin-left: 5px !important; width:231px; }
 #myDiaryLinks { margin-left: 90px !important; margin-top: -10px !important;}
 #myDiaryLink, #writeThisDiary, #myDraftLink, #umailLink, #myFavLink, #myQuotLink, #discussionLink, #myLinksLink, #myProfileLink, #optionsLink { border-bottom: 0px solid #000; width:170px !important; text-align: left; padding: 0px !important; }
 #globalLinks { margin-left: 90px !important; margin-top: -10px !important;}
 #mainpageLink, #myCommunitiesLink, #myCommunityLink, #iAmQuit { border-bottom: 0px solid #000; width:170px !important; text-align: left; padding: 0px !important;}
 #Stats { border-bottom: 0px solid #000; width: 160px !important; text-align: right; padding: 0px !important; margin-left: 0px !important; margin-top: 0px !important;}
 #thisDiaryPhoto, #favListLink, #pchListLink, #photolibLink, #albumLink, #myNotepadLink, #upInChart, #YaSearch, #authorFav, #authorQuot, #authorLiks, #authorAlbum, #authorRSS, #rssLink, #login_form, #lastComments, #pchs, #headlineList, #allDiaryLink, #faqLink, #communityCatalogueLink, #randomDiaryLink, #diarySpiritLink, #diarySupportLink, #paySupportLink {display: none; }
 #thisDiaryInfo { position: absolute; top: 50px; left: -6px; margin-left: 0px !important; width:361px; height: 60px; text-align: left; background: # no-repeat;}
 {------------------------------------------------------- персональные ссылки-------------------------------------}
 #myLinks { position:absolute; top: 0px; right: 60px; width: 570px; font: bold }
 #all_links {display:none!important}
 #myLinks li:nth-child(2) a { position:absolute; top: 0px; right: 0px;font: bold !important;}
 #myLinks li:nth-child(3) a { position:absolute; top: 0px; right: 130px; font: bold !important;}
 #myLinks li:nth-child(4) a { position:absolute; top: 0px; right: 230px; font: bold !important;}
 #myLinks li:nth-child(5) a { position:absolute; top: 0px; right: 380px; font: bold !important;}
 #myLinks li:nth-child(6) a { position:absolute; top: 0px; right: 530px; font: bold !important;}
 {------------------------------------------------------- записи и каменты -------------------------------------}
 #page-c{ background: #; width: 970px; margin: -50px 23px 20px 0px !important; border: 0px solid #dad9de; }
 #sortOrder {display:none!important}
 #page-t { margin: 0px 0 0 0px !important; background: # 970px 0 no-repeat; padding-left: 10px !important;}
 #postsArea { padding-top: 5px !important; }
 .singlePost {margin: 0px 15px 20px 0 !important; background: #; -webkit-box-shadow: 0px 0px 10px #C3A88D; -moz-box-shadow: 0px 0px 10px #C3A88D; box-shadow: 0px 0px 10px #C3A88D; padding: 30px 30px 30px 30px !important; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; }
 .countFirst { background: url('/userdir/1/4/1/5/14155/58325681.png') no-repeat bottom right; !important; border-bottom: dotted; border-width: 0px; border-bottom-color: #D2FF8E;}
 .countSecond { background: url('/userdir/1/4/1/5/14155/58326029.png') no-repeat bottom right; !important; border-bottom: dotted; border-width: 0px; border-bottom-color: #D2FF8E;}
 #commentsArea, #addCommentArea {margin: 0 25px 20px 10px !important; background: #;; -webkit-box-shadow: 0px 0px 10px #C3A88D; -moz-box-shadow: 0px 0px 10px #C3A88D; box-shadow: 0px 0px 10px #C3A88D; padding: 20px 30px 20px 30px !important; -webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
 {------------------------------------------------------- заголовки -------------------------------------}
 .postDate { text-align: center; margin: 0 0 0px 0 !important; border-bottom: 0px solid #000; font-variant: small-caps !important; }
 .postTitle {background: url('/userdir/1/4/1/5/14155/58325810.png') no-repeat !important; margin-top: 0px !important; background: # 0 0 no-repeat; padding: 10px 0 20px 60px !important;}
 .postLinksBackg {padding: 00px 130px 0px 0px !important;}
 .header span {}
 .header h2 { }
 .postActionLinks {}
 #commentsArea .postTitle {background: none !important; padding: 0 !important;}
 #addCommentArea_title {margin-top: 0px !important; background: # 0 0 no-repeat; padding: 10px 0 20px 50px !important;}
 #commentsArea_title, #new_post_title, .calHeader {text-align: center; margin: 10px 0 20px 0 !important; border-bottom: 0px solid #000; font-variant: small-caps !important; }
 .calHeader {width: 550px;}
 .avatar img { width:100px !important; min-width: 100px !important; max-width: 100px !important; -webkit-box-shadow: 0px 0px 10px #a1a1a1; -moz-box-shadow: 0px 0px 10px #a1a1a1; box-shadow: 0px 0px 10px #a1a1a1; border: 1px solid #dad9de;}
 textarea#message, .htmlbox textarea, input.text, #trspisok textarea, #close_text {background: #f2f4f8;}
 span.quote_text { font: italic 16px Book Antiqua !important; display: block; padding: 5px 5px 5px 10px; border-left: 3px double #000; margin-left: 10px !important;}
 a:link, a:visited {text-decoration:none !important; color: #91735E !important;}
 a:hover, a:active {color: #03578E !important;}

еще один решеный вопрос

В процессе размышления, чего бы туда еще приляпать, возникла идея запихать эпиграф поверх экстратопа, но возникла проблема: он обводится точно так же, как каждый отдельный пост, при чем в два слоя, а этого как бы не очень хочется. Отсюда вопрос, как сделать чтобы он не обводился:
От одной рамки я избавилась, а вторая не знаю откуда и как ее убрать...
Код части с эпиграфом

#epigraph.singlePost  {color: #ffffff !important; opacity:1 !important; filter: alpha(opacity=100); -moz-opacity: 1.0; -webkit-box-shadow: 0px 0px 0px #C3A88D; -moz-box-shadow: 0px 0px 0px #C3A88D; box-shadow: 0px 0px 0px #C3A88D; padding: 0px 0px 0px 0px !important; -webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;  }

И еще вопрос, можно ли прописать чтобы везде первая заглавная буква была особенная, а в эпиграфе обычная?
Заранее спасибо

Решение проблемы, если кому нужно:

 #epigraph.singlePost { position: absolute; top: 60px; left:740px; width: 350px; height: 40px; color: #ffffff !important; opacity:.6 !important; filter: alpha(opacity=60); -moz-opacity: .6; -webkit-box-shadow: 0px 0px 0px #C3A88D; -moz-box-shadow: 0px 0px 0px #C3A88D; box-shadow: 0px 0px 0px #C3A88D; padding: 0px 0px 0px 0px !important; -webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px; margin: 0px 0px 0 0px !important; }
 #epigraph .postTitle {display: none;}
 #epigraph .paragraph div:first-letter{ font-size: 15px; float: none !important; font-family:Verdana; font-weight: bold; color: #0A5587; line-height:100% !important; line-height:120%; }

Тут возник еще один вопрос, как сделать так, чтобы эпиграф отображался на всех страницах (каменты, избранное и т д) а не только на самом дневнике

запись создана: 30.07.2010 в 00:22

@темы: меню, эпиграф

Comments

[жид-медведь]

я вообще не против, когда у меня дизы берут и меняют, за исключением тех, что я делаю на заказ для определенного человека, кхм... >.<

Как прописать так, чтобы все это меню не съезжало? В настройках стоит что оно "справа". код привожу ниже

в оригинальном варианте оно слева. ничего никуда не съезжало.

[жид-медведь]

Я это собирала по кусочкам что откуда

угу, мне сначала это очень напомнило другой диз, я начала читать код и несколько удивилась...
алсо, у вас почему-то жутко тормозит страница при прокрутке. и ник с названием днева неактивные. ~_~

[Finsternis]

жид-медведь Я по частям собирала, что где, возможно, и Ваше попалось, спасибо.

Спасибо большое за совет, ничего никуда не едет.

[Finsternis]

, у вас почему-то жутко тормозит страница при прокрутке. и ник с названием днева неактивные. ~_~

Странно, потому что у меня ничего вообще не тормозит и все активное. Браузер?

[жид-медведь]

фуррифокс 3.6.8
в хроме с прокруткой все ок, но в обоих браузерах названия в шапке неактивны.

[Finsternis]

жид-медведь Очень странно, в опере все прекрасно, сейчас посмотрела в Файерфоксе тоже.

[Melanger]

Некоторые браузеры тормозят из-за css3. Иногда, при этом, имеет значение мощность компа.

[Finsternis]

Senteplex Понятно... спасибо за ликбез.

[MysteryLove]

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

Попробуйте убрать рамку у #post0

можно ли прописать чтобы везде первая заглавная буква была особенная, а в эпиграфе обычная?

Пропишите заглавную букву для .countFirst и .countSecond или пропишите заглавную букву (для всего), а потом отдельно для эпиграфа.

[Finsternis]

MysteryLove А как писать заглавную букву только для эпиграфа? как называется селектор?

Спасибо, сейчас попробую.

[MysteryLove]

Finsternis Селектор будет такой #epigraph .paragraph div:first-letter

[Finsternis]

MysteryLove О... супер, получилось. И еще вопрос, у меня у заголовка поста прописан фон и в эпиграфе он тоже вылазит, а не нужен.
Как прописать что его там быть не должно?

[MysteryLove]

Finsternis
#post0 .postTitle {background-image: none !important; }

[Finsternis]

MysteryLove Все получилось, я вообще там убрала заголовок и все получилось. спасибо!

[Aloria]

Тут возник еще один вопрос, как сделать так, чтобы эпиграф отображался на всех страницах (каменты, избранное и т д) а не только на самом дневнике

Никак.

[Finsternis]

Aloria Эх... а жаль.

[Aloria]

Finsternis, это не CSS, а HTML. Проще говоря, для того, чтоб это сделать, надо вносить изменение в код страницы, а возможно, еще и в програмную часть кода (для опционального выбора - отображать на всех страницах или только на первой).
С помощью CSS можно убрать видимые на странице элементы или изменить их оформление, но не добавить новые, которые отсутствуют в верстке.

[Finsternis]

Aloria Ну я вкурсе что к чему, но вдруг они там есть но их спрятали)))

[Melanger]

А еще, Finsternis, у тебя в шапке много перекрывающих друг друга блоков.
В моих хроме и мозилле тоже часть ссылок и название дневника не нажимаются.
Если захочешь устранить, то это можно, дописав:
#myDiaryLinks position:relative;
#side h1 a - z-index:1;

Кроссбраузерная верстка - штука хитрая.

[Finsternis]

Senteplex Спасибо большое.