[Aurus]

Добрый день!

Захотелось вынести список тегов под запись, на первый взгляд всё было прекрасно, а потом оказалось, что в слишком коротких записях теги всё равно уезжают наверх. Причём в самом дневнике этого не видно, но зато мозолит глаза в избранном, что печалит ( У меня уже вообще никаких идей не осталось, как это исправить, может, кто-нибудь сумеет подсказать? Вроде бы понимаю, что дело в position:relative, но не могу придумать, как иначе это реализовать...

как это выглядит

Как хочется:


Как получается (иногда и выше уезжают):


А вот код с кучей костылей:

 .atTag a {color:#9b9b9b; background:#eeeeee; border: solid #dddddd 1px; border-radius: 10px; text-decoration: none; padding:5px; transition: linear all .3s;}
 .atTag a:hover {background:#cfe8fc; border: solid #cfe8fc 1px; border-radius: 10px;color:white; text-decoration: none;}
 .atTag span {display:none;}
 .atTag {width:580px; text-align:right; color:white; position:relative; bottom:-70px; right:15px; display: block; line-height:28px; overflow:auto; height:30px;}
 #JournalFavorite .atTag, #JournalQuote .atTag {width:580px; border: solid red 0px; text-align:right; position:relative; bottom:-70px; right:150px; display: block; line-height:28px; overflow:auto; height:30px; z-index:1;}
 #JournalFavorite .postLinksBackg {position:relative; z-index:2;}
 #JournalComments .atTag {width:580px; border: solid red 0px; text-align:right; position:relative; bottom:-85px; right:170px; display: block; line-height:28px; overflow:auto; height:30px;}

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

UPD: решено! Спасибо  curious_werewolf и  ~Erika

@темы: отступы, Дизайн

Comments

[curious_werewolf]

Надеюсь, правильно вопрос поняла)
А если родительский блок сделать относительным, чтобы в нем позиционировать теги?
например:

#postsArea .singlePost {
      position: relative!important;
}

и тогда по нему теги спозиционировать:

 #JournalFavorite .atTag, #JournalQuote .atTag {
width:580px; 
text-align:right; 
position:absolute; 
bottom:-40px; 
right:0;
display: block; 
line-height:28px; 
overflow:auto; 
height:30px; 
z-index:1;}

[~Erika]

Aurus, для скроллинга меню попробуйте этот код:

#side {
    bottom: 10px;
    overflow: hidden;
}

#side > .bordered {
    overflow-y: scroll;
    height: 100%;
    width: 250px;
    padding: 10px 30px 10px 10px;
    position: relative;
}

#myDiaryLinks, #thisDiaryLinks, #thisDiaryOwner, #globalLinks, #thisCommunityMember, #joinThisCommunity, #thisCommunity, #lastComments {
    height: auto;
    overflow: hidden;
    max-height: 30px;
    transition: max-height .5s ease;
}


#myDiaryLinks:hover, #thisDiaryLinks:hover, #thisDiaryLinks:active, #thisDiaryOwner:hover, #thisDiaryOwner:active, #thisCommunityMember:hover, #joinThisCommunity:hover, #joinThisCommunity:active, #thisCommunity:hover, #thisCommunity:active, #lastComments:active, #lastComments:hover {
    height: auto;
    max-height: 300px;
}

Надеюсь, решение устроит. Анимация там добавлена для плавности, без неё выглядит дёргано.
Если что-то не будет работать - пишите, я могла что-нибудь забыть))

[Aurus]

curious_werewolf, ГОСПОДИ ПОЗВОЛЬТЕ Я БУДУ ВАС ЛЮБИТЬ
спасибо огромное!!! я думала, совсем с ума сойду - даже не так страшно, что оно некрасиво залезало на пост, сколько сам факт, что не получалось этот баг победить Х))

[Aurus]

~Erika, о, спасибо огромное! именно то, что хотелось )) правда, у меня не работает без overflow:auto в hover, но у меня уже столько всего в коде намешано, что я не поручусь, что это не из-за какого-нибудь конфликта Х)

[~Erika]

Aurus, рада была помочь))

[curious_werewolf]

Aurus, пожалуйста))

сам факт, что не получалось этот баг победить Х))

о да, это боооль))