How to improve the look of 3 good old articles in the footer?
Due to the fact that the title of each article in the footer is given 33%, and the length of the names is different, a couple of unpleasant effects appear:
1) emptiness, if the names are short, and the next - long;
2) the names stick to the upper edge of the block;
3) you need to click only on the text, and not on the whole block.
For example, here in the middle link, as in all, you need to aim at the text.
What if they are somewhat ennobled?
Even if you improve the look of the links - remove underscores, making only a color change on hover, the inconsistency of heights is not very happy (this is how the ZenComment version of user styles has worked for the last 2 months). And it’s impossible to place them vertically in the center without a script, as these are divas, and even the table-table-row styles -table-cell lacks elements. But what if you place 3 blocks in a table and do not care about the width? The result is excellent: the width of the table is 100%, and the widths of the cells themselves line up according to the content.
')
In order for the link to be active across the entire field of the cell, it needs to map the {display: table-cell} property. Even if sometimes the table cannot completely align the contents (quite a regular case), the {vertical-align: middle} cell property corrects the situation.
HTML code:
Basic CSS styles:
The gaps between cells are selected at 24 pixels, so adjacent names never stick together:
Here we gradually shift the edge of the window with the mouse, it becomes smaller, then the jump - and all 3 links took 2 lines, and the table was rearranged. From the screenshot we see that it is enough to point to any place in the block so that the link becomes selected.
You can see in action and use such footer styles (as well as fifty other improvements) in the ZenComment user styles in conjunction with the HabrAjax user script . The script here transforms HTML into the desired configuration, and the styles will arrange everything.
Even if you use HabrAjax separately, the footer will also look good:
1) emptiness, if the names are short, and the next - long;
2) the names stick to the upper edge of the block;
3) you need to click only on the text, and not on the whole block.
For example, here in the middle link, as in all, you need to aim at the text.
What if they are somewhat ennobled?
Even if you improve the look of the links - remove underscores, making only a color change on hover, the inconsistency of heights is not very happy (this is how the ZenComment version of user styles has worked for the last 2 months). And it’s impossible to place them vertically in the center without a script, as these are divas, and even the table-table-row styles -table-cell lacks elements. But what if you place 3 blocks in a table and do not care about the width? The result is excellent: the width of the table is 100%, and the widths of the cells themselves line up according to the content.
')
In order for the link to be active across the entire field of the cell, it needs to map the {display: table-cell} property. Even if sometimes the table cannot completely align the contents (quite a regular case), the {vertical-align: middle} cell property corrects the situation.
HTML code:
<div class="rotated_posts" style="display: table; width: 100%;"> <div class="rotTRow" style="display: table-row;"> <a class="grey" href="http://habrahabr.ru/post/147042/"> ( ) </a> <a class="grey" href="http://habrahabr.ru/post/149179/"> , email , </a> <a class="grey" href="http://habrahabr.ru/post/147828/"> . </a> </div> </div> Basic CSS styles:
.rotated_posts{ display: table; width: 100%; } .rotated_posts .rotTRow{ display: table-row; } .rotated_posts .rotTRow a.grey{ display: table-cell; padding:0 12px 4px; vertical-align: middle; } (This method will not work in IE6-7, they need to write tables explicitly, but is suitable for userscripts where, by definition, there is no IE.)The gaps between cells are selected at 24 pixels, so adjacent names never stick together:
Here we gradually shift the edge of the window with the mouse, it becomes smaller, then the jump - and all 3 links took 2 lines, and the table was rearranged. From the screenshot we see that it is enough to point to any place in the block so that the link becomes selected.
You can see in action and use such footer styles (as well as fifty other improvements) in the ZenComment user styles in conjunction with the HabrAjax user script . The script here transforms HTML into the desired configuration, and the styles will arrange everything.
Even if you use HabrAjax separately, the footer will also look good:
Source: https://habr.com/ru/post/152055/
All Articles