473,546 Members | 2,644 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 1703
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

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

Similar topics

6
3832
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 the right). At the moment these DIVs are all using absolute positioning, with dimensions and co-ordinates specified in pixels. How can I make it so...
4
2690
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: http://www.wpdfd.com/editorial/wpd0103.htm#toptip (the second example) The problem is, under the image is a large table. But using the above positioning, now the...
14
2458
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 properties specify offsets with respect to the box's containing block." Please take a look at http://gavelcade.com/abspos.html and help me...
1
1773
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 colum are dynamically driven maybe Iam missing something really simple? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"...
1
1653
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 they are img, h2, p, li etc) are indented a small amount. If you have IE5.2Mac see the link below for an example of this. Note these divs mostly...
7
1854
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 specified, or something. HELP??? http://wholives.com/temp/cssr.htm Thanks,
1
1845
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 some idea of what I mean. Please keep in mind, content is within the specified width and may be images or text. For some reason it just seems to have...
3
1885
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 column layout: header nav content
1
1458
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 place boxes inside of that that are relatively positioned, so that they flow with the page? I am aware absolute is just that - absolute, and I know...
0
7504
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7694
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
7947
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7461
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
7792
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
3491
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3470
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1921
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
1
1046
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.