Re: [WSG] Layout Problem: Floating Elements with different heights breaks the flow.
what do you think suppose to be in tables? does a list represent better a list of cloths and there details, ordered in a gallery layout? does a table represent a tabular data. what is that exactly? only numbers or maybe also cloths and there details? On 2/23/07, Christian Montoya [EMAIL PROTECTED] wrote: On 2/23/07, Shlomi Asaf [EMAIL PROTECTED] wrote: Thanks a Lot Tee what i don't understand is- you create a table layout, so why not using a Table if u already has the structure, and even a little more expensive then table- you have another element- the clearing one. Because using the table wouldn't be semantically correct... it's for things that aren't meant to be put in tables, but making it look like a table would acheive the visual effect you want. -- -- Christian Montoya christianmontoya.net .. designtocss.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- www.webcssdesign.34sp.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Layout Problem: Floating Elements with different heights breaks the flow.
Ive uploaded a page describing my approach to table list design:
http://www.webcssdesign.34sp.com/me/aTableLikeList.htm
i think a List would be a much more semantic way to describe this kind of
layout
UL{
list-style:none;
margin:0;
padding:0;
display:table;
width:80%
}
DIV{
display:table-row;
zoom:1
}
LI{
display:cell;
float:left;
width:32.9%;
border:1px dotted #000
}
ul
div
li
h2Title/h2
pText/p
/li
li
h2Title/h2
pText/p
/li
li
h2Title/h2
pText/p
/li
/div
div
li
h2Title/h2
pText/p
/li
li
h2Title/h2
pText/p
/li
li
h2Title/h2
pText/p
/li
/div
/ul
i could have used UL to describe each row, but all the LI elements are
brothers so i sepereated them with the non semantic element- DIV.
i placed the unValid property- Zoom for IE6 support. to give the div a
layout. without it the table-row wouldn't had work.
thank you a lot Tee, u helped me a lot!
Solomon
On 2/23/07, Shlomi Asaf [EMAIL PROTECTED] wrote:
what do you think suppose to be in tables?
does a list represent better a list of cloths and there details, ordered
in a gallery layout?
does a table represent a tabular data. what is that exactly? only numbers
or maybe also cloths and there details?
On 2/23/07, Christian Montoya [EMAIL PROTECTED] wrote:
On 2/23/07, Shlomi Asaf [EMAIL PROTECTED] wrote:
Thanks a Lot Tee
what i don't understand is- you create a table layout, so why not
using a
Table if u already has the structure, and even a little more expensive
then
table- you have another element- the clearing one.
Because using the table wouldn't be semantically correct... it's for
things that aren't meant to be put in tables, but making it look like
a table would acheive the visual effect you want.
--
--
Christian Montoya
christianmontoya.net .. designtocss.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
www.webcssdesign.34sp.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
www.webcssdesign.34sp.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Layout Problem: Floating Elements with different heights breaks the flow.
Please ignore my last email
the layout i sent is not valid
the one Tee presented to us is the correct one.
A Question:
using the layout above VS. the same layout except the row divs now will
clear the Row. clear:both.
what do you think is the better correct layout?
a table like or a clearing one?
they r both semantic the same, and amount of code elements.
Sol
On 2/23/07, Shlomi Asaf [EMAIL PROTECTED] wrote:
Ive uploaded a page describing my approach to table list design:
http://www.webcssdesign.34sp.com/me/aTableLikeList.htm
i think a List would be a much more semantic way to describe this kind of
layout
UL{
list-style:none;
margin:0;
padding:0;
display:table;
width:80%
}
DIV{
display:table-row;
zoom:1
}
LI{
display:cell;
float:left;
width: 32.9%;
border:1px dotted #000
}
ul
div
li
h2Title/h2
pText/p
/li
li
h2Title/h2
pText/p
/li
li
h2Title/h2
pText/p
/li
/div
div
li
h2Title/h2
pText/p
/li
li
h2Title/h2
pText/p
/li
li
h2Title/h2
pText/p
/li
/div
/ul
i could have used UL to describe each row, but all the LI elements are
brothers so i sepereated them with the non semantic element- DIV.
i placed the unValid property- Zoom for IE6 support. to give the div a
layout. without it the table-row wouldn't had work.
thank you a lot Tee, u helped me a lot!
Solomon
On 2/23/07, Shlomi Asaf [EMAIL PROTECTED] wrote:
what do you think suppose to be in tables?
does a list represent better a list of cloths and there details, ordered
in a gallery layout?
does a table represent a tabular data. what is that exactly? only
numbers or maybe also cloths and there details?
On 2/23/07, Christian Montoya [EMAIL PROTECTED] wrote:
On 2/23/07, Shlomi Asaf [EMAIL PROTECTED] wrote:
Thanks a Lot Tee
what i don't understand is- you create a table layout, so why not
using a
Table if u already has the structure, and even a little more
expensive then
table- you have another element- the clearing one.
Because using the table wouldn't be semantically correct... it's for
things that aren't meant to be put in tables, but making it look like
a table would acheive the visual effect you want.
--
--
Christian Montoya
christianmontoya.net .. designtocss.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
www.webcssdesign.34sp.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
www.webcssdesign.34sp.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
www.webcssdesign.34sp.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Layout Problem: Floating Elements with different heights breaks the flow.
On 2/23/07, Shlomi Asaf [EMAIL PROTECTED] wrote: Thanks a Lot Tee what i don't understand is- you create a table layout, so why not using a Table if u already has the structure, and even a little more expensive then table- you have another element- the clearing one. Because using the table wouldn't be semantically correct... it's for things that aren't meant to be put in tables, but making it look like a table would acheive the visual effect you want. -- -- Christian Montoya christianmontoya.net .. designtocss.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Layout Problem: Floating Elements with different heights breaks the flow.
Hi i have a table like layout. here is a live example: http://www.webcssdesign.34sp.com/me/floatingDivs.htm all the floating divs has the same height. i haven't written the height in the css- the content is the same. all the titles are one line height. but what happens when one title is longer? the layout breaks and the lower float element looks for his position in a the next empty space - after the high element. how can i solve this problem? i can find few suggestion but none of them satisfy me: 1. an Element with clear:both after each ending line. 2. a Specific height and a overflow:hidden to the title. 3. a Table all those solutions are bed. 1. clear both hurts the simplistic of the server side work- the server side programer will have to count the number of elements in each raw and then place the clearing element 2. the height makes the layout inflexible, and empty space where they will be only 1 line title 3. i don't want to get into that :) any help will be appreciated Tnx a Lot NeoSwf *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Layout Problem: Floating Elements with different heights breaks the flow.
On 2/21/07, Shlomi Asaf [EMAIL PROTECTED] wrote: Hi i have a table like layout. here is a live example: http://www.webcssdesign.34sp.com/me/floatingDivs.htm all the floating divs has the same height. i haven't written the height in the css- the content is the same. all the titles are one line height. but what happens when one title is longer? the layout breaks and the lower float element looks for his position in a the next empty space - after the high element. What you (and everyone else) need is display:table and display:table-cell, but unfortunately these features are just not supported in enough browsers yet. Therefore, you'll probably have to settle for a less than perfect solution. how can i solve this problem? i can find few suggestion but none of them satisfy me: an Element with clear:both after each ending line. honestly, this isn't that bad. Just spitting out a br after every third item (count%3) will take only a couple lines of code, and is probably the lightest way to achieve this for what works today. -- -- Christian Montoya christianmontoya.net .. designtocss.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Layout Problem: Floating Elements with different heights breaks the flow.
thanks alot Christian for your answer, u given me data that i wasent aware about. secondly, you should consider using DIV as a Clearing Element. a BR is a semantic element. if youl try to reuse your layout again (or part of him that includes the BR element), and you'll no longer need a clearing element there, youll notice a problem- youll have a Line Break element. if youll define the clear inside a DIV, and then delete the clear out of him, ull have just a div and nothing else. BR will hurm your layout. a div is just a div- no effect at all on the layout. Solomon On 2/22/07, Christian Montoya [EMAIL PROTECTED] wrote: On 2/21/07, Shlomi Asaf [EMAIL PROTECTED] wrote: Hi i have a table like layout. here is a live example: http://www.webcssdesign.34sp.com/me/floatingDivs.htm all the floating divs has the same height. i haven't written the height in the css- the content is the same. all the titles are one line height. but what happens when one title is longer? the layout breaks and the lower float element looks for his position in a the next empty space - after the high element. What you (and everyone else) need is display:table and display:table-cell, but unfortunately these features are just not supported in enough browsers yet. Therefore, you'll probably have to settle for a less than perfect solution. how can i solve this problem? i can find few suggestion but none of them satisfy me: an Element with clear:both after each ending line. honestly, this isn't that bad. Just spitting out a br after every third item (count%3) will take only a couple lines of code, and is probably the lightest way to achieve this for what works today. -- -- Christian Montoya christianmontoya.net .. designtocss.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- www.webcssdesign.34sp.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Layout Problem: Floating Elements with different heights breaks the flow.
On Feb 21, 2007, at 3:29 PM, Shlomi Asaf wrote:
thanks alot Christian for your answer, u given me data that i
wasent aware about.
What you (and everyone else) need is display:table and
display:table-cell, but unfortunately these features are just not
supported in enough browsers yet.
Well, I used the method for a site. Doesn't work for IE Mac 5.2 but
this browser support was not needed.
Work for IE 5.5 and above, all Gecko broswer except Netscape 4.x
which is expected. IE is given 100% height, overflow hidden, negative
paddings and float. I would say the browser support is good enough to
make it on commercial site.
http://www.browsercam.com/public.aspx?proj_id=325739
http://project.lotusseedsdesign.com/sh-all/home_loggedout-new.html
quick example for your desired layout
#wrap {display: table}
div.content {display: table-row}
div.float {display: cell }
div id=wrap
div class=content
div class=float first column/div
div class=float second column/div
div class=float third column/div
/div
div class=clear/div
div class=content
div class=float first column second row/div
div class=float second column second row/div
div class=float third column second row/div
/div
/div
Safari can be a bit tricky, it seems that without #wrap, other
browser stills display well. For some strange reason, padding didn't
seem to work for .float, as a result I was forced to use white thick
borders to seperate each block. There were times client requested
blocks position be shifted, thus messed up Safari quite a bit, any
inner content wrap (in my case, the table) without width declared
makes Safari wacky too.
Clear both absolutely needed for each row.
All credit goes to Georg as without his pointer and help, I was not
able to do my job for this layout.
Hope this helps!
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
