Много вопросов

[DesignTester2]

Здравствуйте

У меня много вопросов, от простых к сложным.

1. НЕ АКТУАЛЬНО
Вопрос про кнопку редактирования эпиграфа, сейчас она "спряталась" под фон самого эпиграфа. Как сделать так, что бы она отображалась над ним?
Я пробовала прописывать "z-index: 1 !important;", и даже 1000 выставлять пробовала. но, видимо, не правильно понимаю, как оно работает.

#JournalDraft #epigraph { 
display:none !important; 
}

#draft_title { 
display:none !important; 
}

#JournalDraft .list_box { 
display: none !important; 
}

#Journal #post0 { 
margin: 20px !important; 
padding: 20px 0px !important; 
}

#Journal #epigraph { 
margin: 0px 0px 40px 0px !important; 
padding: 0px !important; 
}

 #epigraph .urlLink { 
display:none !important; 
}

#epigraph .Attention { 
display:none !important; 
}

#epigraph .editPostLink { 
position: absolute; 
}

#epigraph .editPostLink { 
top: 20px !important; 
right: 25px !important; 
z-index: 1 !important; 
}

2. РЕШЕНО
Как сделать запятую между метками в цвет фона?

картинка с вопросом

3. РЕШЕНО
Как сделать, чтобы ссылки .urlLink a, .profile a, .diary a, .umail a a отображались только в виде иконок, без надписей? Сейчас у меня получились иконки с надписями в них (розовый мелкий шрифт внутри елочных шариков)

картинка с вопросом

4. РЕШЕНО
Как сделать, чтобы при наведении на эти иконки для .urlLink a, .profile a, .diary a, .umail a всплывала подсказка с подписью - URL, профиль, дневник, U-mail? Это делается как-то через hover, но я нашла только про подсветку другим цветом при наведении и изменение курсора.

Сейчас код для .urlLink a, .profile a, .diary a, .umail a такой (для вопроса 3 и 4)

.urlLink a, .profile a, .diary a, .umail a {
position: absolute !important; 
bottom: 15px; 
display: block; 
width: 24px !important; 
height: 30px !important; 
line-height: 50px !important; 
}

.urlLink a {
background: url('/userdir/3/1/9/9/3199937/80147744.png') 0px 0px no-repeat; 
}

.profile a { 
left: 51px; 
background: url('/userdir/3/1/9/9/3199937/80147746.png') 0px 0px no-repeat; 
}

.diary a {
left: 82px; 
background: url('/userdir/3/1/9/9/3199937/80147747.png') 0px 0px no-repeat; 
}

.umail a {
left: 113px; 
background: url('/userdir/3/1/9/9/3199937/80147748.png') 0px 0px no-repeat; 
}

5.РЕШЕНО
Вопрос про вынесенные кнопки. Получается их двигать только вверх-вниз. Вправо-влево двигать выходит, но тогда кнопка "цепляется" не к краю враппера, а к краю экрана, и в другом разрешении или если изменять масштаб отображения, кнопка отделяется и "парит". Left и right привязывают их к краю экрана, а мне нужно, чтобы эти кнопки были привязаны к краю враппера и выглядели примерно таким образом:

картинка с вопросом

Как выглядит сейчас:

картинка с вопросом

Код для этих кнопок:

#tagslistlink { 
position: absolute; 
top: 147px; 
height: 30px; 
width: 160px; 
text-align: center; 
background: #583a31 !important;
padding-top: 5px !important; 
text-transform: lowercase; 
font: bold 17px Tahoma; 
border: 2px solid #ea97a1; 
z-index: 4 !important;
-webkit-border-radius:10px !important; 
-moz-border-radius:10px !important; 
border-radius:10px; 
}


#tagslistlink a { 
color: #ea97a1 !important;
}

#tagslistlink a { 
color: #ea97a1 !important;
}

#TagsList ul { 
width: 160px !important; 
text-align: left; 
font: normal 13px Tahoma; 
padding: 5px 5px 5px 5px !important; 
margin: 11px 0px 0px -20px !important; 
background: #583a31 !important;
border: 2px solid #ea97a1; 
-webkit-border-radius:10px !important; 
-moz-border-radius:10px !important; 
border-radius:10px; 
}

#YaSearch { 
position: absolute; 
top: 147px; 
height: 30px; 
width: 228px; 
text-align: center; 
background: #583a31 !important;
padding-top: 5px !important; 
text-transform: lowercase; 
font: bold 17px Tahoma; 
border: 2px solid #ea97a1; 
-webkit-border-radius:10px !important; 
-moz-border-radius:10px !important; 
border-radius:10px; 
}

Спасибо заранее!

@темы: меню, diaryCSS

Comments

[Dark Star]

На все я вам сейчас не отвечу, подскажу со вторым пунктом. Сначала прописываете общий цвет текста (который соответствует цвету фона записи) для .atTag em, потом оформляете теги через .atTag em a, указывая для них коричневый цвет текста. Вот оно как у меня:

.atTag em {color: #ececec;}
.atTag em a {text-decoration: none; color: #7e716f; border-bottom-style: none;}
.atTag em a:hover {text-decoration: none; color: #382638; border: none;}

[Тайя.]

1. Да, с z-index что-то не получается... Здесь только один выход - обратно поднять над эпиграфом кнопку.
#epigraph .editPostLink { top: 20px !important; right: 25px !important; }, top: 0 сделать. Она же видна только тем, кто под логином сообщества, остальным не видна, не особо принципиально, где она будет...

2. .atTag {color: #e9e6e7;}

3. .urlLink a, .profile a, .diary a, .umail a {color: transparent !important;}

[Тайя.]

5. А почему бы не сделать через relative? Тогда позицию задаете не от края экрана, а от исходной позиции, проще управлять местоположением.
Примерно вот так: #tagslistlink {position: relative; top: -617px; right: 180px; .....}

[DesignTester2]

Dark Star, Спасибо большое!


Тайя, которая душит романтиков, ну и не страшно, вынесу назад, пусть болтается, все равно его только владелец сообщества видит. Остальное все прекрасно работает.
Спасибо в очередной раз, вы мне так помогаете!

[DesignTester2]

А почему бы не сделать через relative? Тогда позицию задаете не от края экрана, а от исходной позиции, проще управлять местоположением.
Примерно вот так: #tagslistlink {position: relative; top: -617px; right: 180px; .....}

сейчас попробую *_*

[Тайя.]

Всегда пожалуйста)) Самой интересно поковыряться) Вот только с четвертым вопросом не представляю, как сделать, может кто подскажет.

[Тайя.]

А, что-то я туплю, с четвертым вопросом можно сделать же. Так задаем прозрачный цвет ссылок, а при наведении присвоить им цвет, они и будут проявляться.
Коряво если, то так:
.profile a:hover, .urlLink a:hover, .diary a:hover, .umail a:hover {text-decoration: none !important; color: #080808 !important; width: auto !important;}

(Только .urlLink a:hover надо отдельно прописать и задать ему ширину в пикселях, потому что надпись коротенькая и при ширине width: auto часть шарика отъедается).
Можно оформить как-то поинтересней, только подвинуть наверх что-то не получается, пробовала и через позиционирование и марджином, видимо, тут надо задавать высоту самой .postLinksBackg.

[DesignTester2]

Тайя, которая душит романтиков, заработало! я оставила #YaSearch - position: absolute;, так как он тогда почему-то в меню возвращался, а #tagslistlink сделала relative; , все встало на место!
Единственное, когда прописала relative для тэгов, появилась дыра на месте поиска в боковом меню, не вижу связи, но она, похоже есть. С ней можно что-нибудь сделать?

[DesignTester2]

Посмотрела в мозилле и эксплорере - мой блок с тегами уехал вниз, а в хроме на месте, может быть там какой-то невидимый блок?

[DesignTester2]

Или может быть "top" можно прописать отдельно для разных броузеров? как с -webkit-border и -moz-border?

[Тайя.]

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

Ага.

С ней можно что-нибудь сделать?

Отступы еще никого не подводили #rssLink {margin-top: -40px !important} - и все подползет вверх.

блок с тегами уехал вниз

Да, вижу, у меня мозилла. Сейчас, момент, проверю кое-что.

[DesignTester2]

Тайя, которая душит романтиков,

Отступы еще никого не подводили #rssLink {margin-top: -40px !important} - и все подползет вверх.

кекеке ^^

Со ссылками все работает, очень остроумно получилось! Кроме URL, пытаюсь прописать для .postLinksBackg размеры, пока все куда-то уезжает, но я поколдую.

[Тайя.]

DesignTester2, так я и говорю, url делаете отдельно, задаете ему ширину width: 30px и он будет отображаться.

По поводу блока тем. У меня в хроме он тоже съехавший Ладно по горизонтали может туда-сюда ехать, в зависимости от разрешения экрана, но по вертикали-то как может ехать? Отдельно позиционирование нельзя задать для браузеров. Не понимаю, почему он у вас в хроме на месте. У меня была идея, что это из-за предупреждения про +18, в одном браузере он режется аддблоком, в другом нет, из-за этого разница, но нет, не сильную разницу дает это предупреждение. Но все равно дает. У кого-то оно будет, у кого-то нет, из-за этого блок будет туда-сюда ездить, поэтому лучше сразу предупреждение прибейте .advertising {position: absolute;}. Тогда оно не будет влиять на низлежащие блоки.

[DesignTester2]

Тайя, которая душит романтиков, про урл, уже так устала, что плохо соображаю XD сроки горят, не успеваю -_-

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

[DesignTester2]

Тайя, которая душит романтиков, я поняла, это все колдунство! *_*