Sidebar in CSS

NomadNomad A Small Piece of Hell Icrontian
edited April 2010 in Internet & Media
I've been redoing my portfolio websites and figured I'd ask this question here. One of the most bothersome things I encounter is that I like the flexibility of changing the projects I have, but am loathe to edit 12 other index pages when I want to make a change.

My current website is:

On the lefthand side I have

<li><a href="ip/index.html">Integrative Project</a></li>
<li><a href="fex/index.html">Faculty Exhibition</a></li>
<li><a href="americandream/index.html">American Dream</a></li>
<li><a href="icc/index.html">Inter-Cooperative Council </a></li>
<li><a href="hamlet/index.html">Hamlet</a></li>
<li><a href="waterforhumankind/index.html">Water for Humankind</a></li>
<li><a href="shithappens/index.html">Shit Happens</a></li>
<li><a href="invisibleman/index.html">Invisible Man</a></li>
<li><a href="vivaldicopland/index.html">Vivaldi & Copland</a></li>
<li><a href="fleetwooddiner/index.html">Fleetwood Diner</a></li>
<li><a href="apeoplestypeface/index.html">A People's Typeface</a></li>
<li><a href="aata/index.html">Ann Arbor Transit Authority</a></li>
<li><a href="letterpress/index.html">Letterpress</a></li>
<li><a href="harleydavidson/index.html">Harley-Davidson</a></li>
<li><a href="4thandtroy/index.html">4th & Troy</a></li>
<li><a href="322/index.html">322 Liberty Street</a></li>
<li><a href="ferndale/index.html">Ferndale Lofts</a></li>
<li><a href="trumplaza/index.html">Trump Plaza</a></li>
<li><a href="portfoliosocieties/index.html">Portfolio Societies</a></li>
<li><a href="technologyhealing/index.html">Technology Healing</a></li>

If I want to change this, I have to do it in each index page. Is there a way around this?


  • KwitkoKwitko Sheriff of Banning (Retired) By the thing near the stuff Icrontian
    edited April 2010
    Use a scripting language like PHP. You can include pieces of code that you use regularly without having to recode it 12 times. See this:
  • NomadNomad A Small Piece of Hell Icrontian
    edited April 2010
    And if my crappy university hosting doesn't allow for PHP, I assume I am stuck to doing it manually?
  • RyderRyder Kalamazoo, Mi Icrontian
    edited April 2010
    You need the ASP equivalent if your servers are M$ based. (I think)
  • pragtasticpragtastic Alexandria, VA Icrontian
    edited April 2010
    I feel like it would be possible to do this with a Javascript file hosted in your student directory, defining the list of links, then including that JS in each of your pages.

    Just a thought, could be way off base as I don't work in JS much.
  • NomadNomad A Small Piece of Hell Icrontian
    edited April 2010
    My only other question, is there a way in CSS to have the current link highlighted in a specific color? Currently, the rollovers are read, and I'd like the current page to be highlighted in red. The 'a:active' tag doesn't seem to be working.
  • SnarkasmSnarkasm Madison, WI Icrontian
    edited April 2010
    I will admit that I have a barely working knowledge of how it works on my site, but I made a nav bar that sounds roughly like what you're looking for. I have a div containing my nav, and in the CSS, if the page I'm on is linked in the nav, I underline the link using the navCurrentPage property:
    /* highlight individual menu items when their page is current */
    #navcontainer .navCurrentPage {
        border-bottom: 1px dotted gray;}

    I would guess that that property's pretty specific to navigation menus, but it might be worth checking out?

    Again, apologies. I know what you're looking for is something I've done, but I don't even know enough to be useful to tell you how exactly to do it. Let me know if you'd like to see the site code or if I can be helpful in some other way. A quick search on navCurrentPage should be helpful - it led me to this, at least.
Sign In or Register to comment.