0

vertical align and border problem #solved

Hey guys and girls :) First of all - this post about problem I met during coding.If you don't want to spend much time to check it or can't give usefull advice - please just leave this thread and don't post anythin' :) Code here: https://code.sololearn.com/Wdz5Svsbk3J3/#html It looks different from phones/browsers with different window sizes,but problem appears everywhere as I tested. Problem description: 1.Text moving up in blocks for some reasons (vertical align doesn't help). Increasing height doesn't affect vertival position - it's higher then should be anyway. 2.Border problem(It's not border,it's shadow,I called it so just cause it's shorter and looks like a border). When you hover element - border appears,but... If you'll check bottom side of border it's too small comparing to top. We can fix it with just increasing blur-radius,but I feel it too huge so... And I don't feel it like a real fix :D That's like avoid real problem instead of searching reasons. If you have resolution or know reason - i'll be glad to hear anythin usefull :) P.s. sorry about Russian text inside of menu :D Guess it should be displayed correct for anyone ... If not - I'll change it :)

5th Apr 2017, 9:13 PM
Rose Sevenyears
Rose  Sevenyears - avatar
9 Answers
5th Apr 2017, 7:56 PM
Yaroslav Pieskov
Yaroslav Pieskov - avatar
+ 2
@Yaroslav Pieskov Тоже верно,думал сначала написать красиво - 1.Авто ширину каждому блоку 2.Вычислять суммарную ширину блоков , учитывая marginы через js 3.Писать их в переменную и задавать ширину общую для "широкого" окна браузера и переменную с шириной+marginами одного элемента для девайсов с разрешением ниже... Но...куда то моя прыткость во всем этом деле пропала, устал я от этой менюхи и начал прописывать везде статичные значения... ну а переносов быть не должно,отключены же :) Была уже такая проблема с отображением на телефоне.
5th Apr 2017, 8:55 PM
Rose Sevenyears
Rose  Sevenyears - avatar
+ 1
updated
5th Apr 2017, 8:21 PM
Yaroslav Pieskov
Yaroslav Pieskov - avatar
+ 1
@Yaroslav Pieskov oh...right...so the reason was in line-height and element-height difference,that's it :D _______________________________ Благодарю,теперь допер в чем проблема) Буду использовать таки height+line-height,полагаю,такой вариант и ровнее выглядит и манипулировать им проще,без подбора внутренних отступов) + в JQ с этим всем делом обращаться в случае чего куда проще )
5th Apr 2017, 8:38 PM
Rose Sevenyears
Rose  Sevenyears - avatar
+ 1
c line-height нужно быть аккуратнее, т.к. если текст​ не влезет и перенесется на новую строку, то будет явно не красиво. лучше ровнять падднигами или любится с display:table на крайний случай. P.S. flex тоже хорошая вещь
5th Apr 2017, 8:42 PM
Yaroslav Pieskov
Yaroslav Pieskov - avatar
+ 1
для этого есть flex уже
5th Apr 2017, 8:56 PM
Yaroslav Pieskov
Yaroslav Pieskov - avatar
0
@Yaroslav Pieskov Nice Idea :D But...why text looks wrong with height and aligned without it?(at least it's in the middle with like 2px difference bot\top)
5th Apr 2017, 8:22 PM
Rose Sevenyears
Rose  Sevenyears - avatar
0
@Yaroslav Pieskov Ну...с ними не знаком...как и с медиа-квери...решаем чем умеем :)
5th Apr 2017, 8:57 PM
Rose Sevenyears
Rose  Sevenyears - avatar
0
тут неплохо flex описали http://html5.by/blog/flexbox/
5th Apr 2017, 8:59 PM
Yaroslav Pieskov
Yaroslav Pieskov - avatar