RE: [WSG] columns with matching vertical alignment
I would like to know the best (or at least better and simple) way to achieve this kind of design. [horizontally aligned lists at the end of parallel columns] Hi Ben, I'd keep the content together for semantic reasons. Then you need to assess the maximum text you allow for both the paragraphs and the lists. Calculate the maximum heights, then set the container height and absolutely position the list to the bottom. It might require some business rules around the allowed number of characters or words. Check out this site: http://www.moneymanager.com.au/ and remove list items (with Firebug) of the Calculate your... lists. Cheers, Jens The information contained in this e-mail message and any accompanying files is or may be confidential. If you are not the intended recipient, any use, dissemination, reliance, forwarding, printing or copying of this e-mail or any attached files is unauthorised. This e-mail is subject to copyright. No part of it should be reproduced, adapted or communicated without the written consent of the copyright owner. If you have received this e-mail in error please advise the sender immediately by return e-mail or telephone and delete all copies. Fairfax does not guarantee the accuracy or completeness of any information contained in this e-mail or attached files. Internet communications are not secure, therefore Fairfax does not accept legal responsibility for the contents of this message or attached files. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] columns with matching vertical alignment
The problem with this approach is what happens when you re-size text - in the example below it only takes one level of enlargement to have text overlapping. Elizabeth Spiegel Web editing 0409 986 158 GPO Box 729, Hobart TAS 7001 www.spiegelweb.com.au From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Jens-Uwe Korff Sent: Thursday, 10 July 2008 6:04 PM To: wsg@webstandardsgroup.org Subject: RE: [WSG] columns with matching vertical alignment I would like to know the best (or at least better and simple) way to achieve this kind of design. [horizontally aligned lists at the end of parallel columns] Hi Ben, I'd keep the content together for semantic reasons. Then you need to assess the maximum text you allow for both the paragraphs and the lists. Calculate the maximum heights, then set the container height and absolutely position the list to the bottom. It might require some business rules around the allowed number of characters or words. Check out this site: http://www.moneymanager.com.au/ and remove list items (with Firebug) of the Calculate your... lists. Cheers, Jens The information contained in this e-mail message and any accompanying files is or may be confidential. If you are not the intended recipient, any use, dissemination, reliance, forwarding, printing or copying of this e-mail or any attached files is unauthorised. This e-mail is subject to copyright. No part of it should be reproduced, adapted or communicated without the written consent of the copyright owner. If you have received this e-mail in error please advise the sender immediately by return e-mail or telephone and delete all copies. Fairfax does not guarantee the accuracy or completeness of any information contained in this e-mail or attached files. Internet communications are not secure, therefore Fairfax does not accept legal responsibility for the contents of this message or attached files. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] columns with matching vertical alignment
On 10 Jul 2008, at 11:15, Elizabeth Spiegel wrote: The problem with this approach is what happens when you re-size text – in the example below it only takes one level of enlargement to have text overlapping. That might not be the case if you set your container height in ems. But still, basing design on a fixed amount of text is asking for trouble if you ask me. What if you need more text later on? -- Rick Lecoat www.sharkattack.co.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] columns with matching vertical alignment
I would like to know the best (or at least better and simple) way to achieve this kind of design. [horizontally aligned lists at the end of parallel columns] Ben, I did this in May, the layout is very similar to your need. I remember Rick Lecoat helped me refine the equal height by moving the min-height to the ul that solves the text-resize issue ( I had it placed in the outer div, and when text increases, the UL items are overlapping the price). Feel free to copy my code. http://lotusseedsdesign.com/s/raz_compare_plans.html The page was tested in Firefox 2 (or 2.5?!) and the 'Fastest' in the Residential Plans was aligned with others, but I see that it's not in my Firefox 3, this can be solved by adding min-height value. Hope this helps! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] columns with matching vertical alignment
Hi all, I would like to know the best (or at least better and simple) way to achieve this kind of design. I have uploaded a sample design image for convenience: http://www.hellobenlau.net/design.gif Basically I need to have the lists at the bottom of each columns to match up vertically, but the content paragraph above it is supposed to be dynamic (clients could enter a novel if they wish). I don't think setting the list to be position:absolute and bottom:0 would be ideal, nor setting a min-height on the paragraph. What should be the best approach for this? Thanks a million! *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] columns with matching vertical alignment
On Jul 9, 2008, at 10:53 AM, Ben Lau wrote: I would like to know the best (or at least better and simple) way to achieve this kind of design. I have uploaded a sample design image for convenience: http:// www.hellobenlau.net/design.gif Basically I need to have the lists at the bottom of each columns to match up vertically, but the content paragraph above it is supposed to be dynamic (clients could enter a novel if they wish). I don't think setting the list to be position:absolute and bottom:0 would be ideal, nor setting a min-height on the paragraph. What should be the best approach for this I don't know about best, but I think I'd divide the page horizontally, where the bottom portion contains the lists, and the top everything else. Make this two divs and then place the column parts in their respective div. Perhaps semantic purists might take exception, but I contend that the semantic weight of a div is fairly neutral. Any more elegant solutions, anyone? Andrew *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***