Stylesheets - Simple question - positioning DIVs to flow properly

Author

Simple question - positioning DIVs to flow properly

2005-10-25, 3:27 am

Hello

I have a (fairly) simple layout, part of which you folks so kindly helped
me with already (thank you all). This layout contains:

- A header area (100% width across top)

- A nav area (left side of page, vertically)

- A body area (All space to the right of the nav)

- A footer area (100% across bottom, below nav & body)

http://www.dorseygraphics.com/revie...t/pagetemplate/

http://www.dorseygraphics.com/revie...agetemplate/css
/styles.css

This seems like a simple layout. I have 2 questions:

- The nav area, along the left side of the window, needs to be 350 pixels
tall, and it needs to expand beyond that if the content fills it beyond 350.
How do I set this up? Right now, it just shrinks to whatever the size is of
the content that fills it.

- The body area - How do I get this DIV to live on the right side of the
Nav, and also to fill up the remainder of the page that the nav area does
not fill? The nav DIV is 190px wide. I'd like the body DIV to live at its
right, filling up the remainder of the page's width (100% of the page, minus
190 pixels). I have no idea how to do this.

Any input is appreciated. My code is not clean or optimized yet, but it's
getting there. I hope that I am a good CSS designer in the making ;)

Thanks,

-----------------Steve

2005-10-25, 3:27 am

The page SHOULD look like this JPEG:

http://www.dorseygraphics.com/revie...agetemplate/1d.
jpg

Thanks,

------------Steve

Gus Richter

2005-10-25, 6:27 am

S wrote:
> The page SHOULD look like this JPEG:
>
> http://www.dorseygraphics.com/revie...agetemplate/1d.
> jpg
>
> Thanks,
>
> ------------Steve
>

First, float "nav" left. Then, float "pallette" right. Then, allow
"body" to flow between the two (HTML and CSS adjustments).

If the "body" material extends below pallette", it will wrap around it.
Likewise, if the "body" material extends below "nav", it will wrap
around it as well. If this is not desired, apply margin-right:130px;
(width of "pallette") and margin-left:190px; (width of .nav) to "body".

--
Gus

kchayka

2005-10-25, 6:42 pm

S wrote:
>
> http://www.dorseygraphics.com/revie...t/pagetemplate/
>
> - The nav area, along the left side of the window, needs to be 350 pixels
> tall,

And how did you arrive at that number? If it is based on using a
particular font size, it is a gross miscalculation.

Your specified font-size:11px is far too small for my reading pleasure.
Fortunately, I set my browser minimum font size to something way more
tolerable, which is more than 50% larger than your choice. Thus, your
350 pixels has no meaning whatsoever.

> Any input is appreciated. My code is not clean or optimized yet, but it's
> getting there. I hope that I am a good CSS designer in the making ;)

You need to get out of the print mindset and start seeing web media for
what it is: flexible and adaptable, adjusting to varying browsing
environments by nature. This is a strength to be exploited, not a
weakness to try to subdue. You'll have a lot less frustration, and end
up with better results, if you concede to that.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

2005-10-25, 6:42 pm

The 350px height is needed to ensure that the background image for the nav
area shows up completely. As for the font size, that was established by this
company's corporate guidelines long before I ever started this project. I
doubt they ever considered people who are sight-impaired or who do not enjoy
small type when they wrote their guidelines.

I, for one, LOVE small type on a page. I love to be presented with as much
data on my three monitors as I can get my hands on. I run 3 1600x1200
screens, and the type gets pretty small. I occasionally test pages with the
type at larger sizes, but I mostly leave that decision for the individual
viewer, as they have final say as to how their browser can re-interpret text
styles and sizing.

The site I am building is for a very specific audience, and only 1 or 2
pages will live on the internet. The rest will live behind a secure server
with restricted access. The people who view these pages number in the tens,
and they are all running current browsers and modern screens. It's a real
treat to develop for a narrow audience, no worries about MSIE5 or Netscape
6! ;)

Thanks again,

----------------S

On 10/25/05 8:03 AM, in article 3s6vrjFmcndlU1@individual.net, "kchayka"
<usenet@c-net.us> wrote:

> S wrote:
>
> And how did you arrive at that number? If it is based on using a
> particular font size, it is a gross miscalculation.
>
> Your specified font-size:11px is far too small for my reading pleasure.
> Fortunately, I set my browser minimum font size to something way more
> tolerable, which is more than 50% larger than your choice. Thus, your
> 350 pixels has no meaning whatsoever.
>
>
> You need to get out of the print mindset and start seeing web media for
> what it is: flexible and adaptable, adjusting to varying browsing
> environments by nature. This is a strength to be exploited, not a
> weakness to try to subdue. You'll have a lot less frustration, and end
> up with better results, if you concede to that.

'sNiek

2005-10-26, 6:27 am

S schreef:
> The 350px height is needed to ensure that the background image for the nav
> area shows up completely. As for the font size, that was established by this
> company's corporate guidelines long before I ever started this project. I
> doubt they ever considered people who are sight-impaired or who do not enjoy
> small type when they wrote their guidelines.

It's the webdesigners job to point out the differences between print and digital media to the company, and: is
the Company's Logo on top of their building printed in 11px type?

> I, for one, LOVE small type on a page. I love to be presented with as much
> data on my three monitors as I can get my hands on. I run 3 1600x1200
> screens, and the type gets pretty small. I occasionally test pages with the
> type at larger sizes, but I mostly leave that decision for the individual
> viewer, as they have final say as to how their browser can re-interpret text
> styles and sizing.

Just realaize that a lot of people don;t share that love!

>
> The site I am building is for a very specific audience, and only 1 or 2
> pages will live on the internet. The rest will live behind a secure server
> with restricted access. The people who view these pages number in the tens,
> and they are all running current browsers and modern screens. It's a real
> treat to develop for a narrow audience, no worries about MSIE5 or Netscape
> 6! ;)

So if one of those happy few (customers) is sight-impaired you'll get the blame for missing an account worth a
lot of money, just think about that.

--
Niek

Robi

2005-10-26, 7:00 pm

Gus Richter wrote:
> S wrote:

404'd
[color=darkred]
>
> First, float "nav" left. Then, float "pallette" right. Then, allow
> "body" to flow between the two (HTML and CSS adjustments).
>
> If the "body" material extends below pallette", it will wrap around it.
> Likewise, if the "body" material extends below "nav", it will wrap
> around it as well. If this is not desired, apply margin-right:130px;
> (width of "pallette") and margin-left:190px; (width of .nav) to "body".

Also keep in mind that if someone makes the window smaller, the "body" will
shrink away from under the body text.
http://www.w3.org/TR/REC-CSS2/visud...#min-max-widths
has an answer to that.

2005-10-26, 7:00 pm

I re-uploaded the image. I think I accidentally removed it with a file purge
yesterday.

The problem remains. There is white space being added in areas of the
page, and I can't figure out how to get rid of it. People have commented
that MSIE Win may be adding padding. I know of ways to hide CSS from MSIE
Mac, are there ways to hide CSS tags specifically from MSIE Windows? If I
could do this, I could put in some negative values just for that browser and
shore up the page a bit.

The other option is to put in some sort of browser detection script and to
redirect MSIE Win to another CSS doc all together. Is this practical?

As for the min/max width/height issues, I'm just filling in my nav area
with <br> tags to push the DIV down and show the full background image. It's
not the cleanest solution, but it has the following virtues:

- It's easy to do
- It works in all browsers/platforms
- It loads very fast

In my book, that wins. It's a lot less trouble than mucking around with
min-max-widths, especially considering they are not (yet, I hope) supported
in all browsers.

I'll post separately on the text size issue - I don't want this to turn
into a flame thread. Thank you for your help, I do appreciate it, and I'll
return the favor if people ask questions that I feel confident enough
answering.

Any help on the white space issue would be great.

-------------S

On 10/26/05 5:43 AM, in article
1tGdnWsHD_pC5sLenZ2dnUVZ_tKdnZ2d@trueband.net, "Robi" <me@privacy.net>
wrote:

> Gus Richter wrote:
>
> 404'd
>
>
> Also keep in mind that if someone makes the window smaller, the "body" will
> shrink away from under the body text.
> http://www.w3.org/TR/REC-CSS2/visud...#min-max-widths
> has an answer to that.
>
>

Gus Richter

2005-10-26, 7:00 pm

S wrote:
>
> Any help on the white space issue would be great.
>

Get rid of the "titleUnderscore" div.

--
Gus