KittenKatja
Well-Known Coder
I recently moved from using Stylus to inject stylesheets into websites, I go to very often, to make a personal HTML file.
In it, I made a div
I gave the first div
The second div has
The title div has
The links inside the list div have
I gave the first div a stylized "border" that only appears when
Now to the questions...
In it, I made a div
column
inside is x amount of row
divs, and inside are two more divs title
and list
and inside the list are a bunch of links.I gave the first div
{width: fit-content;display: flex;flex-direction: column;gap: 15px;}
The second div has
{display: flex;}
The title div has
{width: fit-content;font-size: 25px;min-width: 120px;}
The links inside the list div have
{display: block;flex-direction: column;align-content: stretch;}
I gave the first div a stylized "border" that only appears when
:not(:hover)
and the row div a "border" when :hover
.Now to the questions...
- Priority: High | How do I make the title as big as any other title in each row? My current solution is
{min-width: 120px;}
, but I don't wanna change it as I add longer titles. - Priority: High | How do I stretch the links to fill the open room? (replicate 2 rows to know what I mean)
- Priority: Low | How do I make the "border" of the first div only disappear, when a row-div is hovered, not when the mouse is in the 15px gap?
- Priority: Low | Is it possible to have an input field that is hooked up to google to flex on my start page? (very unnecessary since I plan to get to it through the start page)