469,327 Members | 1,219 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,327 developers. It's quick & easy.

3 columns: fixed center column

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/

Nov 26 '05 #1
40 4094
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
Nov 26 '05 #2
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...

Nov 26 '05 #3
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
Nov 26 '05 #4
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.
Nov 26 '05 #5
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

Nov 26 '05 #6
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.
Nov 27 '05 #7
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.

Nov 27 '05 #8
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

Nov 27 '05 #9
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
Nov 27 '05 #10
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.

Nov 27 '05 #11
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
Nov 27 '05 #12
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
Nov 28 '05 #13
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)
Nov 28 '05 #14
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
Nov 28 '05 #15
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

Nov 28 '05 #16
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

Nov 28 '05 #17
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

Nov 28 '05 #18
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/
Nov 28 '05 #19
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
Nov 28 '05 #20
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
Nov 28 '05 #21
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

Nov 28 '05 #22
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)
Nov 29 '05 #23
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
Nov 29 '05 #24
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

Nov 29 '05 #25
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

Nov 29 '05 #26
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
Nov 29 '05 #27
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/
Nov 29 '05 #28
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
Nov 30 '05 #29
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

Nov 30 '05 #30
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
Nov 30 '05 #31
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.
Nov 30 '05 #32
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.

Nov 30 '05 #33
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.

Nov 30 '05 #34
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
Nov 30 '05 #35
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?

Nov 30 '05 #36
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
Nov 30 '05 #37
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

Dec 1 '05 #38
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.
Dec 1 '05 #39
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 :)

Dec 1 '05 #40
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!

Dec 1 '05 #41

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Jennifer | last post: by
13 posts views Thread by scorpion53061 | last post: by
4 posts views Thread by Chuck Foster | last post: by
5 posts views Thread by Abhijeet Kumar | last post: by
2 posts views Thread by Jacksm | last post: by
2 posts views Thread by bgold12 | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by listenups61195 | last post: by
reply views Thread by Purva khokhar | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.