Re: [css-d] Old HTML guy takes a beating...

[Bruno Fassino]

Georg wrote:

> Ingo Chao wrote:
> > Just did a Opera9 (technical preview, built 8031, Win) test
> > on my old inline-block testpage
[..]
>
> Downloaded your page and made a few tests with variations on
> it. Adding 'display: inline-table' into the mix made a huge
> difference in what I could do with it across browser-land.
> Got an acceptable result (not flawless) all the way back
> to Opera 7.22. Opera9prev1, FF1.5RC3,
> Safari1.2.4 and IE6 display it more or less identical.
[...]
> I'll create a couple of "normal" layouts with it, and some
> image-galleries. We'll see... :-)

I've played in the past with this combinations of 'inline-blocks' and
similar, creating many image galleries examples [1][2], and also a page [3]
with some blocks of texts (lists) inside the 'inline-blocks.'
My conclusion is that there are too many variations, small problems,
complications (not to mention that -moz-inline-box should not be used
according to the Mozilla folks themselves)  that I don't consider this of
any practical use. I'm sure this won't stop you :-)

Regards,
Bruno

[1] http://brunildo.org/test/ImgThumbIBL2.html
[2] http://brunildo.org/test/ImgThumbIBL.html
[3] http://brunildo.org/test/indext1.shtml

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Old HTML guy takes a beating...

[Gunlaug Sørtun]

Ingo Chao wrote:
> Just did a Opera9 (technical preview, built 8031, Win) test on my old
>  inline-block testpage, and it now supports vertical-align for 
> inline-block content correctly. Very nice.

Downloaded your page and made a few tests with variations on it. Adding
'display: inline-table' into the mix made a huge difference in what I
could do with it across browser-land. Got an acceptable result (not
flawless) all the way back to Opera 7.22. Opera9prev1, FF1.5RC3,
Safari1.2.4 and IE6 display it more or less identical.

Note: 'position: relative' on .img-shadow img is activating an Opera-bug
(Op9prev1), so I moved that to IE/win only.

I'll create a couple of "normal" layouts with it, and some
image-galleries. We'll see... :-)

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Old HTML guy takes a beating...

[Ingo Chao]

Just did a Opera9 (technical preview, built 8031, Win) test on my old 
inline-block testpage, and it now supports vertical-align for 
inline-block content correctly. Very nice.

Ingo
-- 
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Old HTML guy takes a beating...

[Ingo Chao]

Gunlaug Sørtun wrote:
> Now, have this method been tested for layout of whole pages? 

Since I rarely build whole pages, I can't answer if this is a good 
option. Hope this thread will be part of the test.

The floats are in it by the OP for the dropshadow effect I am not lucky 
with. The floats shall shrink to fit the image inside, I think. Haven't 
read the sources of this method. Should be possible without floats, but 
I have no idea at the moment. IE Mac cannot like it this way, widthless.

The major issue is the display: inline-block non-support in Fx.  Here it 
was relatively easy to solve with an additional inner block wrapper for 
the outer -moz-inline-box container. But I can remember another 
situation where an inner wrapper did not help.

I'll have to test it in Opera9 if this version does allow for a correct 
vertical align of inline-block content. Opera8 cannot do anything else 
as vertical-align:top [1][2] and looses any top margin, which is a 
blocker for this design, I fear.

Ingo

[1] http://www.satzansatz.de/cssd/tmp/inlineblock.html
[2] http://www.brunildo.org/test/inline-block3.html
-- 
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Old HTML guy takes a beating...

[Gunlaug Sørtun]

Ingo Chao wrote:
> Ingo Chao wrote:

> http://www.satzansatz.de/cssd/inlineblock/cards.html
> 
> Allows for text-zoom and window resizing, I think, and wraps in 
> multiple rows(better than floats at least, but not without flaws). 
> Should work in IE5.5+, Opera8, Fx1.0.7-1.5RC3. Don't know what Opera9
>  offers or IE-Mac. Safari?

Opera 9prev1 looks fine, and so does my older Safari. IE/Mac is "no
good" since it doesn't shrink-wrap floats by default.

Now, have this method been tested for layout of whole pages? Would work
better than any script for auto-linearizing pages.
Float-drop on demand... Any web developer's dream or nightmare or
whatever :-)

regards
Georg
-- 
http://www.gunlaug.no

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Old HTML guy takes a beating...

[Gunlaug Sørtun]

Ingo Chao wrote:
> Ingo Chao wrote:

> http://www.satzansatz.de/cssd/inlineblock/cards.html
> 
> Allows for text-zoom and window resizing, I think, and wraps in 
> multiple rows(better than floats at least, but not without flaws). 
> Should work in IE5.5+, Opera8, Fx1.0.7-1.5RC3. Don't know what Opera9
>  offers or IE-Mac. Safari?

Opera 9prev1 looks fine, and so does my older Safari. IE/Mac is "no
good" since it doesn't shrink-wrap floats by default.

Now, have this method been tested for layout of whole pages? Would work
better than any script for auto-linearizing pages.
Float-drop on demand... Any web developer's dream or nightmare or
whatever :-)

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Old HTML guy takes a beating...

[Ingo Chao]

Ingo Chao wrote:
> Just to make sure I understand you: The boxes shall wrap in centred 
> "rows" like text when you resize the window or add more boxes? 
> Unfortunately, Browser support does not allow for easily wrapping block 
> level content - when the boxes are of different height, floats cannot do 
> this, they "hook", and display: inline-block is not supported well. 
> Might be easier to achieve with boxes that have the same height.

Assuming my question would be answered with yes by myself, here is a 
workaround with using display:inline-block (based on an idea by Bruno 
Fassino), comments included.

http://www.satzansatz.de/cssd/inlineblock/cards.html

Allows for text-zoom and window resizing, I think, and wraps in multiple 
rows(better than floats at least, but not without flaws).
Should work in IE5.5+, Opera8, Fx1.0.7-1.5RC3. Don't know what Opera9 
offers or IE-Mac. Safari?

>> I could have done this in my sleep in about 10 min with a simple table 
> 
> We heard that often. Some threads with interesting questions like yours 
> derived to a useless waste of time for those who participated in a 
> discussion of that phrase.

Someone corrected me, my intention was to say more something like 
"devolved", not "derived". Sorry.

Ingo

-- 
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Old HTML guy takes a beating...

[Ingo Chao]

Ingo Chao wrote:
> Just to make sure I understand you: The boxes shall wrap in centred 
> "rows" like text when you resize the window or add more boxes? 
> Unfortunately, Browser support does not allow for easily wrapping block 
> level content - when the boxes are of different height, floats cannot do 
> this, they "hook", and display: inline-block is not supported well. 
> Might be easier to achieve with boxes that have the same height.

Assuming my question would be answered with yes by myself, here is a
workaround with using display:inline-block (based on an idea by Bruno
Fassino), comments included.

http://www.satzansatz.de/cssd/inlineblock/cards.html

Allows for text-zoom and window resizing, I think, and wraps in multiple
rows(better than floats at least, but not without flaws).
Should work in IE5.5+, Opera8, Fx1.0.7-1.5RC3. Don't know what Opera9
offers or IE-Mac. Safari?

>> I could have done this in my sleep in about 10 min with a simple table 
> 
> We heard that often. Some threads with interesting questions like yours 
> derived to a useless waste of time for those who participated in a 
> discussion of that phrase.

Someone corrected me, my intention was to say more something like
"devolved", not "derived". Sorry.

Ingo

-- 
http://www.satzansatz.de/css.html

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Old HTML guy takes a beating...

[David Laakso]

Bruce Searl wrote:

>...trying to learn new fangled CSS Layout.
> 
>Hello all!
> 
>
> 
>I could have done this in my sleep in about 10 min with a simple table...]
>  
>
Your 'artistic brain' as you put it might grasp the concept if you let 
it. You are working with a new and different medium. Let it work for 
you. Accept that it is different. Therein lies its advantage.


>Any help you might offer will be greatly appreciated.
> 
>Thanks much,
> 
>Bruce Searl
>
>  
>


-- 
David Laakso
http://www.dlaakso.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Old HTML guy takes a beating...

[Jesse Skinner]

Hi Bruce,

I just took a quick look at your pages.

#1. To remove the space, try putting margin:0; on the SmallTxt class.

#2. I don't know about the effect with drop-shadows, but try setting 
text-align: center; in the div.float definition.

#3. I'm not sure I entirely understand this problem. Perhaps you want to 
set a height in the div.float definition?

#4. This is not so easy, since you're using float: left. Hopefully 
someone else on the list has some suggestions. Perhaps you could replace 
the 'float: left' with 'display: inline', though I wasn't able to get 
this to work at all.

Good luck,
Jesse Skinner
www.thefutureoftheweb.com

Bruce Searl wrote:
> to get this:
>  
> http://www.thememagic.com/phototidings/testartscraps/Prod_Detail_float.asp  
> (CSS no
> tables)
>  
> to look like this:
>  
> http://www.thememagic.com/phototidings/testartscraps/Prod_Detail.asp  (tables 
> locked at 5
> across)
>  
> 1. How do I get rid of the space under the thumbs so the text is right 
> underneath each
> image?
>  
> 2. How can I center each image in each float? They only seem to left align 
> (further and
> more importantly, if I apply a CSS drop shadow or CSS fuzzy drop shadows 
> technique (I've
> tried two versions from ALA articles) to them, then they only left align and 
> what's even
> worse.. they force the caption text to the right as you can see when the page 
> is opened
> wide... I've found no way to fix this at all.
>  
> 3. When it wraps there is no vertical space between what amounts to then "two 
> rows" or
> images and text where should I add margin, to the bottom of the paragraph?
>  
> 4. How can I center all the images within the main container so they all 
> group together in
> the middle instead of left aligning and leaving a large, unsightly. blank 
> space at the far
> right when there is not enough room to show another thumbnail? Or can the 
> container center
> and scale with the page?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Old HTML guy takes a beating...

[Christian Montoya]

>
> 1. How do I get rid of the space under the thumbs so the text is right 
> underneath each
> image?
>

* { margin:0; padding:0; } applied to the images, maybe?

> 2. How can I center each image in each float? They only seem to left align

If you have a float, and what is contained is in another container,
you could apply display:block to that container, and then
text-align:center. That is, if the images are inline, then
text-align:center should work on them.

>
> 3. When it wraps there is no vertical space between what amounts to then "two 
> rows" or
> images and text where should I add margin, to the bottom of the paragraph?

Yes.

>
> 4. How can I center all the images within the main container so they all 
> group together in
> the middle instead of left aligning and leaving a large, unsightly. blank 
> space at the far
> right when there is not enough room to show another thumbnail? Or can the 
> container center
> and scale with the page?

Maybe text-align:center would be the best way? If you float something,
you can't center it. Using display:inline with text-align:center might
work.
>
> I could have done this in my sleep in about 10 min with a simple table

cheating never takes very long

> and feel very
> sheepish asking for help

but I live for this stuff! ask away!

--
--
Christian Montoya
christianmontoya.com ... rdpdesign.com ... cssliquid.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Old HTML guy takes a beating...

[Ingo Chao]

Bruce Searl wrote:

> 3. When it wraps there is no vertical space between what amounts to then "two 
> rows" or
> images and text where should I add margin, to the bottom of the paragraph?
>  
> 4. How can I center all the images within the main container so they all 
> group together in
> the middle instead of left aligning and leaving a large, unsightly. blank 
> space at the far
> right when there is not enough room to show another thumbnail? Or can the 
> container center
> and scale with the page?

Just to make sure I understand you: The boxes shall wrap in centred 
"rows" like text when you resize the window or add more boxes? 
Unfortunately, Browser support does not allow for easily wrapping block 
level content - when the boxes are of different height, floats cannot do 
this, they "hook", and display: inline-block is not supported well. 
Might be easier to achieve with boxes that have the same height.

> I could have done this in my sleep in about 10 min with a simple table 

We heard that often. Some threads with interesting questions like yours 
derived to a useless waste of time for those who participated in a 
discussion of that phrase.

Ingo

-- 
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Old HTML guy takes a beating...

[Bruce Searl]

...trying to learn new fangled CSS Layout.
 
Hello all!
 
I have several problems which might be very simple to fix but seem 
insurmountable to my
level of experience. 
 
Down at the bottom of these example test pages is a row of thumbs created using 
Mark
Newhouseon's A list apart article on "Practical CSS Layout Tips, Tricks, & 
Techniques" (

http://www.alistapart.com/articles/practicalcss )
which does in fact wrap correctly ( I got that part working at least ;-) I've 
turned on
borders around the float and the paragraph to help me see what is going on... 
I'm trying
to get this:
 
 
http://www.thememagic.com/phototidings/testartscraps/Prod_Detail_float.asp  
(CSS no
tables)
 
to look like this:
 
 
http://www.thememagic.com/phototidings/testartscraps/Prod_Detail.asp  (tables 
locked at 5
across)
 
 
1. How do I get rid of the space under the thumbs so the text is right 
underneath each
image?
 
2. How can I center each image in each float? They only seem to left align 
(further and
more importantly, if I apply a CSS drop shadow or CSS fuzzy drop shadows 
technique (I've
tried two versions from ALA articles) to them, then they only left align and 
what's even
worse.. they force the caption text to the right as you can see when the page 
is opened
wide... I've found no way to fix this at all.
 
3. When it wraps there is no vertical space between what amounts to then "two 
rows" or
images and text where should I add margin, to the bottom of the paragraph?
 
4. How can I center all the images within the main container so they all group 
together in
the middle instead of left aligning and leaving a large, unsightly. blank space 
at the far
right when there is not enough room to show another thumbnail? Or can the 
container center
and scale with the page?
 
I could have done this in my sleep in about 10 min with a simple table and feel 
very
sheepish asking for help... but I've worked on it for 2 full days, read lots of 
articles
and I'm don't seem to be getting any closer... the whole benefit of CSS has 
thus far
pretty much escaped my artistic brain I'm afraid.
 
Any help you might offer will be greatly appreciated.
 
Thanks much,
 
Bruce Searl
ThemeMagic.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/