[css-d] Fluid layout and scaling images
Hello, http://www.webadit.co.uk/mullbed2/ I'm trying to set up a fluid layout (something I've shied away from for a long time). What you see here is by way of a trial run, to sort out a few ideas. To get the images to scale correctly I've given them a % width of just under 25% of their containing DIV. If given exactly 25% (each) they no longer fit in one row. There's no padding on the containing DIV or the images. How do I get them to fill the DIV exactly ? (with no gaps between them, or underneath). If the % width of the images is set so they exactly fill the width of the containing DIV at full screen (as here), they form two rows) at lower resolution (e.g. 800x600). Also it seems that at some window width below 600 the page stops scaling altogether. Why is this? I could fudge it by taking the outline off the containing DIV and changing its background colour, but surely there's a proper way to do this ? I'm working with Firefox12. I haven't tested in any other browsers yet. I'd greatly appreciate some guidance here, please. Regards, Tim Dawson -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fluid layout and scaling images
On Thu, Jun 28, 2012 at 9:58 AM, Tim Dawson t...@ramasaig.com wrote: Hello, http://www.webadit.co.uk/mullbed2/ I'm trying to set up a fluid layout (something I've shied away from for a long time). What you see here is by way of a trial run, to sort out a few ideas. To get the images to scale correctly I've given them a % width of just under 25% of their containing DIV. If given exactly 25% (each) they no longer fit in one row. There's no padding on the containing DIV or the images. How do I get them to fill the DIV exactly ? (with no gaps between them, or underneath). If the % width of the images is set so they exactly fill the width of the containing DIV at full screen (as here), they form two rows) at lower resolution (e.g. 800x600). Also it seems that at some window width below 600 the page stops scaling altogether. Why is this? I could fudge it by taking the outline off the containing DIV and changing its background colour, but surely there's a proper way to do this ? I'm working with Firefox12. I haven't tested in any other browsers yet. I'd greatly appreciate some guidance here, please. Regards, Tim Dawson Have the images set to display: block; and float: left maybe? -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fluid layout and scaling images
Le 28 juin 2012 à 22:58, Tim Dawson a écrit : http://www.webadit.co.uk/mullbed2/ I'm trying to set up a fluid layout (something I've shied away from for a long time). What you see here is by way of a trial run, to sort out a few ideas. To get the images to scale correctly I've given them a % width of just under 25% of their containing DIV. If given exactly 25% (each) they no longer fit in one row. There's no padding on the containing DIV or the images. How do I get them to fill the DIV exactly ? (with no gaps between them, or underneath). The space between the images is the white-space (on each line) between the images in your source-code, that gets normalised to one (1) space character [1]. The space below the images is the space for descenders, images are inline elements and rest on the baseline. Floating the images (float:left) will take care of both as Tom notes (you don't need to specify 'display: block' as the float property already makes the images display: block [2]. [1] http://www.w3.org/TR/CSS21/text.html#white-space-model [2] http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fluid layout and scaling images
Floating the images (float:left) will take care of both as Tom notes (you don't need to specify 'display: block' as the float property already makes the images display: block [2]. [1] http://www.w3.org/TR/CSS21/text.html#white-space-model [2] http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo Ah, yes. My bad. But hey, I was sorta right for once ;-) -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Button creation
Thank you all for the really creative and informative responses to this. This list rocks. I’ll soak in some of what you all have said and see what I come up with. Have learned a few new things to go research. Russ /pre font size = 1 This electronic mail message and attachments (if any) are confidential and legally privileged. br /The information is intended solely for the addressee(s). If you have received this email in error, br / please contact the sender and delete all copies of it. Any unauthorized use or disclosure may be unlawful. /font pre __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fluid layout and scaling images
On 28/06/2012 15:22, Tom Livingston wrote: Floating the images (float:left) will take care of both as Tom notes (you don't need to specify 'display: block' as the float property already makes the images display: block [2]. [1] http://www.w3.org/TR/CSS21/text.html#white-space-model [2] http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo Ah, yes. My bad. But hey, I was sorta right for once ;-) Thank you both. I had a nagging feeling there was something very simple I hadn't tried ! Tim -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] error-finding techniques?
What are some proven, efficient methods for finding mistakes made in code from one version to the next? Top of mind I think of having the 2 css documents open side by side, and looking line by line. Is that the best way or are there other, more efficient methods of sniffing out the offending code? Thank you! John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] css3 animation - do hover and focus work on touch screen devices?
hey all,
I continue to noodle away on my css3 animation sampler which I've moved to
http://sandyfeldman.com/resources/css3animation/
all the animations are set to trigger on hover and focus. Now - when you
go to this page using a touch screen device what happens? Is there a way
to trigger the animations?
http://iphonetester.com/
http://ipadpeek.com/
make it look like everything is just fine, but is it really?
If it's not, then is there something I can add like
A#transform:hover, A#transform:focus, A#transform:touch {
-webkit-animation: transform 2s infinite alternate;
-moz-animation: transform 2s infinite alternate;
-ms-animation: transform 2s infinite alternate;
-o-animation: transform 2s infinite alternate;
}
or do I need to use javascript? or something?
thanks,
Sandy
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] error-finding techniques?
On 06/28/2012 05:26 AM, John wrote: What are some proven, efficient methods for finding mistakes made in code from one version to the next? Top of mind I think of having the 2 css documents open side by side, and looking line by line. Is that the best way or are there other, more efficient methods of sniffing out the offending code? Thank you! I don't know. I always start with validation, it's great at catching my typos. There are many diff programs used by programmers to compare programing code. They all work fine on CSS and HTML files. They highlight differences for you, most let you move quickly from one difference to the next, even let you copy lines from one file to the other. I use Linux, the kdiff tool is great for this kind of stuff. Finally, if you have CSS files with many identical sections being repeated in each, maybe it's time to move those repeated sections into CSS files of their own and include them? coffeeonmars.com - love the domain name! :-) -- David gn...@hawaii.rr.com authenticity, honesty, community http://clanjones.org/david/ http://dancing-treefrog.deviantart.com/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fluid layout and scaling images
On 28/06/2012 15:22, Tom Livingston wrote: Floating the images (float:left) will take care of both as Tom notes (you don't need to specify 'display: block' as the float property already makes the images display: block [2]. [1] http://www.w3.org/TR/CSS21/text.html#white-space-model [2] http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo Ah, yes. My bad. But hey, I was sorta right for once ;-) That's great, and it's fixed the image alignment and 'padding', for sure. Thank you. I seem regularly to forget that images are 'in line' elements, and presumably they display with spacing, hence the gaps I was getting. Can I pick up on my second question, which was: Also it seems that at some window width below 600 the page stops scaling altogether. Why is this? This is still happening after floating the images, Regards, Tim -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] error-finding techniques?
On Jun 28, 2012, at 10:26 AM, Christopher Akins wrote: Not sure exactly under what circumstances you mean, but it sounds like maybe you have one CSS file that is error free and another with possible errors? That's right. in the correct CSS, certain styles work properly. In the next revision of that CSS document, those styles don't work properly. thank you! John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fluid layout and scaling images
On 6/28/12 6:58 AM, Tim Dawson wrote: Hello, http://www.webadit.co.uk/mullbed2/ I'm trying to set up a fluid layout (something I've shied away from for a long time). What you see here is by way of a trial run, to sort out a few ideas. To get the images to scale correctly I've given them a % width of just under 25% of their containing DIV. If given exactly 25% (each) they no longer fit in one row. There's no padding on the containing DIV or the images. How do I get them to fill the DIV exactly ? (with no gaps between them, or underneath). Yet another solution would be to add font-size:0; to the div.right rule. CSS give us lots of options. :) -- Cordially, David __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] error-finding techniques?
On Jun 28, 2012, at 3:03 PM, Beth Lee wrote: I think validation is the quickest way to find typos. But if the order has remained the same for both files, a file comparison utility could be helpful. I use WinMerge on my Windows machine. I haven't used KDiff3, but it works on other operating systems. If the order of rules has been changed, it could be cascade problem and not a typo at all. I can appreciate that...What I think happened (and I do this often when something goes wrong) is that I leave out a character or some dumb thing like that. It's very possible that I can be changing the order of rules, but at this moment, I don't feel skilled enough to even know whether I'm doing that...I'm basically taking the structure I have and making adjustments to it. John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css3 animation - do hover and focus work on touch screen devices?
On Thu, Jun 28, 2012 at 1:58 PM, Sandy sfeld...@sympatico.ca wrote: I continue to noodle away on my css3 animation sampler which I've moved to http://sandyfeldman.com/resources/css3animation/ Sandy, Some of the animations work, but not all of them, in Android/2.3.6 [a low-end mobile touch screen device]. That's a lot of stuff to ask most any mobile device to handle. Perhaps feeding mobile just a few of those animations might be more appropriate? aside I only looked at your page in portrait-view. The mobile media queries are not kicking-in; consequently, it is simply a reduced width version of desktop-- the top horizontal links and the sidebar links verge on being unreadable and unusable/aside Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] error-finding techniques?
John, When you write code, you mean CSS + HTML code only? If not, there are tests that can verify if it works as intended. If so: 1) Validators This should do for semantic errors or typos. 2) Version control system If you use one, revert to previous revision. Is your error there? Yes - check changes between this and next revision - there's problem root. No - go back one more revision. Most VCS's comes with some sort of diff tool. If you're on *nix systems, you have diff command. 3) Version control... manually Delete part of your changes. Is your error there? Yes - check what you've deleted, there's your problem. No - revert next change you made (go back one more revision step). 4) Debugging Launch Firebug and apply your changes from bad CSS on your site, overriding good CSS. Effects should be visible live. This is also manual testing, to be honest. Also, if you don't have many rules from different sources, you may want to check CSS Usage add-on to Firebug - it displays rules used in green, unused in red. If styles don't work occasionally it's because they can't be applied - then they'll be red. If they work, but not as they should, they'll be green. pozdrawiam, Tomasz Borek __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] error-finding techniques?
On Jun 28, 2012, at 3:52 PM, Tomasz Borek wrote: John, When you write code, you mean CSS + HTML code only? If not, there are tests that can verify if it works as intended. If so: 1) Validators This should do for semantic errors or typos. 2) Version control system If you use one, revert to previous revision. Is your error there? Yes - check changes between this and next revision - there's problem root. No - go back one more revision. Most VCS's comes with some sort of diff tool. If you're on *nix systems, you have diff command. 3) Version control... manually Delete part of your changes. Is your error there? Yes - check what you've deleted, there's your problem. No - revert next change you made (go back one more revision step). 4) Debugging Launch Firebug and apply your changes from bad CSS on your site, overriding good CSS. Effects should be visible live. This is also manual testing, to be honest. Also, if you don't have many rules from different sources, you may want to check CSS Usage add-on to Firebug - it displays rules used in green, unused in red. If styles don't work occasionally it's because they can't be applied - then they'll be red. If they work, but not as they should, they'll be green. Thanks Tomasz; Yes, I'm doing just css and html. I usually do my own versioning with Save As; this time I did not and I paid the price. I'm using TextWrangler to write my code. I am simply not sure what I did other than, while tweaking one thing, I wasn't mindful of the changes being made to another, so that when I looked at the file next day, I spotted the problem, but couldn't recall what I'd done immediately before. I did find an earlier version in which this code worked fine and was able to change some other things from memory to get back to where I was. Maybe I took the chicken way out, and should have put in the time and sweat to search out what I did wrong...not wanting to spend too much time, tho.. John __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css3 animation - do hover and focus work on touch screen devices?
http://sandyfeldman.com/resources/css3animation/ Some of the animations work, but not all of them, in Android/2.3.6 [a low-end mobile touch screen device]. thanks for checking. I did get to see this on an older iPad and iPhone today, and it looks like the ones with a background pattern, border effects or z-index animations don't work. A friend using iOS 5.1.1 on iPhone 5 says he sees all of them. interestingly, I installed Opera 12 beta and that group causes problems for that browser, too. I sent Opera a note about this. Perhaps feeding mobile just a few of those animations might be more appropriate? yeah - the sampler is pretty extreme. It's hard to imagine a real site with that many doodads. aside I only looked at your page in portrait-view. The mobile media queries are not kicking-in; consequently, it is simply a reduced width version of desktop-- the top horizontal links and the sidebar links verge on being unreadable and unusable/aside oh dear. thanks for letting me know. They were working on the iPhone Pad I looked at today. Is there something different I should be doing for Android? meta name=viewport? something else? best regards, Sandy __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] error-finding techniques?
Well then, Diff tool seems to be your best option right now. Do you use any Commander? Norton :D, Total, Free, etc.? Any of them actually have tools for file comparing, featuring GUI, side by side comparison, change by change navigation and even copying parts of files from left to right or vice versa. For future cases (errare humanum est) I recommmend you to use VCS like Subversion or Git. They're rather easy and make such situations much easier to deal with. I don't know Text Wrangler, but it should have that too. See here: http://magp.ie/2010/06/16/textwrangler-tips-compare-files-keyboard-shortcuts/ pozdrawiam, Tomasz Borek __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] css3 animation - do hover and focus work on touch screen devices?
On Thu, Jun 28, 2012 at 7:01 PM, Sandy sfeld...@sympatico.ca wrote: http://sandyfeldman.com/resources/css3animation/ aside I only looked at your page in portrait-view. The mobile media queries are not kicking-in; consequently, it is simply a reduced width version of desktop-- the top horizontal links and the sidebar links verge on being unreadable and unusable/aside oh dear. thanks for letting me know. They were working on the iPhone Pad I looked at today. Is there something different I should be doing for Android? meta name=viewport? something else? Sandy Sandy, My guess is that the method you use is only supported by our good friends and users who have Apple products? Hitting cross-OS, cross-browser, cross-device mobile can be as simple or as complicated as you wish to make it. Fwiw, a rather simple and crude example [note the device width meta tag, one media query, and use of min-width, max-width, width on the outer most wrapper]: http://ccstudi.com/rz.html This is of course is only one of many ways you might achieve the goal.., Best, David Laakso -- Chelsea Creek Studio http://ccstudi.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
