GUIs - A Modest Proposal
in [Python]
|
From: AD. on 14 Jun 2010 19:51 On Jun 14, 2:34 am, Stephen Hansen <me+list/pyt...(a)ixokai.io> wrote: > HTML+CSS have some very strong advantages. Simplicity is not one of > them. Precision web design these days is a dark art. (Go center an image > vertically and horizontally in an arbitrary sized field!) I agree, and I know that's a rhetorical question, but here goes.... (I have no idea whether this works in IE though) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1- strict.dtd"> <html> <head> <style> div { position: absolute; border: 1px solid blue; margin: 10px; } #one { top: 50px; width: 300px; height: 300px; } #two { top: 400px; width: 200px; height: 200px; } img { position: absolute; width:100px; height: 100px; margin: auto; top: 0; bottom: 0; left: 0; right: 0; border: 1px solid red; } </style> </head> <body> <div id="one"><img src="image.jpg" /></div> <div id="two"><img src="image.jpg" /></div> </body> </html> -- Cheers Anton
From: AD. on 14 Jun 2010 20:56 On Jun 15, 11:59 am, Ed Keith <e_...(a)yahoo.com> wrote: > But that is in a fixed size field, That's why I used the same image definition in two different sized divs to show that the images position wasn't determined by the divs size. > can you make the height change based on the height of the browser window, and still keep it centered? Like this? The div is sized according to the browser window and centered. The image is a fixed size, but still centered within the div. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1- strict.dtd"> <html> <head> <style> div { position: absolute; border: 1px solid blue; margin: auto; top: 10%; bottom: 10%; left: 10%; right: 10%; } img { position: absolute; width:100px; height: 100px; margin: auto; top: 0; bottom: 0; left: 0; right: 0; border: 1px solid red; } </style> </head> <body> <div> <img src="image1.jpg" /> </div> </body> </html> -- Cheers Anton
From: AD. on 14 Jun 2010 21:19 On Jun 15, 1:03 pm, Ed Keith <e_...(a)yahoo.com> wrote: > Nice! I've been looking for that trick for some time. > > Thank you, A lot of people (including pro web designers even) aren't really aware of what CSS can actually do. Part of the problem is that everyone only learnt the semi working subset that wouldn't fall to pieces in Internet Explorer. Don't get too excited though, while these proof of concept examples are easy once you put that into real world usage you'll notice that the absolutely positioned items are outside the normal flow and won't hold open containers - especially those that use a different positioning model etc. I reckon the main limitation with CSS is that it doesn't let you mix it's different positioning models together very easily. Now, back to talking about Python GUIs... :) -- Cheers Anton
From: python on 14 Jun 2010 21:21 Anton, Very nice. As an aside: I don't think you need to explicitly set your image size, eg. I found your examples worked well with the following CSS properties removed from the img specification: width:100px; height: 100px; Malcolm
From: Stephen Hansen on 14 Jun 2010 21:58
On 6/14/10 6:02 PM, AD. wrote: > On Jun 15, 12:06 pm, Stephen Hansen <me+list/pyt...(a)ixokai.io> wrote: >> "Arbitrarily sized" was the key point ;-) In that, you set the sizes of >> the div's explicitly. > > As I said to Ed, I think you missed why I included the exact same > image in two divs of different sizes. That was to show it was still > centered no matter what size the container was. It is even easier to > fit it to the browser window. I didn't miss it at all; I just didn't accept (and still don't -entirely-) that positioning within an explicitly sized div is the same thing as one which has had a flow-determined size. But! That said: > Like so: Create an HTML single image that sits dead in the center of >> your screen when your browser is maximized. Then if you adjust your >> browser to be half as wide, its still in the center. Just the new center. > > Even easier than the first example: Very nice. And interesting. "position: absolute" there is a mystery to me and seems to be key, I'm not sure entirely what it is doing to the layout manager in that scenario, but it seems to do the trick. Much, much, much Googling led me to try many things to get it just right, and all bemoaned the lack of a solid way to vertically center: all the while using essentially similar methods to horizontally center. Anyways. :) -- Stephen Hansen ... Also: Ixokai ... Mail: me+list/python (AT) ixokai (DOT) io ... Blog: http://meh.ixokai.io/ |