Using % instead of px

[Harris Kosmidhs]

OK I have read some docs about fluid layout. The point is to use %
instead of fixed-size staff with px, right?

So for example if I have 3-columns I should define something like this:
..left {width:20%;}
..right {width:10%;}
..center{width:65%;}

But what happens if I have an image on .left for example which let's say
is 250px width. Then I want .left to be at least 250px so that the
picture is shown always. What then? How do I define size?

thanks

[Jukka K. Korpela]

Scripsit Harris Kosmidhs:

OK I have read some docs about fluid layout. The point is to use %
instead of fixed-size staff with px, right?

No, the point is to avoid setting widths, letting browsers select the
widths. Of course, in _some_ cases you might set _some_ width.

So for example if I have 3-columns I should define something like
this: .left {width:20%;}
.right {width:10%;}
.center{width:65%;}

First, your class names are poor. They refer to your intended layout, not to
the meanings of the blocks. Second, you are apparently trying to imitate
frames and waste about 30 % of available width (which might be less than you
imagine) to "navigation". While this is not (yet) judged as a mortal sin,
it's bad practice, and as you realize it one day, you'll realize how poor
the class names like "left" are.

But what happens if I have an image on .left for example which let's
say is 250px width.

It wastes more space than you can afford. So don't put such an image there.

Then I want .left to be at least 250px so that the
picture is shown always. What then? How do I define size?

In _fluid_ layout, you don't. If a block contains an image that is 250
pixels wide, this apparently sets a minimum width for the block, and other
factors probably cause that will also be the maximum width.

If problems recur, post the URL.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Harris Kosmidhs]

Jukka K. Korpela wrote:

>So for example if I have 3-columns I should define something like
this: .left {width:20%;}
.right {width:10%;}
.center{width:65%;}

First, your class names are poor. They refer to your intended layout,
not to the meanings of the blocks. Second, you are apparently trying to
imitate frames and waste about 30 % of available width (which might be
less than you imagine) to "navigation". While this is not (yet) judged
as a mortal sin, it's bad practice, and as you realize it one day,
you'll realize how poor the class names like "left" are.

this was just an example. It's div.left actually.

>But what happens if I have an image on .left for example which let's
say is 250px width.

It wastes more space than you can afford. So don't put such an image there.

again an example. But I have a 450px logo on center column.

>Then I want .left to be at least 250px so that the
picture is shown always. What then? How do I define size?

In _fluid_ layout, you don't. If a block contains an image that is 250
pixels wide, this apparently sets a minimum width for the block, and
other factors probably cause that will also be the maximum width.

so min-width will be set automatically to 250px? So I just do <img
src="logo"??

[Andy Dingley]

Harris Kosmidhs wrote:

OK I have read some docs about fluid layout. The point is to use %
instead of fixed-size staff with px, right?

As a gross simplification.

But what happens if I have an image on .left for example which let's say
is 250px width.

Then a _totally_ fluid layout is inappropriate for you in this case
(this isn't unusual).

min-width is a useful property here to give a robust layout that's
still highly fluid. Of course, guess which browser doesn't support
it....

Other techniques are to start nesting <div>s and fix the widths of the
inners, letting the outers follow percentage sizes, and letting the
browsers fight it out. Generally the results are acceptably good, but
no-one claims they're perfect.

This stuff is hard to do well. I suggest reading the source of some of
the better tutorials out there (try glish.com or bluerobot) and seeing
the issues they've had to deal with.
PS = "left" is fine as a class name, so long as you understand what
you're doing. If you really mean "Get the damned thing onto the left if
at all possible" then it's reasonable. If you can re-state it more
generally as "where the major nav menu lives" then it might be better
to give it a class name like that. Remember that sometimes your "left"
is going to find itself rendered at the top of the page anyway (on my
skinny-screened phone, for instance) -- can you live with this?

Conversely, it's better to have a class called "left" if you're really
using this as a "presentational bucket" <divin the HTML where you
collect all those things you want to force in that direction, whether
they're menus or stock tickers (you might have a further element inside
there that is called "nav-menu"). It's better than having a bucket,
calling it something like <div class="nav-menu">, using the CSS to
float it leftwards, and still having all sorts of baggage in there
that's anything but a nav-menu.

Base your class names on what you're doing with the HTML and what the
_essence_ of how you're using the HTML is. Think about the results of
applying your CSS to them as very much secondary to this. But if the
function of the HTML element is still purely presentational (and
sometimes it just is), then don't be afraid of putting anodyne
presentational names on it.

[Jukka K. Korpela]

Scripsit Harris Kosmidhs:

this was just an example.

Not really. It was just a sketch of a draft of an example. A URL would have
meant giving an example.

And "left" etc. as class names are _bad_ examples. Giving them as examples
means that you really use such names. Really.

It's div.left actually.

The class name there is "left".

>It wastes more space than you can afford. So don't put such an image
there.

again an example. But I have a 450px logo on center column.

Again, a bad sketch of a draft of an example. And eating up 450 pixels means
eating up more than 250 pixels.

so min-width will be set automatically to 250px?

What? The initial value of min-width is 0. But why would that matter?

So I just do <img src="logo"??

Don't. But you might consider doing

<img alt="ACME" src="logo.gif" width="200" height="20">

if you cannot satisfactorily represent the logo as styled text. (Actually,
far too many "logos" on web pages are just text in image format so that the
particular appearance is _not_ the company's established shape for its name
or abbreviation, used consistently in different media. That is, they aren't
logos at all. A _genuine_ logo should probably be presented as an image,
since text styling isn't accurate and reliable enough.)

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Beauregard T. Shagnasty]

Harris Kosmidhs wrote:

Jukka K. Korpela wrote:

>First, your class names are poor. They refer to your intended layout,...

this was just an example. It's div.left actually.

What Jukka is suggesting is that you name the class "navigation" or
maybe "menu" instead of "left".

Use something like "sidebar" instead of "right".
Use something like "content" instead of "center".
If you've a banner ad at the top, call the class "banner" instead of
"top".

This way, if in the future you decide to move the navigation to the top,
or above the sidebar, you won't have a "left" on the right.

Here is a sample of a three-column template:
http://benmeadowcroft.com/webdev/css.../3-column.html

--
-bts
-Motorcycles defy gravity; cars just suck

[dorayme]

In article
<jy*********************@bgtnsc04-news.ops.worldnet.att.net>,
"Beauregard T. Shagnasty" <a.*********@example.invalidwrote:

This way, if in the future you decide to move the navigation to the top,
or above the sidebar, you won't have a "left" on the right.

Here is a sample of a three-column template:
http://benmeadowcroft.com/webdev/css.../3-column.html

OK B, time to fess up. How much do you get per plug for this url?
Is Ben Meadowcroft family? <g>

--
dorayme

[Beauregard T. Shagnasty]

dorayme wrote:

"Beauregard T. Shagnasty" <a.*********@example.invalidwrote:

>This way, if in the future you decide to move the navigation to the top,
or above the sidebar, you won't have a "left" on the right.

Here is a sample of a three-column template:
http://benmeadowcroft.com/webdev/css.../3-column.html

OK B, time to fess up. How much do you get per plug for this url?
Is Ben Meadowcroft family? <g>

$0.00. No, Ben is not family, no idea who he is; I just like his
example.

--
-bts
-Motorcycles defy gravity; cars just suck