Repeat Text throughout a Document

[The_Elk]

Hi all,

I know that CSS has been developed so that you can keep 'style' away from the 'content' in HTML pages, but I was wondering if there is a way that CSS could hold text within, say, a DIV that would then be repeated on each page in the website?

Example - I have a sub nav bar with 3 links currently. I have had to include this in every page. Shortly, I'll be adding a new link - and I will obviously have to open each HTML page and include it.

Could I not put it somewhere 'once' and then have that referenced in each page so that if I make the change 'once' all pages will be update?

Thanks in advance for any help.

Paul :)

[WebJoel]

To understand better, this is not 'text' that you are including, but a list of hyperlinks that are stored as an external file, -probably a PHP file, and the LINK for the external list of hyperliks is then referanced once in every page.
that way, as new hyperlinks are added to this external php file, the growing list of hyperlinks will then appear upon every page. -Only need to edit ONE document, instead of every html page. Yes, -this can be done.
I have snippettes of code that will do this, but am short on time this morning. Another will answer probably before I get back. But this is very easy to do, yes. :)

[The_Elk]

Hi mate,

thanks for your reply - I know in my example I used a link - but I do also have a line of Text in the #divtopnav bar that changes weekly - a sort of snipped of information - i've not used php before - is it something I can do client side or does it have to be server side?

Cheers
Paul

[WebJoel]

I'd have to see what you're talking about I guess, but if it's a line of text and not a link, there are javascripts that can rotate passages or short paragraphs on hourly, daily or weekly basis. This would client side, and being javascript, some 10% of people don't have or use javascript.
A server-side script then might be used. I'm not too sure how to do that, but am sure that it exists. And it is fairly easy to do although I haven't done a whole lot it this myself.

[The_Elk]

Here is a copy of the div box I have in CSS:

#topnavleft {position:absolute;
left:10px; top:135px;
padding-top:10px;
font-family:verdana, arial, sens-serif;
font-size:12pt;
font-weight:bold;
color:#f00;
}

and in the HTML doc - this is the text I want on each page:

<div id="topnavleft">
Freephone 0800 123456
</div>

thanks
Paul

[WebJoel]

Here is a copy of the div box I have in CSS:

#topnavleft {position:absolute;
left:10px; top:135px;
padding-top:10px;
font-family:verdana, arial, sens-serif;
font-size:12pt;
font-weight:bold;
color:#f00;
}

and in the HTML doc - this is the text I want on each page:

<div id="topnavleft">
Freephone 0800 123456
</div>

thanks
Paul

Well, without trying to find a 'text' method, I'd just cheat and make an image some 26-or-27 pixels tall (a bit taller than a scrollbar is wide), and make it wide enough to just type the words "Freephone 0800 123456" and have this 'image-of-text' repeat throughout the y-axis in that DIV.
Or, for a more subtle effect, same example but with a 40 or 50-pixels height and the text is 'vertically centered' within... perhaps in a lighter shade of charcoal instead of a dark black).

You won't get the benefits of indexing this 'repeated text-image' (as a 'bot won't see any, -this is an image) but inclusion of the tags [alt="Freephone 0800 123456"] and [title="Freephone 0800 123456"] will just barely scrape by with a near-alternative. (Most 'bot do not rely upon alt or title anymore, -too often they are deceptive/misleading).

Personally, the repeated use of text the way you describe is slightly considered to be spam. Some freehosts (geocities, for instance) will remove sites that do this, although the offending site typically does this in a nefarious manner, with the text-only being same color as the background-color so you won't see it. Concealing it is 'the crime', not the 'doing of it'...

-Have you ever done a search for something, say, leather foot apparel or something as general, -and landed upon a fairly teeny-bop Britney Spears or Spice Girls site (for instance) and wondered WHY this happened instead of going to the HushPuppy, FootLocker or BATA-shoe Source? -Sometimes examining the hidden text in such a page reveals why... (and I cite these two examples because it has happened to me in the past... I was researching something and some of the top-ranked sites based upon my criteria came up, -those-, -and these were not related to my expectations...) :(

[The_Elk]

Hey - thanks very much for your reply - I've used the repeat-y before, but this only repeated the text on one page.

Is this what you think I meant? What I am looking to do is to have the freephone number just once on the page, but this same text to be populated in the same place (using div) on each and every page (rather than the same text reapeating itself horizontally across just one page).

Thanks
Paul

[aaron.martinas]

hes talking about adding a header to the page using CSS

its not possible since CSS is for styling content, not adding actual content.

you need some type of web server technology that will always add a header/footer on all the pages you dish up. unfortuntely, apparently im too stupid to finger what this method is called.

and dont anyone say "SSI".. were talking something that does this behind the scenes, transparent to the devloper once entered into the web server!

[WebJoel]

For me, the confusion lies with the thread's name "Repeat Text throughout a Document" because what he is apparently asking for is not repeated throughout a document. It is inserted once in every document without any user or developer action. I should think that one way of doing this is an external page with the target DIV, and a referring link which upon every HTML page calls upon this external DIV to be place at the link's location.
There is a name for that. Repeating throughout a document is not what it's called. :rolleyes:

[The_Elk]

What a clever boy!

Perhaps the name should be 'repeat text throughout a website' wouldn't you agree?

With a logo for example I have tried #divlogo {width: 735px; height:127; url(graphics/logo.gif);}

but this didn't seem to work as nothing appeared in HTML page when I typed:

<div id="logo">
</div>

Is there something else missing?

[aaron.martinas]

sorry for the late reply! i forgot abou this thread..

to answer your question above, this works:


<style type="text/css">
#logo {width: 735px; height:127; background-image:url(MatroxSetup.JPG);}
</style>

<div id="logo" style="background-color: #00ff00; width: 100px; height: 100px">test
</div>


notice that the declaration for the ID is #logo, not #divlogo.. otherwise your div tag's id would have to be "id=divlogo"

i couldnt get it to work using the CSS "shorthand", i had to write out "background-image:url(blahblahblah);" to get it to work.