[RESOLVED] Is there a css forum somewhere that is comparable in quality to phpbuilder?

Joseph_Sliker

Hi; Thanks to the many helpful people here I've gotten pretty comfortable working with .php and mysql.

NOW I am feeling brave enough to consider abandoning some of my longstanding antiquated/inefficient page models that are typically based on html <frame> tags (can you believe it?) with a left menu bar frame and a right content frame each containing fully-coded pages.

I understand the <frame> tag is abandonded in html5 and I am trying to work in ways that will be more compatible with a wider array of current browsers.

So my current issue is this (and I know it is a css question, hence the title of the post/but if you have any quick/obvious tips, that's fine with me):
I've created a functional single page with css-defined <div>s for a fixed left menu column (150px wide) and a larger (remaining width) right-side <div> for content and I actually seem to understand how I can use this BUT I am trying to comprehend how to make the content area behave properly: I can't seem to limit the right-side width as easily as I could with <frame> tags. The content of the right <div> often spills over beyond the right edge of the screen, and opens the horizontal browser bar...which works, but slides the content back over the menu bar, which will of course be very confusing and unimpressive for my site users.

How does one control the right <div> area so that content can flow (and be scrolled) DOWN, but is restricted to the right edge of the left menu div and the remaining width of the browser window? (MUST I restrict it to specific pixel widths or percentages?...I'd like to keep the menu narrow and off to the far left side)

Weedpacket

I haven't looked too deeply at it, but http://csscreator.com/forum has been going for a good while.

NogDog

www.webdeveloper.com is a sister site of this one, and has an active CSS forum (as well as HTML and JavaScript, too)

traq

There's a decent CSS community at dynamicdrive.com also.

Joseph_Sliker

Thanks very much for the replies. I will look into those sites.

Derokorian

Joseph Sliker;11024095 wrote:
How does one control the right <div> area so that content can flow (and be scrolled) DOWN, but is restricted to the right edge of the left menu div and the remaining width of the browser window? (MUST I restrict it to specific pixel widths or percentages?...I'd like to keep the menu narrow and off to the far left side)

YOu could do this through CSS with a fixed width and/or height, and overflow: auto which will only show the scrollbar if there's something to scroll to.

Joseph_Sliker

Thanks for that: I have been trying that but I am not yet familiar with all the different css dimensions and their possible values/how they work. I'd LIKE to have the width of the right column <div> use as much space is available on the user's end rather than have to limit the area to a fixed width. (A right <frame> does this perfectly and keeps all content completely off of the left menu bar, contained in its own frame). css looks like a very useful bunch of stuff: but so far I only grasp a few fragments and am trying to reconcile it against the (often obsolete) stuff that I already know. Ah well, learning new stuff is fun...when you have time to do it.

Weedpacket

Joseph Sliker wrote:
(MUST I restrict it to specific pixel widths or percentages?...I'd like to keep the menu narrow and off to the far left side)

You can use any length unit (that the browser supports) - some are absolute (based either on the size of a pixel or on physical units of measure) and some are relative to the font size, and of course percentages.

Oh, and there is also "auto" where the layout engine goes through a lot of mucking around to compute a value. If your <div> hasn't been floated out of the normal flow, "width:auto" would see the layout engine taking the width of the containing block, subtracting the sizes of your <div>'s left/right margins/borders/padding from it, and using what's left as the <div>'s width.

https://developer.mozilla.org/en-US/docs/CSS/length

Joseph Sliker wrote:
I'd LIKE to have the width of the right column <div> use as much space is available on the user's end rather than have to limit the area to a fixed width.

Sounds like what you want to limit is width of the left column, and leave the right column to fill the rest.

I happened to need a quick layout yesterday and stumbled across a few hundred of the things.

jeepin81

Just a quick addition.... Chris Coyier over at css-tricks.com has a great site going.

Joseph_Sliker

Weedpacket: That website with all those layouts is great! Found one that appears to do exactly what I need:

http://www.dynamicdrive.com/style/layouts/item/css-left-frame-layout/

However, earlier in the day I learned about the z-index property in css: this allowed me to to create my left menu column in a <div> with an opaque background, and giving it a higher z-index than other <div>s ensures that it remains forward-most in the display, so when necessary the somtimes too-wide content of the right "pane" can slide BEHIND the menu, not obscuring it. The effect appears to be just the same as the more "correct" way used in the link above. (which I will try anyway and see if I can understand why one might be better than the other.)

here is the relevant .css code I came up for my left and right <div> "panes" if anyone is interested:

div.leftcontent {
background:#ffffcc;
height: 800px;
width: 150px;
border: 0px #ffffcc;
position:fixed ;
word-wrap: break-word;
margin-top: 0px ;
margin-left: -10px ;
line-height: 1.3em ;
text-align: center ;
z-index:10;
}

div.rightcontent {
background:#ffffcc;
height: auto;
width: auto;
border: 0px #ffffcc;
position: absolute ;
word-wrap: break-word;
margin-top: 0px ;
margin-left: 150px ;
margin-right: 0 ;
line-height: 1.3em ;
padding-right: 0.5em ;
z-index:0;
}

Thanks again, all.