Re: mixed widths and positioning

Brian <usenet1 (AT) julietremblay (DOT) com.invalid-remove-this-part> wrote

I'd like to add a graphic to div#navigation, a 140px wide gif file.
Have I painted myself into a corner? How can I place the image in
#navigation and be sure that there is adequate space for both the
image and the text links?

You can just do:

<div id="navigation">

<img src="foo">

<ul> ...Text links... </ul>

</div>

You could get into trouble if 9em < 140 px, which depends on the user's settings.

Garmt.

Garmt de Vries wrote:

Brian <usenet1 (AT) julietremblay (DOT) com.invalid-remove-this-part> wrote
in message news:<jkwsb.134066$275.396634@attbi_s53>...

I'd like to add a graphic to div#navigation, a 140px wide gif file.
Have I painted myself into a corner? How can I place the image in
#navigation and be sure that there is adequate space for both the
image and the text links?

You can just do:

div id="navigation"

img src="foo"

ul> ...Text links... </ul

/div

You could get into trouble if 9em < 140 px, which depends on the user's settings.

One could try setting 'max-width: 9em' for the image which wouldn't
work everywhere (i.e. IE) but after all we rely on that in most of
the cases 9em would be greater than 140px.

--
Stanimir

"Stanimir Stamenkov" <s7an10 (AT) netscape (DOT) net> schrieb im Newsbeitrag
news:bovu39$1ia4ln$1 (AT) ID-207379 (DOT) news.uni-berlin.de...

One could try setting 'max-width: 9em' for the image

That means resizing the logo which gives very bad display results with
graphics, specially logos.

but after all we rely on that in most of
the cases 9em would be greater than 140px.

I am not sure how an em is calculated; from the typographer's point of view
it should equal the font size. If you calculate 140px/9 you get a minimum
font size of 16 pixels which equals 12 points on 96ppi Windows monitors.
That matches quite a large part of the audience. On Mac systems which
calculate screen resolution of 72ppi you get a minimum font size of 16
points which will be greater than most user settings. So these users will
have a bad display.

That's just an approach as some browsers also handle font sizes differently.

--
Markus

Markus Ernst wrote:

"Stanimir Stamenkov" <s7an10 (AT) netscape (DOT) net> schrieb im Newsbeitrag
news:bovu39$1ia4ln$1 (AT) ID-207379 (DOT) news.uni-berlin.de...

One could try setting 'max-width: 9em' for the image

That means resizing the logo which gives very bad display results with
graphics, specially logos.

but after all we rely on that in most of
the cases 9em would be greater than 140px.

I am not sure how an em is calculated; from the typographer's point of view
it should equal the font size. If you calculate 140px/9 you get a minimum
font size of 16 pixels which equals 12 points on 96ppi Windows monitors.
That matches quite a large part of the audience. On Mac systems which
calculate screen resolution of 72ppi you get a minimum font size of 16
points which will be greater than most user settings. So these users will
have a bad display.

That's just an approach as some browsers also handle font sizes differently.

For your convenience:

img.daImage {
width: 140px;
max-width: 9em;
}

Given the presumption that 9em > 140px on most user systems the
image won't scale larger than 140px therefore there would be no
distortion. When on a particular user system 9em become less than
140px the image will scale down but won't overflow the 9em width
menu container therefore won't cover any important part of the main
document.

--
Stanimir

"Stanimir Stamenkov" <s7an10 (AT) netscape (DOT) net> schrieb im Newsbeitrag
news:bpaks8$1md6qc$1 (AT) ID-207379 (DOT) news.uni-berlin.de...

Given the presumption that 9em > 140px on most user systems the
image won't scale larger than 140px therefore there would be no
distortion. When on a particular user system 9em become less than
140px the image will scale down but won't overflow the 9em width
menu container therefore won't cover any important part of the main
document.

It depends a little on the image but scaling down usually produces bad
results, too. Specially on graphical stuff as type or logos. Imagine a 1
pixel black straight line. It will produce 2 lines of different grey next to
each other if scaled down. Some browsers may handle that better than others,
but there is no control.

--
Markus