mixed widths and positioning

[Brian]

I'm developing a restaurant's website.

http://www.tsmchughs.com/

My template has div#content then div#navigation, which contains an
unordered list of links. I have positioned div#navigation on the left
side using the following:

BODY {
margin-left: 9.6em;
}

#navigation {
position: absolute;
width: 9em;
height: 100%;
top: 0;
bottom: 0;
left: 0;
}

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?

--
Brian
follow the directions in my address to email me

[Garmt de Vries]

Brian <us*****@juliet remblay.com.inv alid-remove-this-part> wrote in message news:<jkwsb.134 066$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.

Garmt.

[Stanimir Stamenkov]

Garmt de Vries wrote:

Brian <us*****@juliet remblay.com.inv alid-remove-this-part> wrote
in message news:<jkwsb.134 066$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

[Brian]

Garmt de Vries wrote:

Brian <us*****@juliet remblay.com.inv alid-remove-this-part> wrote in
message news:<jkwsb.134 066$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>

That's what I have done. But the question is whether I can set an
appropriate width.
You could get into trouble if 9em < 140 px, which depends on the
user's settings.

Exactly. And it seems dangerous simply to hope that 9em < 140px.

--
Brian
follow the directions in my address to email me

[Stephen Poley]

On Wed, 12 Nov 2003 20:01:19 GMT, Brian
<us*****@juliet remblay.com.inv alid-remove-this-part> wrote:

My template has div#content then div#navigation, which contains an
unordered list of links. I have positioned div#navigation on the left
side using the following:

BODY {
margin-left: 9.6em;
}

#navigation {
position: absolute;
width: 9em;
height: 100%;
top: 0;
bottom: 0;
left: 0;
}

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?

Maybe you could float the navigation bar left rather than using absolute
positioning/margins, set the width in pixels and min-width in ems? That
should work for everyone except IE users who have set a larger font size
(and according to certain users of fixed pixel fonts, almost no IE users
know how to adjust their font size anyway ...)

--
Stephen Poley

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

[Lauri Raittila]

In article Brian wrote:

I'm developing a restaurant's website.

http://www.tsmchughs.com/

My template has div#content then div#navigation, which contains an
unordered list of links. I have positioned div#navigation on the left
side using the following:
[snip]
I'd like to add a graphic to div#navigation, a 140px wide gif file.
On top, I assume. What height? If that it won't be taller than heading
on right, you could replace 10000000em with image height and still avoid
strange look and it would be less likely that it would broke something.
Have I painted myself into a corner?
Seems to. I can't think any neat and clean solution.
How can I place the image in
#navigation and be sure that there is adequate space for both the
image and the text links?

Kludge:

#navigation {min-width:140px}

<BODY ID="tsmchugh" style="margin-left:0;">
<div style="float:le ft;width:140px; margin-bottom:10000000 em</div>
<DIV ID="content" style="margin-left:9em;">
...
<DIV CLASS="copyrigh t" style="clear:no ne;">
I do not know if some browser displays white space created by too big
margin, it might cause long empty space. Partially tested on O7.22
I don't know if it is possible to get IE strech right bar to accommodate
image.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Brian]

Stephen Poley wrote:

On Wed, 12 Nov 2003 20:01:19 GMT, Brian wrote:

My template has div#content then div#navigation, which contains an
unordered list of links. I have positioned div#navigation on the left I'd like to add a graphic to div#navigation, a 140px wide gif file.
How can I place the image in
#navigation and be sure that there is adequate space for both the
image and the text links?
Maybe you could float the navigation bar left rather than using absolute
positioning/margins,

<sigh> Yeah, that's looking like my only option. Well, that or not
putting the logo together with the navigation, which seems like the
most logical place. To change it to float, though, I need to move the
navigation to the top of each html file.

I wonder if it's feasible to allow authors to suggest widths as
equations (width: 100% - 9em). Boy, that'd be nice. It'd also be
*years* down the road, if it is even possible.
set the width in pixels and min-width in ems? That
should work for everyone except IE users who have set a larger font size
(and according to certain users of fixed pixel fonts, almost no IE users
know how to adjust their font size anyway ...)

They do present some odd arguments. Regardless of adjusting their
font size, is it not possible for very different initial settings,
dependent on e.g. resolution?

--
Brian
follow the directions in my address to email me

[Lauri Raittila]

In article Lauri Raittila wrote:

#navigation {min-width:140px} I don't know if it is possible to get IE strech right bar to accommodate
image.

But of course you can use bacground image that has 140px wide green area.

More elegant code would be putting logo before content and floating it
left instead of dummy div, and then adding it as fixed background image
to positioned sidebar. Or positioning sidebar bottom of logo absolutely
(fixed could not work.)

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

[Andreas Keil]

"Brian" <us*****@juliet remblay.com.inv alid-remove-this-part> a écrit
dans le message de news:iZ6tb.1987 28$Tr4.568169@a ttbi_s03...

I wonder if it's feasible to allow authors to suggest widths as
equations (width: 100% - 9em). Boy, that'd be nice. It'd also be
*years* down the road, if it is even possible.

I stongly support this point! I have the problem, that I want to
construct a absolute positioned navigation bar with an em width and px
borders. So, up to now, it seems impossible for me to absolutely
position the content box so that the edges are exactly aligned, because
I'd need sth. like
left: 20em+2px;

--
Andreas
To reply via e-mail, please remove the fruit and the ".invalid" top
level domain from my address.

[Markus Ernst]

"Brian" <us*****@juliet remblay.com.inv alid-remove-this-part> schrieb im
Newsbeitrag news:iZ6tb.1987 28$Tr4.568169@a ttbi_s03...

I wonder if it's feasible to allow authors to suggest widths as
equations (width: 100% - 9em). Boy, that'd be nice. It'd also be
*years* down the road, if it is even possible.

You've got the point. It would not only be nice but - in combination with
the W3C box model which makes it impossible to for example use a width of
100% with a padding or a border - it actually would be a must. That's my
problem with standards complying HTML/CSS: If an easy everyday task as
combining a logo with the rest of the page is such a big problem, the
standards seem to be not good enough.

--
Markus