[RESOLVED] Is there a css forum somewhere that is comparable in quality to phpbuilder?
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)
Last edited by Joseph Sliker; 02-18-2013 at 01:04 PM.
Reason: left something out.
www.webdeveloper.com is a sister site of this one, and has an active CSS forum (as well as HTML and JavaScript, too)
Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be." ~ from Nation, by Terry Pratchett
"But the main reason that any programmer learning any new language thinks the new language is SO much better than the old one is because he’s a better programmer now!" ~ http://www.oreillynet.com/ruby/blog/...ck_to_p_1.html
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.
Sadly, nobody codes for anyone on this forum. People taste your dishes and tell you what is missing, but they don't cook for you. ~anoopmail I'd rather be a comma, then a full stop. User Authentication in PHP with MySQLi - Don't forget to mark threads resolved - MySQL(i) warning
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.
(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.
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.
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:
Bookmarks