Re: [WSG] positioning 101
Barbara Dozetos wrote: wow, thanks! This teaches me so much! The best resource I've found on how css positioning works is http://www.brainjar.com/css/positioning/ I must have read it through at least 20 times... eventually it starts to stick! -- Kay Smoljak http://kay.smoljak.com * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] positioning 101
Barbara Dozetos wrote: wow, thanks! This teaches me so much! The best resource I've found on how css positioning works is http://www.brainjar.com/css/positioning/ I must have read it through at least 20 times... eventually it starts to stick! -- Kay Smoljak http://kay.smoljak.com * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help * * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] positioning 101
Barb, Try this: http://www.maxdesign.com.au/jobs/css/ppc.htm It is rough as hell and there are many other ways you could do it but it meets your basic needs. Keep in mind that the recent IE's do not support min-width. Russ You have all been so patient and immensely helpful as I've waded through the creation of the new section of our site. Here I go again -- This is probably only going to reveal my total lack of understanding the basics of CSS positioning, but you're such generous teachers, I'm going to just go out on a limb and reveal my ignorance. Here's a sample page: www.pcc.com/benchmark/ The challenge (s): 1) keep the page as 'liquid' as possible 2) make the #navcontainer and #rh-col line up at the top edges, regardless of how deep the #hdr div gets when someone decides to increase font-size. 3) maintain a minimum width on the #rh-col so images that appear in some of the other pages using the same layout don't get messed up. (I think the min-width should be about 450px) I'm getting the feeling that there's something very basic about absolute vs relative positioning that I am just missing. Thanks in advance for all advice. Barb * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] positioning 101
Hi Barbara, For starters, you might remove the min-width from your #id's. Those will keep the page from being as liquid as possible, which you said you want. I realize you don't want images in your #rh-col to overlap or be crunched somehow, but if you target your whole layout to fit a minimum width (say, 760px) rather than specifying a min width in the CSS, you shouldn't have a problem. In other words, check your page on smaller resolutions to make sure content isn't overlapping or breaking rather than trying to set a minimum width. To get your #navcontainer and #rh-col to line up at the top, adjust the #navcontainer's top:115px; attribute and/or the #h-col's top margin until they meet up. Looks like you are getting close! Will Chatham Webmaster Ingles Markets ooOo-o 828.669.2941 - ext.534 www.ingles-markets.com -- * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
Re: [WSG] positioning 101
wow, thanks! This teaches me so much! -- Barbara Dozetos [EMAIL PROTECTED] Physician's Computer CompanyMarketing Team 1 Main St., Ste 7 802-846-5532 Winooski, VT 05404 * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help *
RE: [WSG] positioning 101
-Original Message-
Barbara wrote:
www.pcc.com/benchmark/
The challenge (s):
1) keep the page as 'liquid' as possible
2) make the #navcontainer and #rh-col line up at the top edges,
regardless of how deep the #hdr div gets when someone decides to
increase font-size.
3) maintain a minimum width on the #rh-col so images that appear in some
of the other pages using the same layout don't get messed up. (I think
the min-width should be about 450px)
I'm getting the feeling that there's something very basic about absolute
vs relative positioning that I am just missing.
Thanks in advance for all advice.
Barb
--
Min-width is not a property that IE recognizes so the vast majority of your
users will not have a browser that responds to this attribute.
If you want columns, make columns. For now that is best done with floats.
Use percentages for the width of the floats. The page will flow as the
viewport is shrunk. When it hits the width of the pics or any element it
cannot breakdown you'll get scroll. You can leave the min-width attribute
and it will cause scroll in browsers that recognize it. Either way, the page
will look peculiar but it is likely to still be readable.
Try this kind of css:
.nav{width:24%; float:left;}
.main{width:75%;float:left;} //keep your other attributes including
min-width.
Keep the floats in your body container. Keep the total width of the combined
just below 100% since width calculations get problematic. Be sure to give
both containers a percentage width (as above). Remember to adjust widths to
accommodate margins and padding and borders (they all add to the content
width).
Keep both floats in the body container. You'll need to clear the floats
before you close the body container. If you don't the body container will
contain nothing and you won't see your background. Leave the clear out once
when you test and watch the background disappear.
If you get problems with the floats in IE feel free to liberally sprinkle
clears. It may be unattractive but it's easier to cope with IE's mess that
way. Purist will nitpick over containeritis but it will validate and more
importantly it clears up problems without hacks which may later cause even
more problems. And besides nitpickers do need nits to pick. Keeps them
happy.
The double floats will also keep your columns even at the top. Why not float
the main right? Sometimes IE does strange things with the placement of the
top of the right floated container. Try one left and one right to see what
happens in IE. It might work. If it does your background will show between
the containers.
At some point, IE, Mozilla, Firebird and Opera will look reasonably the
same. At that point you can worry about hacks for Safari and Netscape --
browsers which have miniscule user bases or are in fact developmentally dead
and have decreasing user bases. Or you can decide enough is enough and not
worry about them.
You are very close to what you want. A few tweaks will get it.
Sources:
http://www.positioniseverything.net/
http://css-discuss.incutio.com/
drew
*
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
*
