[Sarah02]

I'm trying to do something with this website, where if I click on a name under "Biography" then text will appear in the "Info" box. Does anyone know how I can do this?

Thanks alot for the help.

[emil]

Quirky code, but have a look here
http://randomcolors.com/uploads/dt/showhide/

[Sarah02]

I'm trying to test this code out on my site, I'm not sure what I'm doing wrong. Can someone take a look at my code? Here is the web site.

Thank you.

[Stickman]

That link doesn't work.

[emil]

I think you missed the masterdiv

You have to keep everything in a div called masterdiv.
Or you can change the name to whatever you want, on thsi line
var ar = document.getElementById("masterdiv").getElementsBy TagName("span");

[Sarah02]

Thanks alot. It works great now. I have one last question. Here is the site again. How can I get the little white "Africa" box to line up closer to the "Biography" box. Right now its too far under it.

Thanks.

[emil]

You could try to put it in the source before the right container. or use on the #container div position:relative; and the africa one position:absolute;
One suggestion off-topic either completely ditch the papyrus font, or use an image replacing technique, because it looks kind of... ugly

[Sarah02]

Really? You don't like the papryus font? I like it alot, it matches the main banner. It doesnt really matter because most people don't even have that font on their computer (i think mostly Mac users are seeing it). Most people see Verdana, I think. You dont even like the papyrus font on the main menu?

Any other design suggestions are definintly welcome. This being my first website and all.

[emil]

Frankly, I don't, but it may be just a personal preference . the font looks too jagged on the edges. Maybe try a larger size, or do it with an image replacement technique so that everybody can see it.
Have a look here
http://www.mezzoblue.com/tests/revis...e-replacement/

[Sarah02]

I went to that website but I'm not exactly sure what it is. How would "Image replacement" work?

[pgo]

Your text is in HTML, you use CSS to hide that text and put an image in its place.

[finbarr]

example of image replacement -

html:

<h1 class="index"><span class="hide">some text here</span></h1> - h1 header tag with 'some text' surrounded by a span tag

css:

span.hide {display:none;} this stops the 'some text' from displaying

h1.index {background:url(../images/headers/index.gif) left top no-repeat;}this puts your papyrus text as an image to the background of the h1 tag.

Of course it means that you have to create the images to insert and that you must get into css - if you havent already

[finbarr]

but emil is right the jagged effect on the text is not attractive

[Sarah02]

Originally Posted by finbarr

but emil is right the jagged effect on the text is not attractive

I'm really suprised you guys dont like the font. Most people who can actually view the font tell me that its one of thier favorite things on the site.

[H.Yates]

I think the point they're trying to make is that Papyrus is quite a stock font - I'm in agreement with them about it being pretty uninteresting, but fair enough if it works for you.

[finbarr]

Originally Posted by Sarah02

I'm really suprised you guys dont like the font. Most people who can actually view the font tell me that its one of thier favorite things on the site.

Its not the font I dont like... its the fact that with text typed in the html page there is no anti-aliasing on it - hence the reason it looks jagged. thats all!

[emil]

I still don't like it. Probably I would not like it even if it was smooth. Somehow I feel it does not sit well with the overall feel of the layout. It's too messy and looks out of place on a layout that is crisp and clear. But it may be too soon to comment on the design now

[Sarah02]

Originally Posted by finbarr

its the fact that with text typed in the html page there is no anti-aliasing on it

Can you tell me more about that? What does "anti-aliasing" mean?

[emil]

Originally Posted by Sarah02

Can you tell me more about that? What does "anti-aliasing" mean?

Check the attachment.
A more detailed example here

[finbarr]

Originally Posted by Sarah02

Can you tell me more about that? What does "anti-aliasing" mean?

from google search:

also referred to as font smoothing is a technique used to render fonts on low resolution devices ( such as a monitor ). The problem with rendering fonts is that the fonts consist of outlines, but the device renders in dots. The obvious way to render a font is to color black any pixel inside the outline, and leave all other dots. The problem with this is that it doesn't adequately address the pixels that are on the outline. A smarter algorithm would be to color the boundary pixels gray.

if you use photoshop you'll find it in the top bar (marked aa) once youve clicked on 'type' from the toolbar... see below