The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Head, foot, right-nav fixed, fluid content?

I have my site home page working with three columns, spaced by % (adapted from FU2K.org 3Col_NN4_FMFM). The left two columns are actually in one div, so the remaining pages use that div without three total columns. Here is a simplified version of the basic code:www.zepfanman.com/temp/emcol.php

(2) Hide Nav/Show Nav toggle like in SitePoint. I'd really only like this if it's not too complicated. I have yet to work on a "Print" format icon (just a different CSS template?) that I'd like to do for each page, so that might be as good as the Nav toggle.

* I want to be able to fix my CSS document and leave the content .php files the same, i.e. ordered as header, content, nav.

(3 - low priority) The following code seemed to be buggy as it made IE freeze after some font resizing. Is there an easy way to set it up where the fluid layout stops at the point where the browser window is too small to fit the text (eg. depending on the size of the text, if the browser window is, say, less than 600px, the formatting starts to drop all over the page making the content virtually illegible). Min-width:600 equivalent?

All you need to do is add in a footer, and remember to put in clear:both; into it so it stays at the bottom.

Also, you said you wanted fixed width, but gave a percentage-based unit (em). Nonethless, just set it in pixels - width:200px;

2- This is pretty easy, all you're going to have to find some javascript that basically says "when this object is clicked, set this class to my right nav. Then in that additional class put in display:none;

3- unfortunately this isn't supported (semantically) with any method. What I would advices is including a spacer gif (I know, I almost puked) the minimum width. That way your page remains that size when shrunk down to accomidate the wide spacer gif.

I had already fooled with that code and it wasn't working, for some reason. How can I set width:9em when .column-three is currently sized only as margin-left:79% while the main column (.columns-float) is set at float:left; width:79%?

Your hiding script works if you use id's instead of classes for the appropriate columns. They need to be unique anyway.

You could float the right column and give it a width and let the left be fluid but you would have to change the order of the html which I believe you didn't want to do.

Anyway I've put all the above into the file below so you can mess around with it. The columns will hide now and the min-width is applied for ie. (If you copy the format then you can use it for the other expressions that you wanted.)

You could float the right column and give it a width and let the left be fluid but you would have to change the order of the html which I believe you didn't want to do.

Thanks for all the hard work! I did indeed discover that getElementByClass doesn't work.... I'm also bummed that I'd need to reorder my column-three content on all my pages - no other way, eh? I like how it the main content is loaded before the menu (the way I currently have it set up).

Compromises, compromises....

Oh, about the hide nav feature: is there an easy way to set it as a cookie so it stays that way from page to page?

I'll have to work on that next. I've only been able to test the toggle on IE6 so far, which I know isn't good practice, but it's all I have to work on when I'm not at my home PC. I'd like to work out the bugs nonetheless:
(1) On the test toggle page I created (the format identical to all but the home page), my "FULL MENU" header is off-center; it also disappears when the window is resized.

(2) The test toggle page footer isn't laying out right, either.

(3) On the test home page, Hide Nav results in the main content overlapping the header.

I can't make sense of any of the above three changes since all I did was change a couple elements to ID instead of CLASS - and added the columns-wrap ID.

(4) I can't figure out how to float the "Hide/Show Sidebar" link to the right of the header: pathetic, I know.

(5) Somewhat unrelated: can I get the columns to simply stop compressing (creating a horiz. scroll bar) instead of shifting all over the place when the window gets really small?

FYI, I think I'm going to forget about the whole min-width thing as it's kind of pointless. Also, Paul, you might want to edit that one line of long code in half so this page isn't so wide. Thanks again for being patient in working this out with me.

(5) Somewhat unrelated: can I get the columns to simply stop compressing (creating a horiz. scroll bar) instead of shifting all over the place when the window gets really small?

I've already shown you the code to use for this in the expression in my first post . Just use it on the body to keep the whole screen at a set min-width. (Personally I don't see the need as the idea with floats is that they drop down when space is small - but I know some people prefer to fix the width.)

Most of your other issues can be solved if you followed the format of my first post whic corrected all theses issues .

I'll have a look at your home page in a little while and see whats going on.

You need to use the javascript I posted above which sorts out the columns. I'll have to post all the code again so sorry to anybody reading this.

Again, excellent. I didn't realize that you had made other little changes in (at first glance) random classes. That seems to fix just about all the issues for my new nav!

However.... That ALA article is a little confusing as it refers more to a stylesheet file instead of just a couple class changes. Anyone wanna help me out with that code, too (what is a common cookie expiration length)? I've never worked with cookies, so maybe a link to a tutorial would better suit everyone's time.

Also, I just noticed that my "BORED?" section on the home page (bottom left) is a little bit wider than the rest of the column. If I simply cut and paste that section above the "MOST IMPORTANT!" section, it goes back to normal.... Grrrr

Also, I just noticed that my "BORED?" section on the home page (bottom left) is a little bit wider than the rest of the column. If I simply cut and paste that section above the "MOST IMPORTANT!" section, it goes back to normal.... Grrrr

Its because you have placed it outside the column-two-content div.

Find the end of the column-two-content div and stick the section in there.

I've tried it locally and it works fine. You will just have to find the correct closing div

Its because you have placed it outside the column-two-content div. For cookies have a look here for cookies in the javascript section.http://www.quirksmode.org/

Amen. I found the extra DIV that, for some reason, found its way into the MOST IMPORTANT! section. I've been busy the past couple of days, so I probably won't get to mess with the js stuff quite yet. Don't be surprised if I come begging for help again (I'm sure you get way too many PMs to begin with), but I'm going to try to learn about cookies and js more comprehensively from that QuirksMode site - nice resource! Is there anything I can help you with in particular - web related or not?

Specific box model implementation?

Once again, I've run into a problem. I've noticed that my right column doesn't show up properly in IE5. Is this a box model problem? I can't seem to figure out how to get it working.

Know of any good links to debates or info about client-side vs server-side stylesheets (i.e. using an alternate sheet if its discovered that IE5 is being used). The only thing I don't like about server-side is that it's one more stylesheet that I have to keep up with.

on my page, gamingandtech.com, I can't get my adsense to not 'jump' when loaded. is this a float issue?

what can I do to fix it? i've tried playing with percentages, but it seems to be that the adsense wants to rise higher and my style sheet is making it stay low. maybe i am not making much sense.

if anyone has time or is willing to give me some much appreciated advice, please do. thanks!

I had the same problem in Firefox, but I tried it with Opera and it is good enough, at least for my foreign online pharmacy where it proved not to work at all. Now, I guess they have solved it in Firefox, but I am not willing to try it there.