Topic: divs and textsize/accessibility (Page 1 of 1)

Hello!

A usability tester on a website I'm working on has pointed out that when text size is increased (Ctrl-scroll or View/text-size), which is of great assistance of course for near-sighted people, the text on the home page slides down behind the images. The entire page is constructed of divs whose position is controlled by the css ... eg.

#welcome{

	position:absolute;

	left:310px;

	top:196px;

	width:431px;

	height:124px;

	z-index:6;}

...which positions a div holding text, and eg.
[CODE]#indexpicsT {position:absolute; left:310px; top:331px; width:449px; height:139px; z-index:24}
...which positions an image-holding layer.

I realise tables are the usual answer, but I'm wondering if during the long dark hours of night, when the demented howls of the inmates recede, someone has come up with a solution using only divs?

HOOOWWWWWLLLLLLLLLLL!...BigAl

You should avoid using position: absolute. When you're using absolute positions the divs position is based on the top-left of the browser, regardless of text-size. Instead use 'position: relative' or float the divs where you want them. That will create a more fluid design, that will work for different text-sizes.

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio -

If you *do* choose to use position:absolute, base the top, left, width, and height values off of units other than pixels. Use em's instead, which change based on the font size. For example:

#welcome{
position:absolute;
left:50em;
top:30em;
width:60em;
height:20em;
z-index:6;}

But, as Veneficuz said, the best solution is to avoid overuse of absolute positioning.

Long time no see, mate.
Don't make too many div, mate.
It is feasible just uing HTML, mate.
Cheers.

Hiroki Kozai

Hey thanks, you guys - that's a great help

BigAl