3 columns: fixed center column

[Mark]

Hello

i like to make the following lay out:

- 3 columns
- center column = fixed width
- left and right columns are not fixed and must take all the available
space there is left.
- left column has a background picture
- right column has another background picture

So the left and right column are fluid and the width wil change when the
browser window width is changing.

I don't know how to do this. Anyone?

Here is some code:

http://www.keyone.nl/temp/

[Spartanicus]

Mark <sc*****@xs4all.nl> wrote:

i like to make the following lay out:

- 3 columns

http://www.google.com/search?q=3+column+css+layout

--
Spartanicus

[Mark]

Spartanicus wrote:

Mark <sc*****@xs4all.nl> wrote:

i like to make the following lay out:

- 3 columns

http://www.google.com/search?q=3+column+css+layout

As i stated, i want to to have two fluid columns left and right and 1
fixed in the middle. Also i have backgroun images (1px width) and these
have to fill out the two columns, left and right. I do not know how to
do that too.

I can not find the solution. It is all about fixed columns left and
right and a fluid one in the middle...

[Spartanicus]

Mark <sc*****@xs4all.nl> wrote:

i like to make the following lay out:

- 3 columns

http://www.google.com/search?q=3+column+css+layout

As i stated, i want to to have two fluid columns left and right and 1
fixed in the middle. Also i have backgroun images (1px width) and these
have to fill out the two columns, left and right. I do not know how to
do that too.

I can not find the solution. It is all about fixed columns left and
right and a fluid one in the middle...

Plenty of those to be found using the provided link, use it.

--
Spartanicus

[kchayka]

Mark wrote:

i like to make the following lay out:

- 3 columns
- center column = fixed width
- left and right columns are not fixed and must take all the available
space there is left.
Hmmm... what do you expect to happen when the window isn't wide enough
for the fixed width column, let alone 3 columns?
Here is some code:

http://www.keyone.nl/temp/

This seems a good example of the drawbacks. In my usual window width
(often 800px or less) there is no room available for side columns at
all. Put some content in your test page and see what happens in
different window and text sizes. You might not like it.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Mark]

kchayka wrote:

Mark wrote:

i like to make the following lay out:

- 3 columns
- center column = fixed width
- left and right columns are not fixed and must take all the available
space there is left.

Hmmm... what do you expect to happen when the window isn't wide enough
for the fixed width column, let alone 3 columns?

Here is some code:

http://www.keyone.nl/temp/

This seems a good example of the drawbacks. In my usual window width
(often 800px or less) there is no room available for side columns at
all. Put some content in your test page and see what happens in
different window and text sizes. You might not like it.

What i want to know is how to get my 1px images in both side columns to
show up and take all the space there is left.
The rest is working all right basically, but i don't know how to get the
result i want.

Mark

[kchayka]

Mark wrote:

http://www.keyone.nl/temp/

What i want to know is how to get my 1px images in both side columns to
show up and take all the space there is left.

It seems to me that you don't really want 3 columns at all, you just
want a background. You can easily do this with some nested divs, rather
than separate divs for the space on either side of the content area. And
it's pretty much a waste to use a 1px image for a background. Use the
background-color property instead.

<div>
<div class="content"></div>
</div>

Set the background of content's container. Nest another div if need be
and/or use borders on the content to get different spacing effects.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Mark]

kchayka wrote:

Mark wrote:

http://www.keyone.nl/temp/

What i want to know is how to get my 1px images in both side columns to
show up and take all the space there is left.

It seems to me that you don't really want 3 columns at all, you just
want a background. You can easily do this with some nested divs, rather
than separate divs for the space on either side of the content area. And
it's pretty much a waste to use a 1px image for a background. Use the
background-color property instead.

<div>
<div class="content"></div>
</div>

Set the background of content's container. Nest another div if need be
and/or use borders on the content to get different spacing effects.

What i want is on the left and right an image. This image is 100px high
and 1px width. So it is not about the color. Because the left and right
are different images, i like to know how to do this.

[Mark]

Spartanicus wrote:

Mark <sc*****@xs4all.nl> wrote:

i like to make the following lay out:

- 3 columns

http://www.google.com/search?q=3+column+css+layout

As i stated, i want to to have two fluid columns left and right and 1
fixed in the middle. Also i have backgroun images (1px width) and these
have to fill out the two columns, left and right. I do not know how to
do that too.

I can not find the solution. It is all about fixed columns left and
right and a fluid one in the middle...

Plenty of those to be found using the provided link, use it.

I don't think you understand my question. It is not about 3 columns, but
about the width of the side columns and how to get a image in these side
columns which strech:

column with streched image | content column | column with streched image

[Spartanicus]

Mark <sc*****@xs4all.nl> wrote:

I don't think you understand my question.
I understood the question you posted just fine.
It is not about 3 columns
The question you posted was.
, but
about the width of the side columns
div.column{width:12em}
and how to get a image in these side
columns which strech:

column with streched image | content column | column with streched image

Background images can't be stretched with CSS 2.x, only tiled.

--
Spartanicus

[Mark]

Spartanicus wrote:

Mark <sc*****@xs4all.nl> wrote:

I don't think you understand my question.

I understood the question you posted just fine.

It is not about 3 columns

The question you posted was.

, but
about the width of the side columns

div.column{width:12em}

and how to get a image in these side
columns which strech:

column with streched image | content column | column with streched image

Background images can't be stretched with CSS 2.x, only tiled.

My english may be not that good that i get my question right i guess.

I meant "It is not about the 3 columns". Forgot "the".

My question:
<q>
- 3 columns
- center column = fixed width
- left and right columns are not fixed and must take all the available
space there is left.
- left column has a background picture
- right column has another background picture
</q>

And especially this part: "must take all the available space there is
left." And must contain the tiled background picture (100px high, 1 px
width). So width:12em does not do what i want.

[Spartanicus]

Mark <sc*****@xs4all.nl> wrote:

My question:
<q>
- 3 columns
- center column = fixed width
- left and right columns are not fixed and must take all the available
space there is left.
- left column has a background picture
- right column has another background picture
</q>

And especially this part: "must take all the available space there is
left." And must contain the tiled background picture (100px high, 1 px
width). So width:12em does not do what i want.

I'm still not sure what you want, after having looked at your demo I'm
guessing that what you actually want is to create a masthead.

Based on my best guess, see if this works for you:
http://homepage.ntlworld.ie/spartanicus/keyone.htm

--
Spartanicus

[Gus Richter]

Mark wrote:

kchayka wrote:

Mark wrote:

> http://www.keyone.nl/temp/
What i want to know is how to get my 1px images in both side columns
to show up and take all the space there is left.

It seems to me that you don't really want 3 columns at all, you just
want a background. You can easily do this with some nested divs, rather
than separate divs for the space on either side of the content area. And
it's pretty much a waste to use a 1px image for a background. Use the
background-color property instead.

<div>
<div class="content"></div>
</div>

Set the background of content's container. Nest another div if need be
and/or use borders on the content to get different spacing effects.

What i want is on the left and right an image. This image is 100px high
and 1px width. So it is not about the color. Because the left and right
are different images, i like to know how to do this.

I had a go since nobody else had a suggestion.

First, I rearranged the html so that "container" came first.
Then, what I fudged is to position the banner absolutely with left:10%;
since the banner has a fixed width.
Then I gave left and right div a random width of 20% each and floated
each left and right respectively.
This way the banner overlays the left and right divs' horizontally tiled
background images and limited flex is provided.

Subsequent material will have to include a clear:both; and/or additional
top margin in order to be decently positioned below the extended banner
image.

--
Gus

[Jim Moe]

Mark wrote:

i like to make the following lay out:

So the left and right column are fluid and the width wil change when the
browser window width is changing.

I don't know how to do this. Anyone?

Basically there is no way to do that. Not with floats. Either fix the
width of all the columns or make them all fluid.
For the floated columns to have more than one pixel width you must
supply a percentage width, a percentage of the viewport. Since the center
column is fixed, either there is a gap between the end columns and the
center, or the columns wrap because there is no space in a single row.

You have not told us *why* you require this odd layout. That would help
us offer a reasonable alternative.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Gus Richter]

Gus Richter wrote:

Mark wrote:

kchayka wrote:

Mark wrote:

>> http://www.keyone.nl/temp/
>
>
>
What i want to know is how to get my 1px images in both side columns
to show up and take all the space there is left.


It seems to me that you don't really want 3 columns at all, you just
want a background. You can easily do this with some nested divs, rather
than separate divs for the space on either side of the content area. And
it's pretty much a waste to use a 1px image for a background. Use the
background-color property instead.

<div>
<div class="content"></div>
</div>

Set the background of content's container. Nest another div if need be
and/or use borders on the content to get different spacing effects.

What i want is on the left and right an image. This image is 100px
high and 1px width. So it is not about the color. Because the left and
right are different images, i like to know how to do this.

I had a go since nobody else had a suggestion.

First, I rearranged the html so that "container" came first.
Then, what I fudged is to position the banner absolutely with left:10%;
since the banner has a fixed width.
Then I gave left and right div a random width of 20% each and floated
each left and right respectively.
This way the banner overlays the left and right divs' horizontally tiled
background images and limited flex is provided.

Subsequent material will have to include a clear:both; and/or additional
top margin in order to be decently positioned below the extended banner
image.

I put it up on a web space here to show that it can be done, using
floats, and for those that could not understand my writings:
<http://www.home.golden.net/~richterf/keyonemark/keyoneMark_x.htm>

(I used top padding instead of top margin for subsequent material.)

--
Gus

[Mark]

Spartanicus wrote:

Mark <sc*****@xs4all.nl> wrote:

My question:
<q>
- 3 columns
- center column = fixed width
- left and right columns are not fixed and must take all the available
space there is left.
- left column has a background picture
- right column has another background picture
</q>

And especially this part: "must take all the available space there is
left." And must contain the tiled background picture (100px high, 1 px
width). So width:12em does not do what i want.

I'm still not sure what you want, after having looked at your demo I'm
guessing that what you actually want is to create a masthead.

Based on my best guess, see if this works for you:
http://homepage.ntlworld.ie/spartanicus/keyone.htm

A masthead it is! Thanks, this did work out.

So far i have this result: http://www.keyone.nl/temp/site05/

The content is scale-able. Also the pictures are scale-able.
I want the left and right picture also scale-able (if possible), but for
now: thanks.

Mark

[Mark]

Gus Richter wrote:

Gus Richter wrote:

Mark wrote:

kchayka wrote:

Mark wrote:

>>> http://www.keyone.nl/temp/
>>
>>
>>
>>
> What i want to know is how to get my 1px images in both side
> columns to show up and take all the space there is left.

It seems to me that you don't really want 3 columns at all, you just
want a background. You can easily do this with some nested divs, rather
than separate divs for the space on either side of the content area.
And
it's pretty much a waste to use a 1px image for a background. Use the
background-color property instead.

<div>
<div class="content"></div>
</div>

Set the background of content's container. Nest another div if need be
and/or use borders on the content to get different spacing effects.
What i want is on the left and right an image. This image is 100px
high and 1px width. So it is not about the color. Because the left
and right are different images, i like to know how to do this.

I had a go since nobody else had a suggestion.

First, I rearranged the html so that "container" came first.
Then, what I fudged is to position the banner absolutely with
left:10%; since the banner has a fixed width.
Then I gave left and right div a random width of 20% each and floated
each left and right respectively.
This way the banner overlays the left and right divs' horizontally
tiled background images and limited flex is provided.

Subsequent material will have to include a clear:both; and/or
additional top margin in order to be decently positioned below the
extended banner image.

I put it up on a web space here to show that it can be done, using
floats, and for those that could not understand my writings:
<http://www.home.golden.net/~richterf/keyonemark/keyoneMark_x.htm>

(I used top padding instead of top margin for subsequent material.)

Thanks. I have used Spartanicus' solution for now.
Now the content stays in the middle.

Mark

[Mark]

Jim Moe wrote:

Mark wrote:

i like to make the following lay out:

So the left and right column are fluid and the width wil change when
the browser window width is changing.

I don't know how to do this. Anyone?

Basically there is no way to do that. Not with floats. Either fix the
width of all the columns or make them all fluid.
For the floated columns to have more than one pixel width you must
supply a percentage width, a percentage of the viewport. Since the
center column is fixed, either there is a gap between the end columns
and the center, or the columns wrap because there is no space in a
single row.

You have not told us *why* you require this odd layout. That would
help us offer a reasonable alternative.

This is what i want:

http://www.keyone.nl//temp/site05/

Spartanicus helped me out. Now i like to have all the content
scale-able. The main content works out all right, now the left and
right side and then i am more than happy :0) I'll work on that.

Mark

[Stephen Poley]

On Sun, 27 Nov 2005 20:09:34 +0100, Mark <sc*****@xs4all.nl> wrote:

kchayka wrote:

It seems to me that you don't really want 3 columns at all, you just
want a background. You can easily do this with some nested divs, rather
than separate divs for the space on either side of the content area. And
it's pretty much a waste to use a 1px image for a background. Use the
background-color property instead.

<div>
<div class="content"></div>
</div>

Set the background of content's container. Nest another div if need be
and/or use borders on the content to get different spacing effects.

What i want is on the left and right an image. This image is 100px high
and 1px width. So it is not about the color. Because the left and right
are different images, i like to know how to do this.

I tried to knock up a very quick attempt. I think this is approximately
what you're looking for:

http://www.xs4all.nl/~sbpoley/misc/backgrtest.html

Worked in Opera at the first attempt, but sadly not in either IE or
Firefox. Not sure what the problem is - any suggestions?

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Gus Richter]

Mark wrote:

Gus Richter wrote:

Gus Richter wrote:

Mark wrote:

kchayka wrote:

> Mark wrote:
>
>>>> http://www.keyone.nl/temp/
>>>
>>>
>>>
>>>
>>>
>> What i want to know is how to get my 1px images in both side
>> columns to show up and take all the space there is left.
>
>
>
>
>
>
> It seems to me that you don't really want 3 columns at all, you just
> want a background. You can easily do this with some nested divs,
> rather
> than separate divs for the space on either side of the content
> area. And
> it's pretty much a waste to use a 1px image for a background. Use the
> background-color property instead.
>
> <div>
> <div class="content"></div>
> </div>
>
> Set the background of content's container. Nest another div if need be
> and/or use borders on the content to get different spacing effects.
>

What i want is on the left and right an image. This image is 100px
high and 1px width. So it is not about the color. Because the left
and right are different images, i like to know how to do this.
I had a go since nobody else had a suggestion.

First, I rearranged the html so that "container" came first.
Then, what I fudged is to position the banner absolutely with
left:10%; since the banner has a fixed width.
Then I gave left and right div a random width of 20% each and floated
each left and right respectively.
This way the banner overlays the left and right divs' horizontally
tiled background images and limited flex is provided.

Subsequent material will have to include a clear:both; and/or
additional top margin in order to be decently positioned below the
extended banner image.

I put it up on a web space here to show that it can be done, using
floats, and for those that could not understand my writings:
<http://www.home.golden.net/~richterf/keyonemark/keyoneMark_x.htm>

(I used top padding instead of top margin for subsequent material.)

Thanks. I have used Spartanicus' solution for now.
Now the content stays in the middle.

It is the one I would choose as well, although mine stays with the float
concept and accomplishes the same. As they say, "there are many ways to
skin a cat".

--
Gus

[Spartanicus]

Mark <sc*****@xs4all.nl> wrote:

Based on my best guess, see if this works for you:
http://homepage.ntlworld.ie/spartanicus/keyone.htm

A masthead it is! Thanks, this did work out.

So far i have this result: http://www.keyone.nl/temp/site05/

The content is scale-able. Also the pictures are scale-able.

Resize images with your graphics editor and code them with their natural
size in the HTML, don't use HTML or CSS to get the browser to resize
them. Browsers do a poor job at resizing, the graphics looks quite ugly
now.

Your masthead alignment is also messed up now:
http://homepage.ntlworld.ie/spartanicus/keyone.png

--
Spartanicus

[Mark]

Spartanicus wrote:

Mark <sc*****@xs4all.nl> wrote:

Based on my best guess, see if this works for you:
http://homepage.ntlworld.ie/spartanicus/keyone.htm

A masthead it is! Thanks, this did work out.

So far i have this result: http://www.keyone.nl/temp/site05/

The content is scale-able. Also the pictures are scale-able.

Resize images with your graphics editor and code them with their natural
size in the HTML, don't use HTML or CSS to get the browser to resize
them. Browsers do a poor job at resizing, the graphics looks quite ugly
now.

Your masthead alignment is also messed up now:
http://homepage.ntlworld.ie/spartanicus/keyone.png

Yep, that is a problem. But i like to build a zoom-layout. But i am
still not sure if i go on on that. The masthead alignemtn is indeed
messed up now, so i have to make a choice: try to get the alignement
right, or don't build a zoom-layout like this.

Mark

[Jim Moe]

Mark wrote:

You have not told us *why* you require this odd layout. That would
help us offer a reasonable alternative.

This is what i want:
http://www.keyone.nl//temp/site05/

Spartanicus helped me out. Now i like to have all the content
scale-able. [...]

How about this: <http://twosohnens.us/test/t.html>.
Because of the fixed width padding and border, content_rechts
eventually wraps below content_links. But the viewport has to be fairly
narrow before that happens.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Spartanicus]

Mark <sc*****@xs4all.nl> wrote:

So far i have this result: http://www.keyone.nl/temp/site05/

But i like to build a zoom-layout.

There is no point in having the logo image resize if you want a layout
that accommodates user text zooming (I assume that's what you mean by
"zoom-layout").

The current logo graphic is perfect for building a masthead whose width
varies depending on the user's text settings:
http://homepage.ntlworld.ie/spartanicus/keyone2.htm

There's a z-index issue in IE that I couldn't be bothered to work
around, it's left in for you to fix.

--
Spartanicus

[Mark]

Spartanicus wrote:

Mark <sc*****@xs4all.nl> wrote:

So far i have this result: http://www.keyone.nl/temp/site05/

But i like to build a zoom-layout.

There is no point in having the logo image resize if you want a layout
that accommodates user text zooming (I assume that's what you mean by
"zoom-layout").

The current logo graphic is perfect for building a masthead whose width
varies depending on the user's text settings:
http://homepage.ntlworld.ie/spartanicus/keyone2.htm

There's a z-index issue in IE that I couldn't be bothered to work
around, it's left in for you to fix.

Thanks again.

I think i'm going to work on this one indeed. Looks good.
I intended to have all the content "zoomed" like: http://www.gic.nl/
But maybe it is not that good idea after all.

Mark

[Mark]

Jim Moe wrote:

Mark wrote:

You have not told us *why* you require this odd layout. That would
help us offer a reasonable alternative.

This is what i want:
http://www.keyone.nl//temp/site05/

Spartanicus helped me out. Now i like to have all the content
scale-able. [...]

How about this: <http://twosohnens.us/test/t.html>.
Because of the fixed width padding and border, content_rechts
eventually wraps below content_links. But the viewport has to be fairly
narrow before that happens.

Thanks!

I am working on a final one now and all the info was very welcome.

Mark

[Spartanicus]

Mark <sc*****@xs4all.nl> wrote:

I intended to have all the content "zoomed" like: http://www.gic.nl/
But maybe it is not that good idea after all.

Definitely not something to emulate.

--
Spartanicus

[Stephen Poley]

On Mon, 28 Nov 2005 21:15:01 +0100, Stephen Poley
<sb******************@xs4all.nl> wrote:

On Sun, 27 Nov 2005 20:09:34 +0100, Mark <sc*****@xs4all.nl> wrote:

kchayka wrote:

It seems to me that you don't really want 3 columns at all, you just
want a background. You can easily do this with some nested divs, rather
than separate divs for the space on either side of the content area. And
it's pretty much a waste to use a 1px image for a background. Use the
background-color property instead.

<div>
<div class="content"></div>
</div>

Set the background of content's container. Nest another div if need be
and/or use borders on the content to get different spacing effects.

What i want is on the left and right an image. This image is 100px high
and 1px width. So it is not about the color. Because the left and right
are different images, i like to know how to do this.

I tried to knock up a very quick attempt. I think this is approximately
what you're looking for:

http://www.xs4all.nl/~sbpoley/misc/backgrtest.html

Worked in Opera at the first attempt, but sadly not in either IE or
Firefox. Not sure what the problem is - any suggestions?

Now fixed in Firefox, which apparently doesn't like negative z-indices.
IE still isn't co-operating though.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

[Eric Lindsay]

In article <43**************@xs4all.nl>, Mark <sc*****@xs4all.nl>
wrote:

But i like to build a zoom-layout.

I think i'm going to work on this one indeed. Looks good.
I intended to have all the content "zoomed" like: http://www.gic.nl/
But maybe it is not that good idea after all.

I am trying to work out what you mean by "zoomed" in that address?
Does it do something special in some browsers?

--
http://www.ericlindsay.com

[Mark]

Eric Lindsay wrote:

In article <43**************@xs4all.nl>, Mark <sc*****@xs4all.nl>
wrote:

But i like to build a zoom-layout.

I think i'm going to work on this one indeed. Looks good.
I intended to have all the content "zoomed" like: http://www.gic.nl/
But maybe it is not that good idea after all.

I am trying to work out what you mean by "zoomed" in that address?
Does it do something special in some browsers?

If you enlarge your font size ( [ Ctrl ] and mouse wheel (or in menu) ),
the whole site "grows".

Mark

[Eric Lindsay]

In article <43**************@xs4all.nl>, Mark <sc*****@xs4all.nl>
wrote:

>But i like to build a zoom-layout.

I intended to have all the content "zoomed" like: http://www.gic.nl/

I am trying to work out what you mean by "zoomed" in that address?
Does it do something special in some browsers?

If you enlarge your font size ( [ Ctrl ] and mouse wheel (or in menu) ),
the whole site "grows".

Thank you. So you end up with a horizontal scroll bar instead of the
site continuing to fit in your browser viewpoint space. Hmm, I think
Spartanicus was right about it not being such a great idea. Cute
however.

--
http://www.ericlindsay.com

[kchayka]

Mark wrote:

>But i like to build a zoom-layout.

If you enlarge your font size ( [ Ctrl ] and mouse wheel (or in menu) ),
the whole site "grows".

You know, if you leave font sizes at the visitor's default, it is
unlikely they would have any need to zoom in the first place.

Get rid of Verdana as well as silly things like font-size:.55em, which
is completely unreadable for normal folk, especially those of us who
don't have Verdana installed.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Mark]

Eric Lindsay wrote:

In article <43**************@xs4all.nl>, Mark <sc*****@xs4all.nl>
wrote:

>>But i like to build a zoom-layout.
>
I intended to have all the content "zoomed" like: http://www.gic.nl/

I am trying to work out what you mean by "zoomed" in that address?
Does it do something special in some browsers?

If you enlarge your font size ( [ Ctrl ] and mouse wheel (or in menu) ),
the whole site "grows".

Thank you. So you end up with a horizontal scroll bar instead of the
site continuing to fit in your browser viewpoint space. Hmm, I think
Spartanicus was right about it not being such a great idea. Cute
however.

I know people who zoom in very very strong to see something... And yes
then the use this scroll bar.

[Mark]

kchayka wrote:

Mark wrote:

>>But i like to build a zoom-layout.
>

If you enlarge your font size ( [ Ctrl ] and mouse wheel (or in menu) ),
the whole site "grows".

You know, if you leave font sizes at the visitor's default, it is
unlikely they would have any need to zoom in the first place.

Get rid of Verdana as well as silly things like font-size:.55em, which
is completely unreadable for normal folk, especially those of us who
don't have Verdana installed.

I like the Verdana. .55em is readable i guess. Even on a big resolution.
And without Verdana? I don't know. I'll try.

[Beauregard T. Shagnasty]

Mark wrote:

I like the Verdana. .55em is readable i guess. Even on a big
resolution. And without Verdana? I don't know. I'll try.

Easy enough to do, especially with Firefox and the Web Developer's
Toolbar. Open your site, choose: Edit CSS and remove Verdana. This
only shows you what happens and does not alter the css file.
http://chrispederick.com/work/webdeveloper/

Set your body and content to font-size: 100%; and then adjust your own
browser to what you like, and then we will all have our preferred size.
Oh, and set other elements if necessary: h1 { font-size: 160%; } and so
forth.

You're not alone; this is a way-too-common mistake on zillions of sites.

--
-bts
-Warning: I brake for lawn deer

[Mark]

Beauregard T. Shagnasty wrote:

Mark wrote:

I like the Verdana. .55em is readable i guess. Even on a big
resolution. And without Verdana? I don't know. I'll try.

Easy enough to do, especially with Firefox and the Web Developer's
Toolbar. Open your site, choose: Edit CSS and remove Verdana. This
only shows you what happens and does not alter the css file.
http://chrispederick.com/work/webdeveloper/

Set your body and content to font-size: 100%; and then adjust your own
browser to what you like, and then we will all have our preferred size.
Oh, and set other elements if necessary: h1 { font-size: 160%; } and so
forth.

You're not alone; this is a way-too-common mistake on zillions of sites.

Ah, thanks. I see.

But: how many users alter their browser this way i guess?
I mean it is a good idea for sure, but my clients don't know this i am
sure...
So what to do?

[Beauregard T. Shagnasty]

Mark wrote:

Beauregard T. Shagnasty wrote:

Mark wrote:

I like the Verdana. .55em is readable i guess. Even on a big
resolution. And without Verdana? I don't know. I'll try.
Easy enough to do, especially with Firefox and the Web Developer's
Toolbar. Open your site, choose: Edit CSS and remove Verdana. This
only shows you what happens and does not alter the css file.
http://chrispederick.com/work/webdeveloper/

Set your body and content to font-size: 100%; and then adjust your
own browser to what you like, and then we will all have our
preferred size. Oh, and set other elements if necessary: h1 {
font-size: 160%; } and so forth.

You're not alone; this is a way-too-common mistake on zillions of
sites.

Ah, thanks. I see.

You're welcome.
But: how many users alter their browser this way i guess?
Doesn't matter. If you give them their default size - whether or not
they are smart enough to set it from the factory default - you have
fulfilled your job. <g>
I mean it is a good idea for sure, but my clients don't know this i am
sure...
Still doesn't matter. By clients, do you mean the people you're
designing the site for, or the hoped-for visitors? If it's the people
paying you, explain what it all means, tastefully of course, and teach
them how to adjust their own browsers. Read up on Accessibility and
Usability.

If you feel extra good about your visitors, post a page, or a link to
someone else's, about browser/user font settings.

Some of those who don't know how to adjust have told me that when they
get to a site they can't read because of the microfonts, they just hit
the Back button and pick something else. (I usually train them how to
set the sizes then.)

Oh, and practically all of the folks I know with impaired vision
*already* know how to do this. It was a necessity.
So what to do?

See above. :-)

--
-bts
-Warning: I brake for lawn deer

[Mark]

Beauregard T. Shagnasty wrote:

Mark wrote:

Beauregard T. Shagnasty wrote:

Mark wrote:
I like the Verdana. .55em is readable i guess. Even on a big
resolution. And without Verdana? I don't know. I'll try.

Easy enough to do, especially with Firefox and the Web Developer's
Toolbar. Open your site, choose: Edit CSS and remove Verdana. This
only shows you what happens and does not alter the css file.
http://chrispederick.com/work/webdeveloper/

Set your body and content to font-size: 100%; and then adjust your
own browser to what you like, and then we will all have our
preferred size. Oh, and set other elements if necessary: h1 {
font-size: 160%; } and so forth.

You're not alone; this is a way-too-common mistake on zillions of
sites.

Ah, thanks. I see.

You're welcome.

But: how many users alter their browser this way i guess?

Doesn't matter. If you give them their default size - whether or not
they are smart enough to set it from the factory default - you have
fulfilled your job. <g>

I mean it is a good idea for sure, but my clients don't know this i am
sure...

Still doesn't matter. By clients, do you mean the people you're
designing the site for, or the hoped-for visitors? If it's the people
paying you, explain what it all means, tastefully of course, and teach
them how to adjust their own browsers. Read up on Accessibility and
Usability.

If you feel extra good about your visitors, post a page, or a link to
someone else's, about browser/user font settings.

Some of those who don't know how to adjust have told me that when they
get to a site they can't read because of the microfonts, they just hit
the Back button and pick something else. (I usually train them how to
set the sizes then.)

Oh, and practically all of the folks I know with impaired vision
*already* know how to do this. It was a necessity.

So what to do?

See above. :-)

Clear and thanks.
I am going to talk with the people who pay me.

grtz

[kchayka]

Beauregard T. Shagnasty wrote:

Some of those who don't know how to adjust have told me that when they
get to a site they can't read because of the microfonts, they just hit
the Back button and pick something else. (I usually train them how to
set the sizes then.)

I've had the conversation about font sizes and browser defaults with a
fair number of people. Probably half (mostly middle-aged folk) were
pleasantly surprised when they found they could make their default text
size *larger* than the factory setting.

The minimum font size setting in some browsers is extremely useful, too.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[Mark]

kchayka wrote:

Beauregard T. Shagnasty wrote:

Some of those who don't know how to adjust have told me that when they
get to a site they can't read because of the microfonts, they just hit
the Back button and pick something else. (I usually train them how to
set the sizes then.)

I've had the conversation about font sizes and browser defaults with a
fair number of people. Probably half (mostly middle-aged folk) were
pleasantly surprised when they found they could make their default text
size *larger* than the factory setting.

The minimum font size setting in some browsers is extremely useful, too.

Yep, i'm sure. I'm sure that goed here too. I'm afraid that it will me
even more than 50%. So, there is a lot to do :)

[Mark]

Mark wrote:

kchayka wrote:

Beauregard T. Shagnasty wrote:

Some of those who don't know how to adjust have told me that when they
get to a site they can't read because of the microfonts, they just hit
the Back button and pick something else. (I usually train them how to
set the sizes then.)

I've had the conversation about font sizes and browser defaults with a
fair number of people. Probably half (mostly middle-aged folk) were
pleasantly surprised when they found they could make their default text
size *larger* than the factory setting.

The minimum font size setting in some browsers is extremely useful, too.

Yep, i'm sure. I'm sure that goed here too. I'm afraid that it will me
even more than 50%. So, there is a lot to do :)

goed=goes
me=be
.... i go to sleep. I guess that is the best at this moment and continue
tomorrow!