473,320 Members | 2,004 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,320 software developers and data experts.

mixed widths and positioning

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

Jul 20 '05 #1
12 2269
Brian <us*****@julietremblay.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.

Garmt.
Jul 20 '05 #2
Garmt de Vries wrote:
Brian <us*****@julietremblay.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

Jul 20 '05 #3
Garmt de Vries wrote:
Brian <us*****@julietremblay.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>


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

Jul 20 '05 #4
On Wed, 12 Nov 2003 20:01:19 GMT, Brian
<us*****@julietremblay.com.invalid-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/
Jul 20 '05 #5
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:left;width:140px;margin-bottom:10000000em</div>
<DIV ID="content" style="margin-left:9em;">
...
<DIV CLASS="copyright" style="clear:none;">
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.

Jul 20 '05 #6
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

Jul 20 '05 #7
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.

Jul 20 '05 #8
"Brian" <us*****@julietremblay.com.invalid-remove-this-part> a écrit
dans le message de news:iZ6tb.198728$Tr4.568169@attbi_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.
Jul 20 '05 #9
"Brian" <us*****@julietremblay.com.invalid-remove-this-part> schrieb im
Newsbeitrag news:iZ6tb.198728$Tr4.568169@attbi_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
Jul 20 '05 #10
"Stanimir Stamenkov" <s7****@netscape.net> schrieb im Newsbeitrag
news:bo*************@ID-207379.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
Jul 20 '05 #11
Markus Ernst wrote:
"Stanimir Stamenkov" <s7****@netscape.net> schrieb im Newsbeitrag
news:bo*************@ID-207379.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

Jul 20 '05 #12
"Stanimir Stamenkov" <s7****@netscape.net> schrieb im Newsbeitrag
news:bp*************@ID-207379.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
Jul 20 '05 #13

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Lars G. Svensson | last post by:
As a regular ciwas reader, I learned that fixed-pixel designs are evil, so for the newly created site http://www.ddc-deutsch.de (in German, still very much under construction) I arranged the...
1
by: Alan Clark | last post by:
Hello Everyone. I gave up on frames, and now I'm trying to achieve the same navigation with CSS - which is probably not the best idea. I've hit a strange snag. I've positioned a top banner...
17
by: Brian | last post by:
Shame on me for not testing my site http://www.tsmchughs.com/ in MSIE at "larger" font size. I just did today, and found an unpleasant result. The content gets pushed behind the navigation, which...
3
by: Steve Sabljak | last post by:
I seem to having a little trouble getting a table to display correctly in both msie and firefox. I want to set the table and column widths in pixels, and have some cell padding too. The table...
0
by: TJ Talluto | last post by:
<facts> I have a "month calendar" that always displays exactly 42 days... and alongside is a vertical box that displays the detail (form fields) of any particular select event that appears on the...
2
by: saxm-un | last post by:
Hi, I'm just beginning CSS based web development and although I've been bashing away at it since yesterday, I'm still stuck with positioning things on pages. I'm trying to make (in table-speak)...
2
by: Midsomer | last post by:
Hi. I have an Access database with a form containing 4 datasheets and I allow the user to change column widths. On closing the form, a routine is fired that saves each column width to an INI file....
0
by: Stan Brown | last post by:
For some time now, I've been wanting to improve the look of the menus at my site http://www.tc3.edu/instruct/sbrown/stat/ . I like way these two work, opening a submenu when hovering on a...
5
by: Amir Michail | last post by:
Hi, I would like to center a logo between left and right floats with different widths. The issue is that the logo should be centered with respect to the window, not the area between the left...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
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...

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.