StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Here's an elegant way to do this, which I copied from somewhere and I only wish I could remember where, so I could give them the credit. 8-)</p> <p>I assign an <code>id</code> to each of my pages (or all the pages within a section) like this:</p> <pre><code>In index.html: <body id='section-intro'>... In faq.html: <body id='section-faq'>... In download.html: <body id='section-download'>... </code></pre> <p>And then an <code>id</code> for the corresponding links:</p> <pre><code><li id='nav-intro'><a href="./">Introduction</a></li> <li id='nav-faq'><a href="./faq.html">FAQ</a></li> <li id='nav-download'><a href="./download.html">Download</a></li> </code></pre> <p>And the in the CSS I set a rule like this:</p> <pre><code>#section-intro #nav-intro, #section-faq #nav-faq, #section-download #nav-download { font-weight: bold; /* And whatever other styles the current link should have. */ } </code></pre> <p>So this works in a mostly declarative way to control the style of the link that the current page belongs in. You can see it in action here: <a href="http://entrian.com/source-search/" rel="noreferrer">http://entrian.com/source-search/</a></p> <p>It's a very clean and simple system once you've set it up, because:</p> <ul> <li>You don't need to mess about with template markup in your links</li> <li>You don't end up using big ugly <code>switch</code> statements or <code>if / else / else</code> statements</li> <li>Adding pages to a section Just Works [TM]</li> <li>Changing the way things look only ever means changing the CSS, not the markup.</li> </ul> <p>I'm not using Django, but this system works anywhere. In your case, where you "set their own respective titles and contents" you also need to set the <code>body id</code>, and there's no other Django markup required.</p> <p>This idea extends easily to other situations as well, eg. "I want a download link in the sidebar on every page except the download pages themselves." You can do that in CSS like this:</p> <pre><code>#section-download #sidebar #download-link { display: none; } </code></pre> <p>rather than having to put conditional template markup in the sidebar HTML.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload