Basic HTML/CSS - include text from external location

[Chris]

Hi Group,

It's been a very long time since I've tried working with HTML and so
I'm sure this question is going to seem elementary, but I haven't had
any luck finding the answer myself. In my blog on Blogger, I've
included a CSS based pop-up box class so that I can provide additional
information to the reader that facilitates the reading process without
resorting to links. However, the drawback so far is that the text in
the pop up box (activated on mouse-over) is cluttering up the HTML
body behind the scenes. Moreover, I might want to provide the same pop
text in different places and it seems inefficient to copy and paste
within my HTML in order to do that (also, more clutter). Is there some
way to reference text (including HTML markup for the text) that is
stored in another location and printed to the page where an
appropriate tag is located? If it's possible, I'd rather not include
Java/PHP/Python scripts so that I can keep the solutions CSS and
maximally accessible. As you can see the HTML body example below, the
content of the pop box is contained within <span></span> and <p.h2
class=boxpopup3> but it's very bulky particularly if there's a lot of
pop-up text. Thanks for your time,

Chris

code example:
--------------------
CSS stylesheet
--------------------
.boxpopup3{position:relative;
z-index:24;
color:$(link.hover.color);
border-bottom:1px rgb(120,120,120);
text-decoration:none}
.boxpopup3:hover{z-index:25;}
.boxpopup3 span{display: none}
.boxpopup3:hover span{ /*DISPLAYS ONLY ON HOVER*/
display:block;
position:absolute;
top:2em; left:0; width:12em;
padding:.3em;
border:2px 1px rgb(120,120,120);
color:white; background:$(widget.background.color);
text-align:center;
}

--------------------
HTML Body
--------------------
<i><a href="http://www.python.org/">Python</a> </i>(<p.h2
class="boxpopup3">apt-get <span>'apt-get' is the command line
function for managing packages with Ubuntu's Aptitude Package Manager
- the full command for a sudoer (administrative user) would be <p.h2
color="color-value:rgb(32,32,32)" style="font-family: Courier;">sudo
apt-get install [package]</p.h2>in order to install software.</span></
p.h2>python)

[Vision Jinx]

Hi Chris,

While probably the ideal way to go for something like this sounds ike
AJAX, the issue there is with Blogger not really having a practical
way to have HTML files stored on the same domain. When they use to
allow publishing to your site via FTP I use to do stuff like that all
the time (AJAX Enhanced blog) but now that they removed that ability
the solution your seeking gets narrowed down a bit. One other way I
can really think of is have the HTML as a javascript string (or in an
array of strings) that you can call via javascript to render the
results that way. Alternatively, possibly you can also just have the
HTML you want wrapped in a hidden tag and use javascript and CSS to
position the content on the page using css relative and absolute
positioning or even a bit more hacky is to have the HTML content
hidden with an ID and use javascript to get its element.innerHTML and
output that content in your tags elsewhere as well.

Also, with the way your doing it now, have you checked this in other
browsers (like IE or especially older versions of IE as well)? From
what I remember IE (and some others) don't respect the psudo selectors
styles on non-anchor tags (like Firefox does). Which is why I tend to
use javascript to just toggle the elements display property instead
(and maybe assign class names to it dynamically as well). Also, this
may not work well with devices like say phones and tablets.

Just some thoughts. :)

Cheers!
Vision Jinx

[Chris]

Very informative, thank you. I'm going to think more about the Java
solution, but for now I've gone with <iframe> tags that contain urls
to HTML content stored on a free web hosting server. It's too bad that
there isn't a simple referencing system in HTML similar to the LaTex/
BibTex interface so that text and markup could be stored in a simple
text database and then recalled anywhere you want with one set of HTML
tags. It seems like with either frames or client-side scripts I'm
bound to create problems for some viewers (not that I'm going to have
a large audience anyhow ;)

C