Forum Moderators: not2easy
I have a page of links on my site... sort of directory-style, where this page has links to sub-pages/categories, with the main categories having a number indicating how many links there are... etc.
It's set up in such a way that at the moment, if there aren't any links to the sub pages, the link text is greyed out and there isn't a link associated with it. If there is a link associated with it, it's link-colored, and there's either a number or it's a direct link to a sub category.
What I'd like to do, to clean up the pages is to have the text hidden if there's no link associated with it. I'd like to be able to do this white hat, so using CSS hidden or invisible doesn't seem like the way to do it... how else could it be done?
Thanks.
Use display:hidden; that is how most of the drop down menus etc. all do it. The text is not hidden all the time, so you should be fine.
But then this might too. It can also be applied to other document objects besides the heads exemplified here. It's veryuseful for situations where a level one head is intrusive on your design:
#main h1, #main h2 { text-indent: -9999px; font-size: 0px; line-height: 0px; margin:0; padding:0; }
<body id="main">
<h1>main head</h1>
<h2>main sub</h2>
</body>
So what you get basically is a document with semantic headings but invisibly off to the left. I'm going on intuition here -if this solution OR the "display:hidden" solution are used in a reasonable context (i.e., their content relates to the page and is not spam-dunked) it will cause few problems. But I could be wrong, this could be as bad as white-on-white.
