CSS layout

From confusticate at gmail.com Mon Jul 25 07:05:18 2011 From: confusticate at gmail.com (confusticate at gmail.com) Date: Mon, 25 Jul 2011 22:05:18 +1000 Subject: [thelist] ROLL UP! ROLL UP! Who can convert this simple table layout to CSS? In-Reply-To: <4E2A0DA9.3030307@yahoo.com> References: <4E2A0DA9.3030307@yahoo.com> Message-ID: Thanks for your reply @Patrick! It really *looks* like what I wanted. Unfortunately though, (and I wasn't explicit in my initial challenge about this - sorry), I was seeking a solution where the height of #postheader would essentially be (100% - #header height). It looks that way in your solution, but the background colour comes from the parent container #thecontent rather than #postheader, which disguises the fact that #postheader is really the height of its content. The reason I want to get (100% - pixel height of header) should hopefully be clear upon seeing the prototype of the design here: http://snipurl.com/t7pyu-meep. The design is centred, and consists of a page header above the page content. The "page" in the design moves over the dark tiled background as the window is resized horizontally. The "page" background image needs to stretch down to the bottom of the window regardless of the amount of content it holds. As you can see in the current prototype, the "page" background image definitely does not do that (because in my attempts to solve the (100% - pixel amount) problem I have used bottom:0 which is clearly not the right thing to do). Things I have tried: - Created a 100% height parent container for the page header AND the page content, and set this parent container's background image to the "page" background. This doesn't work because the page header's background image is semi-transparent and so you can see the page content background peeking through. - Set the page content div to 100% height. This doesn't work because the total height ends up being 100% + page header height. This means that there is a scroll bar even when it isn't required. - Made the whole design into the body's background image, which judicious fade-to-black. This doesn't work because ... well, you end up with a huge image, and it feels like cheating :) At some point I realised that the layout I wanted would be really easy to achieve with tables. That's when I decided to seek help here :) My thoughts are that this kind of design is very common, and so I must be approaching it the wrong way. Any pointers on how to lay this out would be very much appreciated! I agree with your sentiments about IE6. Luckily the stuff we produce has a reasonably limited distribution, and we no longer need to support IE6. Our users use IE7+, FF3.6+, Chrome and Safari. Cheers, CB. On Sat, Jul 23, 2011 at 9:54 AM, Patrick Horgan wrote: > How's this? > > > > > > CSS layout > > > >

> >

> Content would go in here. If there isn't enough content to > fill the screen, this blue section should still stretch to > the bottom of the window. If there are scrollbars however, > the blue section should stretch to the bottom of the content. >

> > > > -- > > * * Please support the community that supports you. * * > http://evolt.org/help_support_evolt/ > > For unsubscribe and other options, including the Tip Harvester > and archives of thelist go to: http://lists.evolt.org > Workers of the Web, evolt ! > From shadefrozen at gmail.com Wed Jul 27 01:01:29 2011 From: shadefrozen at gmail.com (Mark Henderson) Date: Wed, 27 Jul 2011 18:01:29 +1200 Subject: [thelist] ROLL UP! ROLL UP! Who can convert this simple table layout to CSS? In-Reply-To: References: <4E2A0DA9.3030307@yahoo.com> Message-ID: On 26 July 2011 00:05, confusticate at gmail.com wrote: > The reason I want to get (100% - pixel height of header) should hopefully be > clear upon seeing the prototype of the design here: > http://snipurl.com/t7pyu-meep. Based on that, not really, but I do think I have an idea of what you are after. > Things I have tried: > []... And did you try Geoff's recommendation? > Make a 500px wide 1px tall #C2E0F8-coloured png and put it as > the background, centered and repeating-y, on the body. That way > it will 'stretch' as you require. I might be misunderstanding, but wont something like that work for you? -- /*Mark From confusticate at gmail.com Wed Jul 27 01:14:26 2011 From: confusticate at gmail.com (confusticate at gmail.com) Date: Wed, 27 Jul 2011 16:14:26 +1000 Subject: [thelist] ROLL UP! ROLL UP! Who can convert this simple table layout to CSS? In-Reply-To: References: <4E2A0DA9.3030307@yahoo.com>

Message-ID: > > And did you try Geoff's recommendation? > > Make a 500px wide 1px tall #C2E0F8-coloured png and put it as > > the background, centered and repeating-y, on the body. That way > > it will 'stretch' as you require. > > I might be misunderstanding, but wont something like that work for you? > Because the body already has a repeating background (the dark grey pattern), I didn't think Geoff's recommendation would be possible for this design. I would be very pleased to find out that it would be possible to use both images somehow. I also tried applying Geoff's recommendation to a container div. ie, the body retains its dark grey pattern background, and the container div has the 500px wide etc png background. Unfortunately, the header image has transparency, and the container div background was visible through it. From shadefrozen at gmail.com Wed Jul 27 03:06:25 2011 From: shadefrozen at gmail.com (Mark Henderson) Date: Wed, 27 Jul 2011 20:06:25 +1200 Subject: [thelist] ROLL UP! ROLL UP! Who can convert this simple table layout to CSS? In-Reply-To: References: <4E2A0DA9.3030307@yahoo.com>

Message-ID: On 27 July 2011 18:14, confusticate at gmail.com wrote: > Because the body already has a repeating background (the dark grey pattern), > I didn't think Geoff's recommendation would be possible for this design. I > would be very pleased to find out that it would be possible to use both > images somehow. Ok fair point. Which is why David L wrote: > PS Try. Post your effort. Someone will help. I didn't take the time to view the prototype in multiple browsers but in FF3 on XP at a 1024x768 screen resolution, it didn't assist much at all (again that could just be me). Do you actually have a *simplified* test page with something *close* to what you want, INCLUDING the background and the issue you have with it? That way we can look at the code you have and make recommended changes, or re-write it according to what we see. > I also tried applying Geoff's recommendation to a container > div. ie, the body retains its dark grey pattern background, and the > container div has the 500px wide etc png background. Yeah that's not going to work for you based on the description of your requirements. As you can tell, by not posting a live example of your current progress and not explaining your wishes clearly the first time round, it is difficult for list members to offer up much in the way of *useful* assistance without a certain amount of guesswork. Anyway, back to your earlier comment: > I didn't think Geoff's recommendation would be possible for this design. I > would be very pleased to find out that it would be possible to use both > images somehow There is one possibility I can think of, but some might consider it a fudge (merging the two backgrounds into one). Take your original repeating background image and make it something like 2000px wide by 3px high (wider than any viewport you might expect viewing to occur in, and 3px high because it helps with the repeating process). Then take the central column background you are having issues with and place it on top of and in the middle of the previous background. Then use that background as per Geoff's previous recommendation on the body. This should still result in an image of negligible size. Set the body background colour to something the same as your original, so if per chance some crazy person using a resolution of 2400 x 1800 has their browser window maximised, it will still look ok (you *could* make the image 3000px wide if you really wanted but that is probably overkill - you can decide on the appropriate values). ASCII art follows to help (or hinder) my point! Background 1 (original repeating bg on body): - - Background 2 (png for central column): ++++++++++++++ New Background 1: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - (extended to 2000px) New Merged Background: - - - - - - - - - - - ++++++++++++++ - - - - - - - - - - - Make sense? HTH -- /*Mark From confusticate at gmail.com Wed Jul 27 05:35:54 2011 From: confusticate at gmail.com (confusticate at gmail.com) Date: Wed, 27 Jul 2011 20:35:54 +1000 Subject: [thelist] ROLL UP! ROLL UP! Who can convert this simple table layout to CSS? In-Reply-To: <4E2FB8C1.8060900@yahoo.com> References: <4E2A0DA9.3030307@yahoo.com> <4E2FB8C1.8060900@yahoo.com> Message-ID: On Wed, Jul 27, 2011 at 5:05 PM, Patrick Horgan wrote: > No, I looked at that and I'm really not clear about what you want. If I > understood what you want I could give you an easy solution, I promise. > Apologies for being so unclear. Perhaps if I approached it by listing the requirements of the design. "The background" is the very dark grey floral repeating background. "The container" (where the content will go) is the medium-grey striped rectangle and everything within it. 1. The container has to be centred. As the window is widened, the container needs to move across the background. 2. The container needs to stretch to the bottom of the window, even if it doesn't contain enough content to push it down that far. 3. Item (2) should not create an unnecessary scrollbar. That's it really. It really seems so straightforward, yet I can't seem to figure it out. I think what's tripping me up is the combination of a patterned repeating background, the 100% height requirement, and the semi-transparency of the header div image. On Wed, Jul 27, 2011 at 6:06 PM, Mark Henderson wrote: > > As you can tell, by not posting a live example of your > current progress and not explaining your wishes clearly the first time > round, it is difficult for list members to offer up much in the way of > *useful* assistance without a certain amount of guesswork. > > Yes, I have clearly invoked the ire of the list by not posting my real work. The reason I gave such a basic example in my original post was because I thought it was the simplest illustration of my wishes rather than my actual faulty work. I didn't want to influence any ideas by showing an approach that already wasn't working. Well, I know not to do that again! The reaction nearly scared me right off. My intention here is to learn, not to annoy, so I do apologise for that. On Wed, Jul 27, 2011 at 6:06 PM, Mark Henderson wrote: > > I didn't take the time to view the prototype in multiple browsers but > in FF3 on XP at a 1024x768 screen resolution, it didn't assist much at > all (again that could just be me). Do you actually have a *simplified* > test page with something *close* to what you want, INCLUDING the > background and the issue you have with it? That way we can look at the > code you have and make recommended changes, or re-write it according > to what we see. Simplified div-based test page: http://snipurl.com/t5wyq-meep What's right: The patterned background fills the window as necessary, and the content floats over it to centre itself. What's wrong: The unnecessary scrollbar. If there is a way to have the scrollbar come up only when necessary, then the problem is solved. Full table-based approach: http://snipurl.com/t7pyu-meep. (I didn't simplify this because my intention is to show behaviour.) What's right: This behaves as I intended ... What's wrong: ... except for on IE7, where cell heights are problematic. Also... it's tables. Tables for layout. You don't need to tell me. On Wed, Jul 27, 2011 at 6:06 PM, Mark Henderson wrote: > There is one possibility I can think of, but some might consider it a > fudge (merging the two backgrounds into one). > > [...] > > Make sense? Yes, it does make sense, thanks. I had considered this approach, but was really hoping there was an alternative just because it did seem a bit of a fudge. Plus, using that approach, I wasn't sure how to incorporate the patterned background fading to black near the bottom. I'm starting to think that the design may have to be changed to accommodate the situation. Sincere thanks to everyone on this thread. Cheers, CB. From shadefrozen at gmail.com Wed Jul 27 06:07:47 2011 From: shadefrozen at gmail.com (Mark Henderson) Date: Wed, 27 Jul 2011 23:07:47 +1200 Subject: [thelist] ROLL UP! ROLL UP! Who can convert this simple table layout to CSS? In-Reply-To: References: <4E2A0DA9.3030307@yahoo.com> <4E2FB8C1.8060900@yahoo.com> Message-ID: > Yes, it does make sense, thanks. I had considered this approach, but was > really hoping there was an alternative just because it did seem a bit of a > fudge. Plus, using that approach, I wasn't sure how to incorporate the > patterned background fading to black near the bottom. I'm starting to think > that the design may have to be changed to accommodate the situation. In some ways, yes, to make the design easier, but I am sure it can be accomplished (given I may still not *totally* understand exactly what you require). Be warned, use the following with care and test thoroughly: http://techknack.net/css-trick-two-background-images/ Since you are not supporting IE you can simplify that example but it should get you closer. -- /*Mark From willthemoor at gmail.com Thu Jul 28 14:18:43 2011 From: willthemoor at gmail.com (Will) Date: Thu, 28 Jul 2011 12:18:43 -0700 Subject: [thelist] ROLL UP! ROLL UP! Who can convert this simple table layout to CSS? In-Reply-To: References: <4E2A0DA9.3030307@yahoo.com> <4E2FB8C1.8060900@yahoo.com> Message-ID: On Wed, Jul 27, 2011 at 3:35 AM, confusticate at gmail.com < confusticate at gmail.com> wrote: > > Simplified div-based test page: http://snipurl.com/t5wyq-meep > > What's right: The patterned background fills the window as necessary, and > the content floats over it to centre itself. > What's wrong: The unnecessary scrollbar. If there is a way to have the > scrollbar come up only when necessary, then the problem is solved. > > That helps. Move the background image from #container_innards to #container and take the height off of #container_innards. Then, merge the header image with the pattern background (instead of leaving it transparent) and lay it on top to mask the repeating background and 'fake' the space up top. You might be able to fudge it by messing with margin-top on the #container and then negative margin-top on the header container. Or try moving the tiling background to the html element, the header image to the body element and then add margin-top to the #container element or padding-top on the body. From confusticate at gmail.com Thu Jul 28 22:13:36 2011 From: confusticate at gmail.com (confusticate at gmail.com) Date: Fri, 29 Jul 2011 13:13:36 +1000 Subject: [thelist] ROLL UP! ROLL UP! Who can convert this simple table layout to CSS? In-Reply-To: References: <4E2A0DA9.3030307@yahoo.com> <4E2FB8C1.8060900@yahoo.com>

Message-ID: On Fri, Jul 29, 2011 at 5:18 AM, Will wrote: > > Move the background image from #container_innards to #container and take > the > height off of #container_innards. Then, merge the header image with the > pattern background (instead of leaving it transparent) and lay it on top to > mask the repeating background and 'fake' the space up top. > Thanks Will. Well, we've reached a solution. It was as easy as deciding that we're not going to have the effect of the container 'moving over' the pattern background when the window is resized. Everything was so straightforward from then on. That meant that I could change the pattern background to 'top center' rather than 'top left', which meant that it was possible to follow Will's approach. ie, the header image could be merged with the pattern background (no transparency required), #container_innards was removed and its background shifted to #container, and the height:100% on the body only. No further changes to background images necessary. One more thing I had to do: I had thought that setting height:100% on the container would cause its background to stretch either to the bottom of the window, or to the bottom of its content if that exceeded the window height. The first part works, the second part doesn't. I had to set min-height:100% and overflow:hidden on the #container to achieve this. For anyone in the same situation as me, here is the simplified version of my final result. Final

Page content goes in here.

Thanks everyone for your help. Cheers, CB. From bobm at dottedi.biz Sun Jul 31 18:03:43 2011 From: bobm at dottedi.biz (Bob Meetin) Date: Sun, 31 Jul 2011 17:03:43 -0600 Subject: [thelist] posting to Facebook Fan Page In-Reply-To: <4E1D069F.3000104@dottedi.biz> References: <4E1D069F.3000104@dottedi.biz> Message-ID: <4E35DF4F.1000402@dottedi.biz> On 07/12/2011 08:44 PM, Bob Meetin wrote: > or whatever FB calls it these days. > > I have a little program which uses a Facebook API, the connection through Facebook Connect, to post a comment to a person's FB wall if they have used Facebook Connect to log into the website using FConnect. This works splendidly. Client now wants to be able to post to their Fan page as opposed to their regular Facebook account. Is this doable and if so, how complicated in terms of hours/time to make happen? > Which reminds me that this post lay there silently awaiting feedback, suggestions. -- Bob