473,382 Members | 1,124 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,382 software developers and data experts.

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 4417
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: Dennis | last post by:
In CSS3 it looks like we'll have multiple column flowing of text (newspaper style) in which the number of columns can be determined automatically given the available horizontal space....
7
by: Alex | last post by:
Hi Everone, I need some advice on how to setup 4 columns where the outside two are absolute (120px) and the inner two (side by side) are relevent (Fluid) and change with the screen. Here's my...
1
by: Jennifer | last post by:
I have a datagrid where I am trying to align some columns to the center. The rest should be aligned to the right. When I try the code below I get an error message saying that the index is out of...
13
by: scorpion53061 | last post by:
Very urgent and I am very close but need a little help to get me over the edge........ I need to write these columns to a html file with each row containing these columns (seperated by breaks)....
4
by: Chuck Foster | last post by:
I have a datagrid and I want 3 columns to share the same column header. I have ColID, ColName, and 3 Hyperlink columns that need to have AdminFunctions as their header. Anyone know how to...
5
by: Abhijeet Kumar | last post by:
Hi I am working with ASP.NET2.0, How can i freeze some of the columns of GridView Control. Thanks in Advance.
2
by: Jacksm | last post by:
How can I align an asp:table columns with gridview columns (the widths)? I have tried setting table.column(0).width = gridview.column(0).width at page_load but it doesn't work. Thanks in advance
31
by: Sarita | last post by:
Hello, this might sound stupid, but I got a really nice homepage template which unfortunately is a 3-Column Fixed Width CSS format. Now I don't have any content for the right column and would...
2
by: bgold12 | last post by:
I have a problem that can be simplified to the following: I have a table with three columns. I need the middle column to be fixed width, let's say 100px. The other two columns I want to be variable...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.