Got it.
ul
{
list-style-type: none;
}
How would I turn the text into an html element? As in, a link? Is there a way via css to do that?
That has to be done in the HTML with the
<a href="http://www.somestation.com">RADIO</a> element and attribute.
I’m doing it here, thanks.
The colors could use some work, and I definitely would not apply a line-height of 1 to the text, but it looks like you are on the right track !
The Flex example I did was a Ordered List <ol> because the radios were numbered. I removed the list style, but replaced the numbers to the end using a css counter. But as far as html is concerned, its a regular ordered list.
In later examples, you name the radios, so maybe use <ul> instead and remove the counter.
The point being, I offered this days ago, it’s valid, semantic, slim and very responsive without the need for any media queries. Yet this is still going on, messing around with 90s style table layouts and suchlike.
You may wish to tweak the styling, but it’s quite a complete solution, if I do say so myself.
3 Likes
Finished Product:
http://testblog45675.blogspot.com/
Very nice. Looks great in Chrome but the top row is a little wonky in Firefox. Can you point me to some code and I’ll try to see why.
I’m not seeing that misalignment in Firefox, but I’m a little bemused by the “product”.
There is nothing to indicate that the “different” row is clickable and has a function. Yes, the cursor indicates a link, but that’s the case anywhere you hover on the matrix. The squares in the top row do nothing if clicked; the squares in other rows open a “cookies” message which is hard to remove. (There are also a number of validation errors.)
What was the purpose of the design?
1 Like
That happens on zoom font, I just tested it, any way to fix that?
When you do zoom text only.
What do you mean you see cookies when you open it?
This is what I see when I open it.
The solution seems to be:
(1) delete a {display:inline-block}
(2) add a {float:left}
(3) add a {margin-left:4px} /* add this style to anchors 2-5 // not the left-most anchor */
Perhaps that’s just because I haven’t clicked the message to agree to cookies. But my point remains that it’s hard to know how to get rid of that, once opened - and I still don’t understand the thinking behind the “product”. If it is not clear what it does or how it works (or, indeed, that it does anything), it will be of very little value.
I see the misalignment because my user font-size is slightly larger than the default.
1 Like
if I remove display:inline-block, then it falls off the page.
Yes - I can reproduce it by zooming. It just hadn’t occurred to me to do that on a page with no text.
1 Like
I’ve had a long night and am not going to argue with you
I listed 3 steps.
Did you stop after the first step, or did you complete all 3?
Done!
1 Like
1 Like