[css-d] Forcing horizontal scroll instead of wrap.
I have a database-driven web app that displays one div for each record, in a situation where I need the divs to stay on the same horizontal plane, regardless of window size or how many divs there are. Can somebody clue me in to a CSS (or whatever) trick that forces a div scroll instead of wrapping? Regards, Ed Every man is guilty of all the good he didn't do. (Voltaire) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Edward McCarroll 310.904.3651 e...@comsimplicity.com - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - __ css-discuss [cs...@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] Forcing horizontal scroll instead of wrap.
Can somebody clue me in to a CSS (or whatever) trick that forces a div
scroll instead of wrapping?
Perhaps
div {white-space: no-wrap}
---Tim
__
css-discuss [cs...@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] Forcing horizontal scroll instead of wrap.
Can somebody clue me in to a CSS (or whatever) trick that forces a div
scroll instead of wrapping?
Perhaps
div {white-space: no-wrap}
Oops. That should be nowrap.
---Tim
__
css-discuss [cs...@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] Forcing horizontal scroll instead of wrap.
On Aug 23, 2010, at 10:23 PM, Climis, Tim wrote:
Can somebody clue me in to a CSS (or whatever) trick that forces a div
scroll instead of wrapping?
Perhaps
div {white-space: no-wrap}
Oops. That should be nowrap.
That would only affect inline content..
One option though:
body {white-space: nowrap; }
div {display: inline-block;}
(of course, you could wrap your content divs in a container, then instead of
body use that container to control the white-space behaviour)
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [cs...@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] kthings 02 (Formerly Floating images - understanding ... etc.)
On Sun, 22 Aug 2010, Keith Purtell wrote: http://www.keithpurtell.com/kthings/a_body_vance_divs.htm http://cfajohnson.com/testing/keithpurtell.jpg -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [cs...@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] Playing with CSS3 transitions
In a comment on Gabrielle's blog posting a couple weeks ago about whether or not animation belongs in CSS, I came up with a use case for CSS dropdown menus. Basically, my idea was that you might want to make your menu drop down with a wipe. I finally got around to playing with that idea this weekend, and I'm discovering that it's not as intuitive as one might like. My original code just used display: none, changed to display: block on hover, which of course can't be transitioned. My new idea, after looking at a couple examples online was to use height instead. Height: 0 expanding to height: auto. I tried it without the transition first, just to make sure it resulted in what I wanted. This worked fine, so I tried to apply a transition to it. That didn't work. I checked out the spec, and we can only transition length and percentage heights. Auto is out. So, now I ask the list: Is there a way (excluding id-ing every menu heading, and setting a fixed height for each one) to transition a variable height dropdown? (My current play code in on my local machine, so not web accessible. I don't think that's really an issue, since this is mostly a theoretical question, but if people want some base code to play with, I can put it someplace public.) ---Tim __ css-discuss [cs...@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] layout IE trouble
Hi the site is http://tk-studio-design.webhop.org (must be without www). I checked on IEtester and have problem with layout of picture and footer. They are moved right, out of the screen. Site is powered by Joomla and still under construction. I am not sure if U can access it, because I am hosting it from home and will be down time 10.00 pm 8.00am GMT, apologize. any advise will be appreciated as well as critique. Thanks in advance Tom __ css-discuss [cs...@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] Forcing horizontal scroll instead of wrap.
Edward McCarroll wrote: I have a database-driven web app that displays one div for each record, in a situation where I need the divs to stay on the same horizontal plane, regardless of window size or how many divs there are. Can somebody clue me in to a CSS (or whatever) trick that forces a div scroll instead of wrapping? Regards, Ed If the div exceeds the width of the viewport producing a horizontal scrollbar, then floating the div will expand the div to fully enclose the content. -- Alan http://css-class.com/ Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo __ css-discuss [cs...@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] Playing with CSS3 transitions
Climis, Tim wrote: In a comment on Gabrielle's blog posting a couple weeks ago about whether or not animation belongs in CSS, I came up with a use case for CSS dropdown menus. Basically, my idea was that you might want to make your menu drop down with a wipe. ---Tim Promising, I think... Near the bottom of the page he has a fairly recent example of a CSS3 transition slide-down... http://www.gethifi.com/blog/nicer-navigation-with-css-transitions Best, ~d -- http://chelseacreekstudio.com/ __ css-discuss [cs...@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] Playing with CSS3 transitions
Promising, I think... Near the bottom of the page he has a fairly recent example of a CSS3 transition slide-down... http://www.gethifi.com/blog/nicer-navigation-with-css-transitions That's pretty much the effect I'm going for (sans the opacity transition). But a quick look at that code, and it's setting the height on that to 30px. And we all know how flexible that is... Perhaps that's the only way to do it though. ---Tim __ css-discuss [cs...@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] Playing with CSS3 transitions
Climis, Tim wrote: Promising, I think... Near the bottom of the page he has a fairly recent example of a CSS3 transition slide-down... http://www.gethifi.com/blog/nicer-navigation-with-css-transitions That's pretty much the effect I'm going for (sans the opacity transition). But a quick look at that code, and it's setting the height on that to 30px. And we all know how flexible that is... Perhaps that's the only way to do it though. ---Tim min-height? ~d -- :: desktop and mobile :: http://chelseacreekstudio.com/ __ css-discuss [cs...@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] iPad font rendering in both orientations...
Hi all- First post, and a bit of a newbie with respect to much of this. Sorry if it's off-topic: I've got a simple page that is supposed to render a font on the iPad at the same size in both portrait and landscape modes. It contains the following markup: meta name=viewport content=user-scalable=no, width=device-width/ and in a media query for the (portrait) display mode: -webkit-text-size-adjust: 133.%; When I view the page on the iPad simulator all looks well, but on the actual hardware, the font looks slightly bolded in landscape mode (or narrower in portrait, depending on your perspective). Any idea what I'm doing wrong, or need to do to fix this? I haven't yet found anything that addresses the issue on the Internet, but I can't imagine this hasn't been observed/addressed. Thanks so much! Charles Turner __ css-discuss [cs...@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] iPad font rendering in both orientations...
Charles Turner wrote: I've got a simple page that is supposed to render a font on the iPad at the same size in both portrait and landscape modes. It contains the following markup: meta name=viewport content=user-scalable=no, width=device-width/ and in a media query for the (portrait) display mode: -webkit-text-size-adjust: 133.%; When I view the page on the iPad simulator all looks well, but on the actual hardware, the font looks slightly bolded in landscape mode (or narrower in portrait, depending on your perspective). Charles Turner Welcome! An off-the-wall guess [ no iPad or iPad simulator ], try: meta name=viewport content=width=device-width; initial-scale=1.0; maximum-scale=1.0; instead of: meta name=viewport content=user-scalable=no, width=device-width/ Best, ~d -- :: desktop and mobile :: http://chelseacreekstudio.com/ __ css-discuss [cs...@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] Playing with CSS3 transitions
On Monday, August 23, 2010 5:27:35 pm David Laakso wrote:
min-height?
Well, that resulted in something interesting...
Here's the code I used.
li.parent ul {
/* irrelavant code snipped */
height: 0;
-webkit-transition: all .3s ease-in;
}
li.parent:hover ul {
min-height: 4em;
height: auto;
}
The result was that on hover, the menu appears with a fade-in (even without
specifying opacity - not what I expected) and then, on unhover, it fades back
out AND wipes up. On slowing it down, it immediately shrinks to 4em, and then
wipes up from there. But at the .3 seconds, you can't tell that, and it looks
pretty good.
I'm going to play a little more, but then I'll put up some demos.
---Tim
__
css-discuss [cs...@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] iPad font rendering in both orientations...
On Aug 23, 2010, at 6:35 PM, David Laakso wrote: An off-the-wall guess [ no iPad or iPad simulator ], try: meta name=viewport content=width=device-width; initial-scale=1.0; maximum-scale=1.0; instead of: meta name=viewport content=user-scalable=no, width=device-width/ Hi David- Thanks very much for your suggestion. It worked after I had removed the -webkit-text-size-adjust: 133.%; markup, which also enabled me to simplify the whole page by getting rid of the media queried CSS. It turns out that my problem appears unrelated, however. If you can view this page on an iPad in landscape and portrait mode, you'll see the phenomenon: http://vze26m98.net/css-discuss/test-ipad.html The black-on-white text appears to preserve its thickness, while the white-on-black type appears thicker in landscape than portrait. I assume this is some phenomenon of the way that the iPad display hardware works. Or it could be (LCD) displays in general, as I now realize that the iPhone simulator doesn't rotate the display, it rotates a frame around a simulated screen. Doh! ;-) Odd also that I have a mockup on an iPhone 3G/iOS4 that doesn't seem to have this problem. If anyone had further comments about this, I'd be most appreciative. Best wishes, Charles __ css-discuss [cs...@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] iPad font rendering in both orientations...
On Aug 24, 2010, at 12:05 PM, Charles Turner wrote: It turns out that my problem appears unrelated, however. If you can view this page on an iPad in landscape and portrait mode, you'll see the phenomenon: http://vze26m98.net/css-discuss/test-ipad.html The black-on-white text appears to preserve its thickness, while the white-on-black type appears thicker in landscape than portrait. I assume this is some phenomenon of the way that the iPad display hardware works. Or it could be (LCD) displays in general, as I now realize that the iPhone simulator doesn't rotate the display, it rotates a frame around a simulated screen. Doh! ;-) Odd also that I have a mockup on an iPhone 3G/iOS4 that doesn't seem to have this problem Could be the way font-smoothing for reverse text works on iPad screens and how text (characters) hook to the underlying pixel grid. It is almost certainly less visible at higher resolution (iPhone). On my desktop mac (webkit and gecko browsers), the reverse text appears slightly 'fatter' than the black-on-white text. Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [cs...@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] Playing with CSS3 transitions
On Monday, August 23, 2010 6:51:34 pm Tim Climis wrote: I'm going to play a little more, but then I'll put up some demos. Okay, so I wrote up what I had at 7:00 this evening. But what I've gotten since then is pretty nifty. Unfortunately, it's almost 1:00am, so it'll have to wait a couple of days for a write-up and a demo page. But here's effect #1. http://timclimis.blogspot.com/2010/08/pure-css-dropdown- menus-with.html ---Tim __ css-discuss [cs...@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/
