Re: [WSG] Help with a layout
Matt wrote: 1. If I add content to the left or right columns, the footer doesn't push down, and the content overlaps - the layout breaks. I would like for all 3 columns to be the same height, no matter which one has more or less content. All you need is to add clear: both; to #Footer. That is needed when we deal with floats, as in your page. It won't make your columns stay the same height, but the footer will stay under the tallest of them, no matter what. To make it look like all columns are going all the way down-- independently, we usually put a background-image on one or more wrapper-divs. #ColumnContainer is a wrapper-div in your page. Maybe you need more than that one. regards Georg ** 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] Help with a layout
Hi everyone, I am new to XHTML/CSS, and I am just working on my first layout, I need some advice regarding a couple of things, I wondered if anyone can help. I am sure that these are very simple things that have been covered before, but I just need pointing in the right direction. The layout that I am working on is 3 column with a header and footer, liquid (the centre column can change size, the total width of the page is 83%). The whole layout has a drop shadow (visible on the right and bottom). I got snippets of code from various different places and pieced them all together, and I fell like I am getting there (slowly!). I may have been excessive (too many divs and containers), so don't be too alarmed!... Here is the layout: http://220.233.11.63/Misc/dev/Template-Long-Centre.html I am using 3 images: http://220.233.11.63/Misc/dev/Permanant-Images/Drop-Shadows/HeaderDropShadow.jpg Top right edge of the drop shadow. http://220.233.11.63/Misc/dev/Permanant-Images/Drop-Shadows/RightDropShadow.jpg Right edge of the drop shadow, as well as the shading and line which defines the columns (the background of the main content area). http://220.233.11.63/Misc/dev/Permanant-Images/Drop-Shadows/FooterDropShadow.jpg Footer drop shadow, providing the right bottom corner and bottom edge of the drop shadow. My problems are: 1. If I add content to the left or right columns, the footer doesn't push down, and the content overlaps - the layout breaks. I would like for all 3 columns to be the same height, no matter which one has more or less content. e.g.: http://220.233.11.63/Misc/dev/Template-Long-Left.html http://220.233.11.63/Misc/dev/Template-Long-Right.html 2. In IE5.2 for Mac OS X, the div for the navigation bar does not sit properly against the header and main content divs - this only seems to be an issue on this platform. I have tested in Win: Opera, IE, and FF, and Mac OS X Safari and IE - the only real issue out of all of these browsers appears to be IE for Mac, mentioned above. Please note, I am aware that the drop shadow images are jpegs, I may use PNGs for alpha transparency later on, though I don't have the need to at the moment as I am not using a background image as such (just a solid colour). Kind regards, Matt ** 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] Help with a layout
Sorry, Here is the screen shot of IE Mac: http://220.233.11.63/Misc/dev/Mac-IE-screenshot.gif You can view all of the files here: http://220.233.11.63/Misc/dev/ Cheers, Matt On Tue, 30 Nov 2004 16:05:49 +1100, Matt [EMAIL PROTECTED] wrote: Hi everyone, I am new to XHTML/CSS, and I am just working on my first layout, I need some advice regarding a couple of things, I wondered if anyone can help. I am sure that these are very simple things that have been covered before, but I just need pointing in the right direction. The layout that I am working on is 3 column with a header and footer, liquid (the centre column can change size, the total width of the page is 83%). The whole layout has a drop shadow (visible on the right and bottom). I got snippets of code from various different places and pieced them all together, and I fell like I am getting there (slowly!). I may have been excessive (too many divs and containers), so don't be too alarmed!... Here is the layout: http://220.233.11.63/Misc/dev/Template-Long-Centre.html I am using 3 images: http://220.233.11.63/Misc/dev/Permanant-Images/Drop-Shadows/HeaderDropShadow.jpg Top right edge of the drop shadow. http://220.233.11.63/Misc/dev/Permanant-Images/Drop-Shadows/RightDropShadow.jpg Right edge of the drop shadow, as well as the shading and line which defines the columns (the background of the main content area). http://220.233.11.63/Misc/dev/Permanant-Images/Drop-Shadows/FooterDropShadow.jpg Footer drop shadow, providing the right bottom corner and bottom edge of the drop shadow. My problems are: 1. If I add content to the left or right columns, the footer doesn't push down, and the content overlaps - the layout breaks. I would like for all 3 columns to be the same height, no matter which one has more or less content. e.g.: http://220.233.11.63/Misc/dev/Template-Long-Left.html http://220.233.11.63/Misc/dev/Template-Long-Right.html 2. In IE5.2 for Mac OS X, the div for the navigation bar does not sit properly against the header and main content divs - this only seems to be an issue on this platform. I have tested in Win: Opera, IE, and FF, and Mac OS X Safari and IE - the only real issue out of all of these browsers appears to be IE for Mac, mentioned above. Please note, I am aware that the drop shadow images are jpegs, I may use PNGs for alpha transparency later on, though I don't have the need to at the moment as I am not using a background image as such (just a solid colour). Kind regards, Matt ** 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 **
Re: [WSG] Help with this layout
the simple answer to this, Olajide , is to use the overflow property. in the divs, set overflow: visible perhaps. google search css overflow for more information. the less simple answer is - why is there a height set in the first place? I have a sneaking suspicion that you may be taking a less than ideal approach to your construction of this site. Perhaps it would do you good to scour the web for some nice examples of standards-compliant sites that are doing what you want your site to do, and then study their code. On Fri, 1 Oct 2004 03:35:10 +1000, Olajide Olaolorun [EMAIL PROTECTED] wrote: Hi guys can you please check out this layout and tell me what you all think... The link is http://www.jccihouseofglory.org/2.jpg I want the content area to extend in height when the content is long... I'm using css divs and uses the x and the y variables... how do I make it extend when there is a long content... do I just remove the y valirable in the css Check the layout... it is self explanatory... Thanks Olajide Olaolorun -- Personal: www.olajideolaolorun.com www.empirex.net Business: www.tripleolabs.com www.tripleostudios.com www.tripleo.biz Projects: www.uniformserver.com ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 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] Help with this layout
Hi guys can you please check out this layout and tell me what you all think... The link is http://www.jccihouseofglory.org/2.jpg I want the content area to extend in height when the content is long... I'm using css divs and uses the x and the y variables... how do I make it extend when there is a long content... do I just remove the y valirable in the css Check the layout... it is self explanatory... Thanks Olajide Olaolorun -- Personal: www.olajideolaolorun.com www.empirex.net Business: www.tripleolabs.com www.tripleostudios.com www.tripleo.biz Projects: www.uniformserver.com ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Help with a layout - centered navigation
Some time back I requested help with a layout involving a centered navigation bar, positioned absolutely at the bottom of a header (so as to expand upwards). A number of people wrote me brilliantly helpful suggestions, and I thought I was home and hosed. The navigation bar works in everything except (as I now discover) IE 5 PC (completely falls to pieces) and IE 5.5 PC (falls only partly to pieces). It's not intended to be dynamic (except for the usual rollover effects). But the bugs or shortcomings in those PC browsers don't immediately come to mind. Can anyone quickly spot where the problem may lie and where I might find a fix? Page here: http://homepage.mac.com/hughtodd/access/ CSS here: http://homepage.mac.com/hughtodd/styles/cf.css Many thanks! Hugh Todd ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
