473,395 Members | 1,624 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,395 software developers and data experts.

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 1695
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: John Topley | last post by:
Hi, I'm trying to create a pure CSS layout using DIVs. I have three DIVs (in one column) down the left hand side of my page, with a ten pixel vertical gap between each of them (the content is on...
4
by: Jane Withnolastname | last post by:
I am trying to re-work an old site by replacing the html with css. On the main page, I have a logo image which I needed centred on the initial screen. I found the solution here:...
14
by: Harlan Messinger | last post by:
What am I not understanding about the definition of { position: absolute; }? "The box's position (and possibly size) is specified with the 'left', 'right', 'top', and 'bottom' properties. These...
1
by: Silky | last post by:
Iam trying to get the green footer div to sit on the bottom of all three divs so as the divs vary in height it sits off the bottom of the lowest one I cannot use absolutes because the three...
1
by: David Ehmer | last post by:
Within divs my pages are rendering with the 2nd and subsequent elements indented slightly. eg the first paragraph, list item or heading is where it should be, all the rest in the div (whether...
7
by: theo | last post by:
Please, Why is this wide 6px border showing up where it is. It's supposed to be at the bottom of the page, inside of base div. I'm positioning wrong, something needs to cleared or x-index...
1
by: no0bodyhome | last post by:
Why am I having so much trouble positioning divs? Am I in a tables mindset here? Why doesn't content flow below or alongside where it is suppose to? I created the example below to give you...
3
by: Rangy | last post by:
Hi, I've decided to take the plunge and move from tables to a pure css layout. I still "think" in tables when I do my layouts and I was wondering the following: I have a simple, standard two...
1
by: Froggluver | last post by:
I have some experience with CSS. Just enough to be dangerous in fact. :) I had a general question about positioning. Is it possible create a box that is absolutely positioned on a page, and then...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

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.