Convert absolute positioning to relative?

V

Vernon Compton

I am almost afraid to ask this in this group, but I am keen to know if
this is possible.

After struggling for two weeks to use CSS and relative postioning, and
having the results look wonky in different browsers, I have just used
Namo WebEditor 5.5 to create a small site. The layout looks good, the
code is a bloated mess, but the real problem is that all the layers
are positioned absolutely. Is there a (comparatively) easy way to
convert absolute postioning to relative?
 
R

rf

Vernon Compton said:
I am almost afraid to ask this in this group, but I am keen to know if
this is possible.

Don't be afraid.
After struggling for two weeks to use CSS and relative postioning, and
having the results look wonky in different browsers, I have just used
Namo WebEditor 5.5 to create a small site. The layout looks good, the
code is a bloated mess, but the real problem is that all the layers
are positioned absolutely. Is there a (comparatively) easy way to
convert absolute postioning to relative?

You should not be using relative positioning unless you know exactly what it
does. Go over here to the spec and have a read:
http://www.w3.org/TR/2004/CR-CSS21-20040225/visuren.html#positioning-scheme

Basically, relative positioning means lay the page out as per normal
positioning and then move certain elements *relative* to where they would
have been. I am sure this is not the way you want to lay out your page.
Relative positioning does *not* mean position an element relative to what
came before it.

If you use absolute positioning then you will get into real trouble when
your viewer changes her font size. Suddenly all your carefully positioned
text will get bigger and overwrite what is underneath it. Changing canvas
size also tends to be detrimental.

The best way to lay things out is to not. Let the browser do it for you. At
most you might want to float a div left or give something a left margin but
that should be about all. The web is a fluid medium, not fixed like desktop
publishing.

Do you have a URL of your attemps for us to look at? It should take only a
minute or so to determine the flaws in your thinking :)

Cheers
Richard.
 
V

Vernon Compton

Do you have a URL of your attemps for us to look at? It should take
only a
minute or so to determine the flaws in your thinking :)

Cheers
Richard.

The flaws in my thinking are probably too many to count, unless you use
base googol.

The site is now up at http://www.finepolishedconcrete.co.nz and I feel
the need to make some disclaimers:

It's a mess - the code is bloated, and it wouldn't come close to
validation in a month of Sundays. However, these details are not
important to my client, so the site serves the purpose of giving him an
OK-looking site, that will serve while I try to teach myself what I need
to know in order to achieve a similar look by hand-coding. That remains
my objective, and I think I should be able to pull it off before too
long, with the help I get from groups like this one.

So, by all means vomit when you see the code, I nearly did, but after
you've recovered, any pointers on how to move down the path of purity to
reach that basic design will be gratefully received.
 
R

rf

Vernon Compton said:
The flaws in my thinking are probably too many to count, unless you use
base googol.

The site is now up at http://www.finepolishedconcrete.co.nz and I feel
the need to make some disclaimers:

It's a mess - the code is bloated, and it wouldn't come close to
validation in a month of Sundays. However, these details are not
important to my client, so the site serves the purpose of giving him an
OK-looking site, that will serve while I try to teach myself what I need
to know in order to achieve a similar look by hand-coding. That remains
my objective, and I think I should be able to pull it off before too
long, with the help I get from groups like this one.

So, by all means vomit when you see the code, I nearly did, but after
you've recovered, any pointers on how to move down the path of purity to
reach that basic design will be gratefully received.

Ouch. Flaws detected :)

Ditch Namo. Right now.

Start again from scratch.



Really.



I looked at you opening page and thought... Hmmm, yes, this has been
produced by a so called wysiwyg. Then I looked at the code...Aaarrrgggg.

Hmmm. How to start... Well, for a start just simply open notepad or whatever
and type in your content. Then type in the <img> elements that you require.
Then type in the <ol> element for your navigation, with the appropriate <a>
elements. Use CSS to add flavour to taste.

The whole page will be about 100 lines, not the thousands Nemo has burped
out for you.

BTW loose ALL of that javascript (Nemo generated I presume). It is not
required. Loose the nasty backgrounds under your nav buttons, the ones that
make the text unreadable. Then again don't use images at all, use CSS to
flavour the buttons.

Use black text on white. White on black is hard to read and went out of
vouge when MS/DOS was superseded.

At the moment your page looks just like most of the other 100 million pages
out there. With a little work on your part and references back here for
critique it can become one of the few thousands :)

As to your positioning, here is an example of what I spoke about previously:

http://users.bigpond.net.au/rf/test/concrete.jpg

Cheers
Richard.
 
A

Adrian Wood

Use black text on white. White on black is hard to read and went out of
vouge when MS/DOS was superseded.

Not 100% certain I agree here. People often forget that a monitor isn't a
piece of paper, and a looking at a mainly white screen is like staring at a
lightbulb; a black background, when done right, can make the whole thing a
lot easier on the eyes, which is important for anyone using the computer for
more than half an hour or so at a time.

Supposedly, yellow on black is easiest to read without killing the eyeballs.
 
W

William Tasso

Adrian said:
...
Supposedly, yellow on black is easiest to read without killing the
eyeballs.

interesting - do you have references to support that?
 
S

Sharon

Use black text on white. White on black is hard to read and went out of
Not 100% certain I agree here. People often forget that a monitor isn't a
piece of paper, and a looking at a mainly white screen is like staring at a
lightbulb; a black background, when done right, can make the whole thing a
lot easier on the eyes, which is important for anyone using the computer for
more than half an hour or so at a time.
Supposedly, yellow on black is easiest to read without killing the
eyeballs.

I wanted to ask others what they have read or heard about website
presentation and the visual impaired. I have several people on my cancer
group who are not blind, therefore they do not have a reader. Their sight
is impaired, so they need to expand my pages into large text. I was always
told that a white background is easier on the visually impaired. Does
anyone here have information about this topic?

Take Care, Sharon
 
T

Toby A Inkster

Adrian said:
Supposedly, yellow on black is easiest to read without killing the eyeballs.

From what I've heard, this depends muchly on the environment.

In dark rooms, amber on black and green on black are very readable. This
is why you'll find most text terminals and older PCs default to these
colours.

In light offices, black on off-white is the way to go.

If in doubt, offer your users the choice. :)
 
S

Sid Ismail

On Tue, 2 Mar 2004 08:50:49 +1100, Mark Parnell

: On Mon, 01 Mar 2004 18:38:14 +0000, Toby A Inkster
: <[email protected]> declared in
: alt.html,alt.html.webedit:
:
: > In light offices, black on off-white is the way to go.
:
: I have my system set to black on yellow, and I find it quite good. :)


Mine's black on very light blue (F0F9FF). Also nice to the eye.

Sid
 
A

Adrian Wood

William Tasso said:
interesting - do you have references to support that?

I actually didn't, it's just something I'd heard a few times... so, I
embarked upon a none-epic journey of the web in search of answers.

http://maddox.xmission.org/c.cgi?u=faq
"your monitor is not a piece of paper, no matter how hard you try to make it
one."

http://www.webwhirlers.com/colors/combining.asp
"Black text on a white background has the highest readability. Black and
yellow is another combination which usually has a high readability"

http://www.gremlins.com/donal_buckley/oils.html
"The two most visually complementary colour from a human vision standpoint
are black and yellow."

http://www.tinhat.com/usability/colour.html
"I've recently heard an optician say that full 100% contrast is not the
easiest for people to read, and black text on a coloured background is
significantly easier"

Seems like it's a good idea to use yellow with black, but it's OK whether
you choose to use yellow as the font or backing colour. Personally, I just
try to keep the screen as dark overall as realistically possible, but that's
just me!

Incidentally, I might as well spin this off as a quick query; I have a
mobile-optimised website that I've designed to be as simple and compatible
as possible, so I've avoided any changes of colouring. Does anyone know if
there's even a remote possibility that it might break compatibility with
certain browsers if I do change the colour scheme?
http://www.shellprompt.co.uk/~slayer/index.html For reference. (My first
website, so forgive me if it doesn't match up with how it should be done!)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,766
Messages
2,569,569
Members
45,042
Latest member
icassiem

Latest Threads

Top