example website layout (view text and gloss on same page)

[pickettj]

@ebeshero @djbpitt

I want to produce a basic teaching website for a text, e.g. one window with main text, another window to the right with various kinds of explanatory gloss (navigable by tabs, perhaps, to distinguish between grammatical and historical gloss).

My XML code looks like this:

<sec id="0.0">
         <l><pg fol="K20_148r"/>pad nām ī yazdān ī kerbakkarān<pg fol="K20_148v"/>
         </l>
         <gloss>
            <gram>
               <subtop>"yazdān ī kerbakkarān" takes the plural ending because it is a possessor of
                  nām: "If the possessor is a plural noun, it usually takes the ending -ān" (PP2).
                  If a plural noun is in the subject position, plurality is indicated by the verb:
                  andar mān dēw būd hēnd “demons were in the house” (PP1).</subtop>
            </gram>
            <hist>
               <subtop>Note similarity to the invocatio of Islamicate texts: "in the name of God..."
                  (باسم الله)</subtop>
            </hist>
            <diplo>
               <subtop/>
               <!-- Diplomatic gloss about original manuscript. -->
            </diplo>
         </gloss>
      </sec>

I.e. <sec> bounds the lines of the original text, as well as <gloss>, which bounds three different kinds of explanatory text.

My question is fairly straightforward: is there a website that does something similar that you would point me to in terms of html and css, so that I don't have to reinvent the wheel? The Russian Fairy Tales project is pretty close to what I am aiming for, but I figurd you might have other suggestions.