468,133 Members | 1,234 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,133 developers. It's quick & easy.

Simple question - positioning DIVs to flow properly

S
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/review.../pagetemplate/

http://www.dorseygraphics.com/review...getemplate/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

Oct 25 '05 #1
10 1525
S
The page SHOULD look like this JPEG:

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

Thanks,

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

Oct 25 '05 #2
S wrote:
The page SHOULD look like this JPEG:

http://www.dorseygraphics.com/review...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
Oct 25 '05 #3
S wrote:

http://www.dorseygraphics.com/review.../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.
Oct 25 '05 #4
S
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 3s************@individual.net, "kchayka"
<us****@c-net.us> wrote:
S wrote:

http://www.dorseygraphics.com/review.../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.


Oct 25 '05 #5
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
Oct 26 '05 #6
Gus Richter wrote:
S wrote:
The page SHOULD look like this JPEG:

http://www.dorseygraphics.com/review...emplate/1d.jpg
404'd

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


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/visude...min-max-widths
has an answer to that.
Oct 26 '05 #7
S
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
1t******************************@trueband.net, "Robi" <me@privacy.net>
wrote:
Gus Richter wrote:
S wrote:
The page SHOULD look like this JPEG:

http://www.dorseygraphics.com/review...agetemplate/1d.
jpg
404'd

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


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/visude...min-max-widths
has an answer to that.


Oct 26 '05 #8
S
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'm a contractor who has alimony to pay and a 2-year-old to raise in the
Silicon Valley with Christmas approaching FAST. It may be my job to point
design flaws out, but it is more my job to make sure I have a check at the
end of the week to feed my daughter and to pay rent. I'll forego a bit of
design excellence if that means that I don't piss off my Client by
questioning his designs. Trust me on this one, you have not met this guy.
It's a good gig, and it makes sense to keep quiet.

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!


I realize that, and those people can use their browser prefs to bump up type
as much as they want. Does Opera still do that cool thing where they also
scale the images with the text? That was cool.

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.


The money I earn is paid by my Client, who honestly does not care about such
things. He also is not paying me to care. That being said, I'll inject as
much concern for the issue as I can, under the circumstances.

Personally, I think that a good layout (i.e. Use of white space, no huge
blocks of run-on text, creative layouts) do a lot more for a site than text
size. Size matters, of course, but I have been to a LOT of sites that use
10, 11, and 12pt text as default, and I have not seen any problems with
readability.

My Dad bought a 17" Powerbook about 6 months ago. Great computer, man! He
immediately reduced the resolution of the screen so that the things that
appeared on it would be bigger. At first, I almost freaked out! I have the
same Powerbook, and I LOVE how I can get so much on the screen. It's GREAT!
And he was defeating the very purpose of paying an extra $300 for that great
big screen. Then I thought about what he was doing. He was adjusting his
equipment to meet his personal needs. The big screen was helping him fit
more on the screen, because it was still more than a 15" screen could fit at
his increased sizes.

I have seen people in this group spouting gospel about how web design is NOT
print design. That is true, to a point. (This is all opinion, by the way).

Magazine layout uses fairly small type as well. Not all periodicals are
available in the "big type" versions that sight-impaired people enjoy so
much. Let's face it, small text is a standard in print, and it's here to
stay. I still have yet to see a preferences pane on the first page of the
Wall Street Journal (GREAT layout, by the way) allowing readers to adjust
type size. Why? Because you just can't do that in print.

But you CAN do that with HTML. Browsers can be set to display text at larger
type sizes for people who need it. I think that's GREAT! The w3 has gone to
great lengths to incorporate standards that facilitate sight-impaired
people. I don't always follow them (I'm learning to as we speak), but it is
great that they have recognized the need.

So when my Dad goes to wsj.com, his Safari prefs are set to display text
much larger than I'd be comfortable with. But it does him just fine.

So I have to ask - is there some elusive coding practice that I am not
employing that will allow my pages to be read by all people equally? Is
there some way for me to code that will more easily allow sight impaired
people to view the content at large type sizes without changing the look of
the site for people like myself? If there is, I'd love to hear about it.
Because as far as I know, the only way to do this without altering a
browser's prefs is to code my page with 18px type, and I won't do that
because it makes pages waaay to ugly.

Perhaps you are alluding to the use of "em" sizing. I have heard that this
may help in the war against visually stringent sites. I have not used em
sizing on my pages, because I do not yet fully understand it. The px is a
unit I know, and I'm new to CSS, so I'm using it. But I'll investigate the
em, and I'll see how much more work it is to integrate.

I agree that it would be stupid to ignore this group of people, but there
are mechanisms in place that allow them to view my content with little or no
hindrance in design and flow. Could I do a better job? You betchya! And I
will, over time. This is an area I'm learning about more every day (and
thank you for enlightening me, by the way). In the mean time, I've got
deadlines to meet, and pages to code.

Take care,

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

Oct 26 '05 #9
S schreef:
I agree that it would be stupid to ignore this group of people, but there
are mechanisms in place that allow them to view my content with little or no
hindrance in design and flow. Could I do a better job? You betchya! And I
will, over time. This is an area I'm learning about more every day (and
thank you for enlightening me, by the way). In the mean time, I've got
deadlines to meet, and pages to code.


Nice to see you took the time to think this one through and yes: the answer lies in using em's as units for
the fontsize.
And not only to facilitate sight-impaired people. When you use em's you use a percentage of the browsers
default fontsize. Handhelds, mobile phones have browser too! And what about text on beamers...


--
Niek
Oct 26 '05 #10
S wrote:

Any help on the white space issue would be great.


Get rid of the "titleUnderscore" div.

--
Gus
Oct 26 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Jane Withnolastname | last post: by
14 posts views Thread by Harlan Messinger | last post: by
1 post views Thread by David Ehmer | last post: by
7 posts views Thread by theo | last post: by
1 post views Thread by gcdp | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.