Re: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout
On 17 Dec 2004, at 03:29, Hugh Todd wrote: Anyone come up with, or implemented, a 3-column layout of this sort in which the left and right columns also stretch as a percentage of the page width? I refer you to Zoe Gillenwater (http://www.communitymx.com/content/article.cfm?page=1cid=AFC58). I am surprised that she hasn't made comment. -- Paul Connolley SQL/Systems Programmer Egocentric - http://egocentric.co.uk ** 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] The Holy Grail ... CSS Liquid Three-Column Layout
what if you want one of the columns to have a border around it, say the right column. How can this be done? Bruce Gilbert webmaster DPS-Original Message- From: Mani Sheriar <[EMAIL PROTECTED]>Sent: Dec 16, 2004 6:06 PM To: [EMAIL PROTECTED] Subject: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout <ZZZ!--[IF 9] mso gte> <ZZZ![ENDIF]--><ZZZ!--[IF 9] mso gte> Clean Clean DocumentEmail MicrosoftInternetExplorer4 <ZZZ![ENDIF]--> <ZZZ!--[IF mso gte 10]> <ZZZ![ENDIF]--> Hi Everyone! This is my first post to this group after reading it for a while. I must say, Im kinda scared to post to you guys! However, I really need your help. I think I may have found the Holy Grail that 3-column css liquid layout that allows for different colors and/or backgrounds for the body, the header, the footer, and the three columns NO MATTER WHICH COLUMN IS LONGEST. What I need help with is this: I have checked this out on Mozilla, FireFox, Netscape, and IE all on the pc. Can anyone who is interested please check it out on some other browsers/platforms? Also, I read the usual css blogs as much as I have time for, but Im not sure if someone else (or even several people) have already beaten me to the punch here. If not, I would take the time to write something up about it. Heres the link: http://www.ManiSheriar.com/holygrail By the way, I know that the code for the content comes after the code for the sidebars, but for accessibility concerns I could just put a skip to content link at the top, no? Anyway thanks for any feedback, and please be gentle with me. ;~) Mani (like Bonnie) Mani Sheriar Sheriar Designs | www.ManiSheriar.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] The Holy Grail ... CSS Liquid Three-Column Layout
what if you want one of the columns to have a border around it, say the right column. How can this be done? If you want one of the columns to have a border, then you just apply the border property to the column and your 200x1 pixel gif can have that border on it as well. Should work fine. One of the main reasons that I struggled to create this layout is so that you could have different colors for the background, header, footer, and all three columns (none of the colors are shining through from underlying elements). This can be extended to different backgrounds as well ... which is the REAL reason that I worked on this design. If you wanted some sort of fancy background for the side columns (or any element) then you would just apply that background to the column and the wrapper div. IE 5.2 OS X (Mac): extra padding added to the width of the left and right columns Screenshot: http://www.motive.co.nz/temp/041217-hoygrail.gif (could be a known CSS bug related to IE implementation of box model-padding and border added to width) See: http://tantek.com/CSS/Examples/boxmodelhack.html Call for help: Does anyone have any ideas about this problem in IE 5.2 OS X (screenshot: http://www.motive.co.nz/temp/041217-hoygrail.gif). I have already implemented the box model hack, so I'm not sure what the issue could be. Anyone come up with, or implemented, a 3-column layout of this sort in which the left and right columns also stretch as a percentage of the page width? I haven't tried it yet, but one theory is to make the background repeater very long (horizontally), and set it to repeat-y, but set its x-axis start position as a percentage. I haven't tried it yet, but one theory is to make the background repeater very long (horizontally), and set it to repeat-y, but set its x-axis start position as a percentage. I actually started working on an all-liquid layout at first. I ended up going to a single-column liquid layout just because this would work better for a project I'm about to embark on. What you suggest is exactly how I planned to try to implement the backgrounds (I didn't get that far yet, though). However, I might try to follow up on the all-liquid layout just to see if it can be done. If I get to it and get it to work, I'll post it here. Quick Note: Dejan - Wow ... THANK YOU for your help. I'm sure those screen shots will be very helpful and I really appreciate your time. Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925|914.0741 ** 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] The Holy Grail ... CSS Liquid Three-Column Layout
I was able to achieve the border on my right column with adding a border to by bgimage, thanks Mani. One problem I am having though. I have a header image that is exactly 800px, so I want my whole page to be no more than 800px wide. I have set my #wrapper to 800px. In IE my right column overlaps the header to the right a little bit. It doesn't do this in moz, ff, netscape. Is there way to compensate for this IE irregularity? (no padding or margin on wrapper) Bruce Gilbert webmaster DPS -Original Message- From: Mani Sheriar [EMAIL PROTECTED] Sent: Dec 17, 2004 9:22 AM To: [EMAIL PROTECTED] Subject: Re: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout what if you want one of the columns to have a border around it, say the right column. How can this be done? If you want one of the columns to have a border, then you just apply the border property to the column and your 200x1 pixel gif can have that border on it as well. Should work fine. One of the main reasons that I struggled to create this layout is so that you could have different colors for the background, header, footer, and all three columns (none of the colors are shining through from underlying elements). This can be extended to different backgrounds as well ... which is the REAL reason that I worked on this design. If you wanted some sort of fancy background for the side columns (or any element) then you would just apply that background to the column and the wrapper div. IE 5.2 OS X (Mac): extra padding added to the width of the left and right columns Screenshot: http://www.motive.co.nz/temp/041217-hoygrail.gif (could be a known CSS bug related to IE implementation of box model-padding and border added to width) See: http://tantek.com/CSS/Examples/boxmodelhack.html Call for help: Does anyone have any ideas about this problem in IE 5.2 OS X (screenshot: http://www.motive.co.nz/temp/041217-hoygrail.gif). I have already implemented the box model hack, so I'm not sure what the issue could be. Anyone come up with, or implemented, a 3-column layout of this sort in which the left and right columns also stretch as a percentage of the page width? I haven't tried it yet, but one theory is to make the background repeater very long (horizontally), and set it to repeat-y, but set its x-axis start position as a percentage. I haven't tried it yet, but one theory is to make the background repeater very long (horizontally), and set it to repeat-y, but set its x-axis start position as a percentage. I actually started working on an all-liquid layout at first. I ended up going to a single-column liquid layout just because this would work better for a project I'm about to embark on. What you suggest is exactly how I planned to try to implement the backgrounds (I didn't get that far yet, though). However, I might try to follow up on the all-liquid layout just to see if it can be done. If I get to it and get it to work, I'll post it here. Quick Note: Dejan - Wow ... THANK YOU for your help. I'm sure those screen shots will be very helpful and I really appreciate your time. Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925|914.0741 ** 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 **
[WSG] The Holy Grail ... CSS Liquid Three-Column Layout
Hi Everyone! This is my first post to this group after reading it for a while. I must say, Im kinda scared to post to you guys! However, I really need your help. I think I may have found the Holy Grail that 3-column css liquid layout that allows for different colors and/or backgrounds for the body, the header, the footer, and the three columns NO MATTER WHICH COLUMN IS LONGEST. What I need help with is this: I have checked this out on Mozilla, FireFox, Netscape, and IE all on the pc. Can anyone who is interested please check it out on some other browsers/platforms? Also, I read the usual css blogs as much as I have time for, but Im not sure if someone else (or even several people) have already beaten me to the punch here. If not, I would take the time to write something up about it. Heres the link: http://www.ManiSheriar.com/holygrail By the way, I know that the code for the content comes after the code for the sidebars, but for accessibility concerns I could just put a skip to content link at the top, no? Anyway thanks for any feedback, and please be gentle with me. ;~) Mani (like Bonnie) Mani Sheriar Sheriar Designs | www.ManiSheriar.com
Re: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout
Title: Re: [WSG] The Holy Grail ... CSS Liquid Three-Column Layou I think I may have found the Holy Grail that 3-column css liquid layout What I need help with is this: I have checked this out on Mozilla, FireFox, Netscape, and IE all on the pc. Can anyone who is interested please check it out on some other browsers/platforms? Here's the link: http://www.ManiSheriar.com/holygrail Checked (OK) Safari 1.2.4 OS X (Mac) Opera 6.0.3 (Mac) Netscape 7.1 OS X (Mac) Minor bugs IE 5.2 OS X (Mac): extra padding added to the width of the left and right columns Screenshot: http://www.motive.co.nz/temp/041217-hoygrail.gif (could be a known CSS bug related to IE implementation of box model-padding and border added to width) See: http://tantek.com/CSS/Examples/boxmodelhack.html Cheers, -- Andy Kirkwood | Creative Director MOTIVE | web.design.integrity http://www.motive.co.nz/ ph: +64 4 3 800 800 fx: +64 4 970 9693 mob: 021 369 693 93 Rintoul St, Newtown PO Box 7150, Wellington South, New Zealand
Re: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout
Checked (OK) Safari 1.2.4 OS X (Mac) Opera 6.0.3 (Mac) Netscape 7.1 OS X (Mac) Minor bugs IE 5.2 OS X (Mac): extra padding added to the width of the left and right columns Screenshot: http://www.motive.co.nz/temp/041217-hoygrail.gif (could be a known CSS bug related to IE implementation of box model-padding and border added to width) See: http://tantek.com/CSS/Examples/boxmodelhack.html Thanks very much for the screenshot, Andy! I thought that I had already allowed for the box-model inconsistencies in my css code. Im wondering if 1E/MAC 5.2 doesnt like the negative margins on the side columns? Any ideas anyone? Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925|914.0741
Re: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout
I love the implementation of the HTML and CSS. But um, could you please turn off HTML in your email? THE AMAZINGLY LARGE TYPE IS SENDING ME BLIND. Thanks :) On Thu, 16 Dec 2004 18:33:58 -0600, Mani Sheriar [EMAIL PROTECTED] wrote: Checked (OK) Safari 1.2.4 OS X (Mac) Opera 6.0.3 (Mac) Netscape 7.1 OS X (Mac) Minor bugs IE 5.2 OS X (Mac): extra padding added to the width of the left and right columns Screenshot: http://www.motive.co.nz/temp/041217-hoygrail.gif (could be a known CSS bug related to IE implementation of box model-padding and border added to width) See: http://tantek.com/CSS/Examples/boxmodelhack.html Thanks very much for the screenshot, Andy! I thought that I had already allowed for the box-model inconsistencies in my css code. I'm wondering if 1E/MAC 5.2 doesn't like the negative margins on the side columns? Any ideas anyone? Mani Sheriar Sheriar Designs | www.ManiSheriar.com 925|914.0741 -- Website Designer/Developer www.nataliebuxton.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] The Holy Grail ... CSS Liquid Three-Column Layout
Anyone come up with, or implemented, a 3-column layout of this sort in which the left and right columns also stretch as a percentage of the page width? -Hugh Todd I think I may have found the Holy Grail that 3-column css liquid layout that allows for different colors and/or backgrounds for the body, the header, the footer, and the three columns NO MATTER WHICH COLUMN IS LONGEST. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
