Re: mixed widths and positioning

#1

In article Brian wrote:

Quote:

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]

Quote:

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.

Quote:

Have I painted myself into a corner?

Seems to. I can't think any neat and clean solution.

Quote:

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.

#2

In article Lauri Raittila wrote:

Quote:

#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.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Re: mixed widths and positioning

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

Re: mixed widths and positioning - 11-14-2003 , 09:44 AM

Re: mixed widths and positioning - 11-14-2003 , 10:36 AM