Темы записей, эпиграф, отступы и другое

[SnezhArt]

И снова я. И снова с багажом вопросов. Здравствуйте. ))
Делаю очередной дизайн, и как всегда, в конце не обойтись без помощи.

Сначала баги:
1. Темы записей. Это просто...

решено

картинка

1.1. Как запилить вместо "темы записей" картинку (как обычно на "редактировать пост", "удалить пост" и т.д.)? Я что-то попыталась сделать, но мозг уже все, отказал. тт
1.2. Почему-то список тем не жаждет быть белым цветом, хотя вроде бы прописано?
1.3. Как вытащить темы записей из-под меню? Чтобы никакие пункты меню не налезали сверху.

2. Эпиграф. Мое больное место. ><

решено

картинка

2.1. Внутри эпиграфа оказалась еще какая-то рамочка, которая вырви глаз. Чье это вообще? Куда его засунуть, чтоб невидно было?
2.2. И верхний отступ внутри эпиграфа - тоже вырви глаз. ><

в черновиках та же засада

3. Цитатник.

решено

картинка

В цитатнике почему-то у комментариев нет цифр. Вааай? оО

4. Область подписи и имени.

решено

картинка

4.1. Подпись никак не хочет уходить вправо, под никнейм. >< Как ее заставить это сделать?
4.2. И обнаружилось, что никнейм не работает в качестве ссылки. оО То есть в тот момент, когда мы на него тыкаем при написании комментария, и он появляется в виде обращения к человеку.

5. Отступ синглпоста.

решено

картинка

Я уменьшила отступ между постом и комментариями на стр. комментариев, и там все стало идеально. А вот на главной стр. днева отступы тоже уменьшились. Можно ли их как-то вернуть в прежнее, чуть большее, состояние?

6."Вставить цитату" куда-то убегает или вообще не появляется. С чем это может быть связано? тт

Советы обучающимся

Не баги, но надежда на советы:
7. Можно ли приподнять скобки у комментариев хотя бы на пару пикселей? Только скобки.
8. Каким механизмом можно запилить аватарки в 50px? Так же как в 100?
9. Есть ли какой-нибудь способ никнейм в меню и название днева расположить в центре без плясок надо отступами вправо-влево? Например, что-то вроде - задать text-align и вуаля? Чтобы каждый раз не подправлять отступы со сменой названия дневника или имени.
10. Какой пляской с бубном можно "все темы (кол-во)" сделать под копирку остального списка тем (как-то так: "все темы................128")?

Все решения найдены. Спасибо  Тайя, которая душит романтиков,  Ренос. Отдельное спасибо  Min Young-nim за тщательное объяснение тонких моментов.

@темы: меню, эпиграф, отступы, Дизайн

Comments

[Тайя.]

2. #post0 {border: none ! important;} По-моему, это и в черновиках должно помочь.

[Тайя.]

1. Темы находятся внутри #thisDiaryOwner , поэтому их надо z-индексом вытащить наверх
#thisDiaryOwner {position: relative; z-index: 100 !important;}
#TagsList a {color: #fff;}

Кнопку вставить цитату попробуйте прибить обратно с помощью margin-top: -500px !important

[Ренос]

1.1. Тут я вижу 2 пути:
а) Сделать шрифт прозрачным (color: transparent) и засунуть картинку в background. Но тогда при выделении надпись будет проявляться.
б) расположить блок с картинкой поверх блока с надписью через :after, чтобы банально скрыть текст. Более геморройный вариант.

2.2. Если я правильно понимаю, то "верхний отступ" - это .postTitle. У записей там заголовок и время написания. У эпиграфа же просто пустая строка.

5. Я бы для отступов в комментариях редактировал не .singlePost, а .lastPost. Если я не ошибаюсь, .lastPost только в комментариях и задействован, на главной странице он не используется.

[Ренос]

8. Т.е. надо уменьшить аватарку? Или надо "растянуть" аватарку в 50px до 100px?
9. Через абсолютное позиционирование элемента. Например, так: #thisDiaryPhoto {position: absolute; top: 10%; left: 50%}

[SnezhArt]

Тайя, которая душит романтиков, с эпиграфом на главной у меня наладилось, а вот в черновиках по-прежнему какой-то дикий отступ есть. тт
темы вытащились из-под меню, спасибо! **
"вставить цитату" тоже получилось поставить на место. х))


Ренос,

расположить блок с картинкой поверх блока с надписью через :after, чтобы банально скрыть текст

а не подскажите, плиз, как примерно код должен выглядеть? %)
с отступами получилось. спасибо! **
Т.е. надо уменьшить аватарку?
да-да-да. видела дизайны, где аватарки красиво так уменьшены до 50px ))



а как с 4 вопросом разобраться не подскажите?
и я еще хотела спросить, может тоже знаете. как убрать косяк к в темах записей, когда длинная тема и наезжает на кол-во тем, т.е. укоротить тему с многоточием ("жизнь ретроградного оптимиста" -> "жизнь ретроградного..."). и как можно картинки заставить уменьшаться автоматически до 500 пикс. в ширину? #JournalFavorite img {width: 500px; height: auto;} не помогает, потому что тогда разносит смайлики и значки "редактировать" и т.п. тоже до 500 пикселей. @_@

[Ренос]

а не подскажите, плиз, как примерно код должен выглядеть? %)

#tagslistlink:after {content: ""; position: absolute; top: 10%; left: 10%; height: 100px; width: 100px; background: white}
Блок с надписью можно вынести куда-то за пределы экрана, чтобы он глаза не мозолил, и на его место воткнуть блок (типа того, что выше) с картинкой. Клики по этому блоку будут отрабатываться так же, как и клики по блоку с надписью, т.е. точно так же будет вылезать менюшка.

да-да-да. видела дизайны, где аватарки красиво так уменьшены до 50px ))

#thisDiaryPhoto {max-width: 50px; max-height: 50px}

4.1. Точно так же, как вы имя сдвинули:
.sign {position: relative; left: 150px !important; top: -50px !important;}
4.2. Без понятия почему не работает. Единственное, что в голову приходит - надпись перекрыта сверху каким-то другим прозрачным блоком, поэтому на неё и нажать не удаётся. Попробуйте у ".authorName a" z-index по-больше прописать.

как убрать косяк к в темах записей, когда длинная тема и наезжает на кол-во тем, т.е. укоротить тему с многоточием ("жизнь ретроградного оптимиста" -> "жизнь ретроградного...").

Никак. Через стили можно разве что саму менюшку шире сделать, чтобы всё влезало.

и как можно картинки заставить уменьшаться автоматически до 500 пикс. в ширину?

#JournalFavorite img {max-width: 500px; max-height: auto}
Так попробуйте.

[SnezhArt]

Ренос, сейчас попробую поколдовать с темами ))

#thisDiaryPhoto {max-width: 50px; max-height: 50px}

значит также как и в 100 делается. спасибо ))

Точно так же, как вы имя сдвинули:

сдвигаю. но тогда подпись пропадает совсем куда-то. ее вообще нет. оО

[Min Young-nim]

SnezhArt,

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

Задаёшь ширину #TagsList ul a и добавляешь overflow: hidden; text-overflow: ellipsis;
Вот и весь фокус-покус.

[Min Young-nim]

#JournalFavorite img {max-width: 500px; max-height: auto}

Лучше уж тогда #JournalFavorite .paragraph img {max-width: 500px; height: auto;}
Чище будет.

[SnezhArt]

Min Young-nim, уменьшение картинок получилось. спасибо!!
а вот

Задаёшь ширину #TagsList ul a и добавляешь overflow: hidden; text-overflow: ellipsis;

проделала и ноль реакции.

[Min Young-nim]

SnezhArt, добавь display: inline-block;, поможет)

[SnezhArt]

Min Young-nim, вааа. помогло. ** ты просто ангел спасения. х)

[Min Young-nim]

SnezhArt, ну дык, я уже очень давно этой штукой пользуюсь)

[SnezhArt]

Min Young-nim, а можно тогда тебя еще помучить вопросами? )

[Min Young-nim]

SnezhArt, смотря какими, можешь попробовать покидать их в умыл)

[SnezhArt]

Min Young-nim, окей )

[Тайя.]

в черновиках по-прежнему какой-то дикий отступ есть

SnezhArt, #JournalDraft .paragraph {margin: 0 !important;}
У вас параграфу задан отступ, надо его перебить именно для черновиков.

У вас вот что еще: Добавить в Избранное и Краткое избранное наложились друг на друга. У вас наверное, отображение "Краткого избранного" отключено и вы его не видите? Отрубите его с помощью #mySFavLink {display: none;}

[SnezhArt]

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

Добавить в Избранное и Краткое избранное наложились друг на друга

ооо. спасибо, что заметили!! у меня и правда оно отключено. ))

[Ренос]

сдвигаю. но тогда подпись пропадает совсем куда-то. ее вообще нет. оО

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

[Min Young-nim]

А чего с подписью-то не так?
Задать ей какой-нибудь display: block, например, ширину, высоту, абсолютное позиционирование и двигай как хочешь. position: relative тут не товарищ. Для наглядности можно временно обвести рамкой. Ещё можно осторожно потыкать родительский блок.

[SnezhArt]

Ренос, я уже выудила. )

Min Young-nim, я как раз сейчас работаю над ней. ))

[Ренос]

Min Young-nim, не помогает ни относительное, ни абсолютное. Там вообще какая-то мистика. Через Инспектор Огнелиса можно увидеть, где этот блок находится. Но сам блок не видно. Я даже смещал его влево почти до края экрана, где только фон от body, так этот блок и там не отображается.

SnezhArt, никак?

[SnezhArt]

Ренос, та же фигня. )) я уже и в одну строку, и ширину, и высоту, дисплей блок, и рамку дала, но да, его видно через firebug, но без него просто невидимка какая-то. х)
у меня скорее всего где-то лажа, просто ее надо отыскать ><

[Min Young-nim]

Ренос, ну, значит, я повелитель всего магического и мистического.
Просто нужно добавить .commentAuthor {overflow: visible;}
Т.к. это родительский блок для .sign, и по умолчанию всё, что выходит за его границы, скрывается.

[SnezhArt]

Min Young-nim,

ну, значит, я повелитель всего магического и мистического.

я вот даже не сомневалась. так что после overflow: visible; шапка-невидимка снялась

[Ренос]

Заработало

Пропишут, блин, по умолчанию кучу всякой фигни, а ты потом сиди, разбирайся...

[Min Young-nim]

Ренос, это не фигня, а необходиомость, некоторыелюдилюбятписатьвоттак, без пробелов. Если не прописать это свойство, то подпись будет перекрывать текст длинных комментариев. Просто нужно подумать, почему блок обрезается, если его ничто не перекрывает. Логика — самая могущественная магия в мире.

[SnezhArt]

Min Young-nim, как ты думаешь, почему страница календаря может вообще не реагировать на изменения? я вроде ничего преступного ей не прописываю, но она не хочет даже бэкграунд делать белым.

[Min Young-nim]

SnezhArt, так вроде ж он белый?

[SnezhArt]

Min Young-nim, все. это похоже мне уже пора спать идти. %) стояла лишняя скобка открытая, я ее забыла удалить, ну и все служебные страницы слетели.