Верхнее меню, дата записей, кнопки редактирования и "вверх", аватары

[SnezhArt]

Здравствуйте!
Продолжаю осваивать ксс, но баги преследуют везде и всегда. От многих избавилась, но некоторые вогнали мозг в истерику. Помогите, пожалуйста!!

Самое главное - меню! Решила научиться делать верхнее меню. Сделала видимыми все элементы, убрала лишние ссылки, а дальше никак.

решено

багище в меню

То есть, хочется вот так:

как в макете

Чтобы ссылки ровными рядами, на фоне не дневника, а как у блоков записей. Чтобы название днева было над фоном меню. Умом, просканировав соо и коды разные, понимаю, что задается все это как-то шириной что ле. Но каааак? тт___тт
И откуда-то вылезла строка поиска, а я, осел, не могу найти её селектор, чтобы сделать ей none. ><

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

решено

1. Дата записей. Хочется ее, как в макете, вынести над постом, а не в, как она сейчас. Как это можно осуществить?

превью

2. Аватары я запила круглые с тонкой границей, а если делать как в макете, чтобы тонкая граница в некотором отступе непосредственно от изображения аватара то, что можно предпринять?

превью

3. Кнопки редактирования постов сейчас стандартные. Как и ссылки внизу (всяческие юрл, комментировать, подписать, профиль и прочее). Однако хочется красоты с иконками, как было задумано в начале. Как ее добиться? Тут мой мозг решительно сломался.

4.

решено

Хочется сделать кнопочку "вверх" как в макете. Пробовала, но она то обрезалась, то вообще не показывалась. Боль-пичаль, ведь хочется!

Сам код:

.block_design {background: url('/userdir/2/7/0/2/2702809/80853119.png') fixed repeat;}
 #wrapper {min-width:850px!important; width:850px; margin-top: 10px !important; margin-bottom: -8px !important; padding:0 !important;}
 #side h1 a {font: bold 16px Georgia !important; color: #a3a3a3 !important; text-transform: uppercase; text-decoration: none !important; }
 #side h1 a:hover {color: #edccad !important;}
 #thisDiaryInfo, #myNotepadLink, #albumLink, #photolibLink, #myAccountLink, #allDiaryLink, #communityCatalogueLink, #randomDiaryLink, #diarySpiritLink, #diarySupportLink, #faqLink, #lastComments, #more_login, #iAmQuit, #postsCalendar, #rssLink, #upInChart, #authorQuot , #authorLiks, #authorAlbum, #tagslistlink, #thisDiaryLinks, #myDraftLink, #myQuotLink, #myProfileLink, #optionsLink, #favListLink, #pchListLink, #myCommunitiesLink, #globalLinks_title, #myDiaryLinks_title, #thisDiaryOwner_title, #bottomNav, .order_button, .prevnext {display: none !important;}
 #side ul {visibility: visible; display: block;}
 .singlePost, .singleComment {background: #f0f0f0 !important; margin-top: 40px !important; padding: 20px 40px 20px 40px !important; text-decoration: none !important;}
 .postDate {font: bold 12px Verdana !important; color: #edccad !important; padding-bottom: 8px !important;}
 .postTitle span {font: bold 14px Verdana !important; color: #a3a3a3 !important;}
 .postTitle {font: bold 14px Verdana !important; color: #a3a3a3 !important;}
 .paragraph {overflow: hidden;}
 .postLinksBackg a {font: 11px Verdana !important; color: #a3a3a3 !important; padding-top: 15px !important; text-decoration: none !important;}
 .atTag span, .atMusic span, .atMood span {font: bold 11px Verdana !important; color: #a3a3a3 !important;}
 .atTag a, .atMusic em, .atMood em {font: 11px Georgia !important; color: #a3a3a3 !important; text-decoration: none !important;}
 .comments_count_link {font: 11px Verdana !important; color: #a3a3a3 !important;}
 .LinkMore {font: bold 13px Verdana !important; color: #a3a3a3 !important; text-decoration: none !important;}
 #pageBar a {font: bold 12px Georgia !important; color: #a3a3a3 !important; text-decoration: none !important;}
 #pageBar strong {font: bold 16px Georgia !important; color: #edccad !important; text-decoration: none !important;}
 #pageBar a:hover {color: #edccad !important;}
 #epigraph a {font: 14px Verdana !important; color: #a3a3a3 !important; text-decoration: none !important;}
 #side h1, a:hover {color: #edccad !important;}
 #epigraph a:hover {color: #edccad !important;}
 .postLinks a:hover {color: #edccad !important;}
 .urlLink a:hover {color: #edccad !important; text-decoration: none !important;}
 .atTag a:hover {color: #edccad !important;}
 .postTitle a:hover {color: #edccad !important;}
 .avatar img {width:100px !important; min-width: 100px !important; max-width: 100px !important; border: 1px solid #edccad !important; border-radius: 50px !important;}
 .sign {font: 10px Verdana !important; color: #a3a3a3 !important;}
 .authorName a {font: bold 12px Verdana !important; color: #a3a3a3 !important; text-decoration: none !important;}
 .authorName a:hover {color: #edccad !important;}
 #change_avatar_box a, #EditFavSmileysLink {text-decoration: none !important;}
 #commentsArea_title {margin-top: -10px !important; margin-bottom: -20px !important;}

Все баги исправлены.  Стражница Поднебесья огромное спасибо!!

@темы: меню, diaryCSS, основные блоки

Comments

[Стражница]

Форма поиска скрывается по id #YaSearch.
По поводу меню. Вы хотите оставить только определённые пункты? Не очень хорошая идея с точки зрения пользователей. Вы видите одно меню, зарегистрированные пользователи другое, незарегистрированные третье. Либо предусмотреть все эти моменты, либо всё-таки оставить выпадающее меню, расположив его, как нужно.
1. Дата записи лежит в .postDate. Задайте ей {position: absolute; right: 0; (или нужное количество пикселей) top: -28(или нужное количество пикселей);} И не забудьте при этом задать постам {position: relative;}
2. Аватарам задайте паддинг. .avatar img {padding: 3px;}

[Стражница]

3. Смотрите: каждая из кнопок под постом имеет свой класс, вы можете задать ему background и нужную высоту и ширину, при этом скрыв текст. Например так:
.comments a {background: url('адрес-картинки') no-repeat; width: 20px; height: 20px; display: block;}
Текст внутри лежит в span, поэтому его легко скрыть .comments a span {display: none;}
Кстати, если вы планируете и дальше осваивать css, рекомедую установить firebug в мозилке.
4. Сейчас у вас её не видно вообще. Видимо, потому что скрыт родительский элемент #bottomNav. Если скрыть родительский элемент, то и все дочерние (те, что лежат внутри) скроются. А обрезается она скорее всего потому, что высота картинки, которую вы используете, больше высоты элемента. Нужно и самой кнопке задать высоту, однако, помните, что высота и ширина могут задаваться только блочным элементам display: block, то бишь.

P.S.: надеюсь, я не слишком сложно объясняю? =)

[SnezhArt]

Стражница Поднебесья, спасибо за объяснения! *__* объясняете не слишком сложно, щас буду по порядку все это приводить в действия. ))

Вы видите одно меню, зарегистрированные пользователи другое, незарегистрированные третье. Либо предусмотреть все эти моменты, либо всё-таки оставить выпадающее меню, расположив его, как нужно.

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

[Стражница]

как это уравновесить.

Первый вариант: оставить выпадающее меню. То есть заголовки: Дневник, Записи, Мой дневник, Главное меню, Выход. Вот их и расположить, как у вас на макете. А подпункты пусть выпадают вниз, как положено. Тогда и функциональность не пострадает и внешний вид сохранится.
Второй вариант: принудительно скрыть все лишние пункты, в том числе и те, что отображаются у пч. Например, написать на U-mail — это #writeToAuthor, ну и так далее. Это не очень удобно, но возможно.

[SnezhArt]

Стражница Поднебесья, а можно сначала вопрос по иконкам?
я щас вставляю иконки, и они у меня заплясали вот так, а комменты вообще разнесло с их дурацкими скобками. как их в горизонтальное положение рядом друг с другом загнать?

[Стражница]

SnezhArt, а можете сейчас этот диз поставить? На живом сайте смотреть и править удобнее.
Вы поставили .postLinksBackg a {display: block;}? Тогда добавьте .postLinks li {display: inline-block;}
А как должно быть у комментариев? Вообще без числа? Тогда: .comments_count_link {display: none;}

[SnezhArt]

Стражница Поднебесья, диз снова поставила.
все получилось! все в линеечку! спасибо!! *__*
теперь сделаю кнопочки редактирования записи. а потом надо выбрать вариант, что делать с меню, уууу. %)

[SnezhArt]

Стражница Поднебесья, с иконками стало все отлично. просто замечательно. *_*
теперь самое сложное - меню. и про кнопочку наверх забыла.

Второй вариант: принудительно скрыть все лишние пункты, в том числе и те, что отображаются у пч. Например, написать на U-mail — это #writeToAuthor, ну и так далее. Это не очень удобно, но возможно.

я все-таки выберу этот вариант. дневник у меня обычно закрытый, если пч приходит, он так и так добавляется через профиль. на умыл тоже если что напишут оттуда же.
так что, теперь два вопроса:
1. как расопложить все эти замечательные ссылочки менюшные как в макете?
2. добавить меню фон, как у блоков записей? можно добавив бэкграунд сайду, да?

[Стражница]

Ой, вы сейчас что-то делаете? Просто смотрю, всё меняется =)

[Стражница]

Я, кстати, вижу ещё пункт Упоминания #referenceLink. Скройте и его.
Если вы используете position:absolute, то не стоит мешать его с отрицательным маргином. то есть не margin-top: -45px , а просто top: -45px
И чтобы абсолютное позиционирование работало корректно, нужно принудительно родительскому элементу задать position: relative. В вашем случае, это #side ul или лучше .menuSection ul
Текст в верхнем регистре знаете как сделать?

[SnezhArt]

Стражница Поднебесья, Стражница Поднебесья,

Ой, вы сейчас что-то делаете? Просто смотрю, всё меняется =)

я экспериментирую. x))

учла Ваши поправки. теперь из багов:
1. "мой дневник" не желает становится жирным. почему? оО
2. ширина сайда (фон) почему-то с обоих боков чуть шире, чем посты. чувствую где-то что-то упустила @_@
3. уменьшить:
-верхний отступ между текстом эпиграфа и иконкой "редактировать эпиграф"
-отступ между иконкой юрл в эпиграфе и левым краем эпиграфа.

и пошла я мучить кнопочку "наверх" %)

[Стражница]

1. В дневниковских стилях для него написано .top .menuSection ul b {font-weight: normal;}
Сделайте этому элементу принудительно .top .menuSection ul b {font-weight: bold !important;}
2. У #postsArea есть паддинг со всех сторон 10px, он уменьшает ширину записей до 730px. Либо убрать его слева-справа, тогда посты станут шире. Либо прописать маргин слева-справа для #side на те же 10px, тогда меню станет уже.
3. Я кнопку "редактировать эпиграф" не вижу, можете на скрине показать, какие расстояния уменьшить?

И ещё, есть такая кнопка "Пожаловаться". Она появляется при наведении на пост, имеет класс .Attention

[SnezhArt]

Стражница Поднебесья, меню по ширине стало прекрасно, "мой дневник" стал жирненьким. аллилуйя!
про пожаловаться вечно забываю. >< убрала.

можете на скрине показать, какие расстояния уменьшить?

1. вот, смотрите. над буквами слишком большой отступ до редактирования, и юрл в эпиграфе правее, чем юрл в постах делают мне больно.
2. кнопка "наверх". тт_тт как ее пришпилить к блоку записей, а не к краю страницы? и чтобы она появлялась тогда, когда чуть прокрутишь вниз страницу. еще и буковки не убираются.
3. расстояние внизу от враппера до края страницы стало гигансткиv, когда я сделала боттом нав не none =\

[Стражница]

Там такая структура
<div id="epigraph" class="singlePost">
<div id="post0" class="singlePost first count ">...</div>
</div>

Получается singlePost внутри singlePost.
Вот это правило в стилях срабатывает и для того, и для другого
.singlePost {
background: none repeat scroll 0 0 #F0F0F0 !important;
margin-top: 45px !important;
padding: 25px 30px 5px !important;
text-decoration: none !important;
}

правда потом для эпиграфа маргин Вы отменяете
#epigraph {
margin-top: 15px !important;
}
Попробуйте тут же изменить паддинг для эпиграфа, либо отмените все правила для синглпост внутри эпиграфа #epigraph .singlePost

2. По поводу "наверх". Боюсь, что никак. Мы в дневниках можем только внешний вид менять, не затрагивая структуру и там более не меняя скрипты. Не получится средствами css показывать кнопку при прокрутке страницы. А position: fixed цепляет элемент относительно окна браузера, а не других элементов. Единственное, что могу придумать для буковок - перекрыть их картинкой. Или color им прозрачный поставить оО

3. У #bottomNav в стилях есть высота и паддинг, если их убрать, уйдёт и расстояние.

[SnezhArt]

Стражница Поднебесья, чо-то я запуталась %)
юрл в эпиграфе я подвинула просто #epigraph .urlLink {margin-left: -30px !important;}
теперь думаю, как бы также обмануть код и подвинуть высоту текста.

А position: fixed цепляет элемент относительно окна браузера, а не других элементов.

а есть возможность прицепить к элементам? то бишь к блоку записей.
если убираю из кода position: fixed то кнопочка совсем пропадает. лучше бы пропадали буквы "наверх" поверх моей картиночки. применение span none по принципу иконок в постах не подействовало.

[SnezhArt]

Стражница Поднебесья, фсё! эпиграф поправлен.
осталось менююююю %))

[SnezhArt]

Стражница Поднебесья, фсё! эпиграф поправлен.
осталось менююююю %))
когда заходишь, например, в соо design+ то кнопочка "наверх" расположена внизу экрана. а у меня держится в середине. тоже не могу понять фишку.
чувствую, что я Вас уже достала.

[Стражница]

SnezhArt, ничего, мне всё равно сегодня лень работать
Сейчас посмотрю, как у них сделано.
Кстати, кнопка пожаловаться всё ещё есть, не увижу у Вас никаких стилей для неё, проверьте, правильно ли написано.

[Стражница]

Хе-хе, умно-умно, работают на косяках =)
Они сделали высоту строки настолько большой, что она не умещается на экране. Предлагаю 2 варианта скрыть надпись "Наверх". Со span'ом (как в комментариях) и не сработает, ибо его там нет.
1. #bottom_up a {line-height: 500px;} увеличиваем высоту строки, как у них.
2. #bottom_up a {font-size: 0px;} уменьшаем шрифт до нуля. Есть ещё противоположный способ, увеличить шрифт до максимума (10000px).

А посередине Вы сами её расположили вот тут
#bottom_up {display: block !important; position: fixed; right: 0; top: 450px;}
Вместо top используйте bottom: нужный-отступ-от-низа-экрана.
Привязать к записям кнопку никак не получится. Я точно не вижу способа. Если только найдёте, что у кого-то уже сделано.

[SnezhArt]

Стражница Поднебесья, сделала кнопочку установив шрифт до нуля. ^^
посмотрите, плиз, пожаловаться убралось?
теперь из багов осталось только увеличившийся отступ внизу после номеров страниц. там должно быть боттом нав, но ссылки я понятное дело none, а вот расстояние осталось. я уже и над враппером поиздевалась, и не уходит оно ><

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

[Стражница]

SnezhArt, ну вот, только я хотела похвастаться, что придумала, как сделать, а тут уже сделали =)
Да, именно так. Убираем кнопке right: 0; вообще, тогда она окажется слева на записях, где её место по-умолчанию. И теперь двигаем её с помощью margin-left: 750px примерно. PROFIT =)
Про bottomNav я выше писала

3. У #bottomNav в стилях есть высота и паддинг, если их убрать, уйдёт и расстояние.

Поставьте ему height:0 и padding:0
"Пожаловаться" пропала, да.

[SnezhArt]

Стражница Поднебесья, как оказалось все просто с кнопочкой "наверх" %)

а вот height0 и padding0 не помогает

[Стражница]

SnezhArt, даже с !important?

[SnezhArt]

Стражница Поднебесья, да! )о(

[Стражница]

SnezhArt, оО Решили тему поставить?

[SnezhArt]

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

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

[Стражница]

SnezhArt, паддинг убрался, а вот высоту Вы забыли =)
height: 0 !important;

[SnezhArt]

Стражница Поднебесья, э! убралось! хотя вроде и до этого прописывала высоте 0. странно! %)
но теперь все отлично! )**(
спасибо Вам огромное! навозились же Вы со мной! ^^

[Стражница]

SnezhArt, рада, что смогла помочь