Re: [css-d] Image displacement
At 1:40 AM +0100 5/19/08, Alan K Baker wrote: Tedd. Granted that your map is quite an inspiration and as you imply, it's complex. However, I do believe that I may still have an equally difficult task ahead, not just due to partially rotated images, but also due to rotated text. Now that is going to be awkward without resorting to text images. g I do believe that you are right and that all can be achieved just with the use of CSS. A little lateral thinking perhaps? :-) Regards, Alan. Alan: Rotated images are not a problem -- just create the images rotated and use them that way. The underlying mechanism of css roll-overs still applies. You may also want to use text in your images, because when you zoom-up the text will outgrow your images unless you tie the images and text to a single scaling unit, such as em's or percentages. As shown by this: http://sperling.com/examples/zoom/ Unfortunately, as far as I know, rotated text is not currently possible with css. The closest I can come is by using php as shown here: http://webbytedd.com/bb/draw-text/ But as I said, that's not css. Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [EMAIL PROTECTED] 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] Image displacement
Hi all. Another couple of problems that are driving me insane once more. g I am using image (background) displacement to simulate the movement of a 'switch tab' on a pipe organ. Each image category (there are four) is a .png compiled from three separate images placed one above the other in a vertical line. The initial images are correctly positioned and the a:hover state works fine too. However, the a:active state is acting strangely in all browsers tested so far. What should happen is that in the a:active state the last (lowest) part of the image starting at 250px from the top of the image, should be placed in the containing div at 0 0, which it does, but it appears to be wrapping vertically so that 11px of the image below 250px appears at the bottom of the div, where there should be nothing. I can't see why this should be a placement problem and wonder if it's to do with the way z-index is handled, or is it because I have misunderstood the way that transparent images are supposed to be rendered when displaced within a set size div? The other problem is that at the bottom of each 'tab' image there is a figure and under that a three letter abbreviation. So that they can be styled and placed precisely, I've given each a separate definition, but they are defined in the HTML as spans because a href rules won't allow a div to be used. They are not picked up by the anchor state in IE, consequently they cannot be picked up by the parent div's a:active state, so I can't change their characteristics (text size etc) to follow the background image appearing to be smaller, when the mouse is clicked. The correct effect can be seen on the top text for each image, which is working correctly as expected. Can anyone think of a way of achieving this with text, as I don't want to have to resort to further graphical text manipulation? I've uploaded the site to: http://www.webbwize.co.uk/Test_Area/VTPO/ the stylesheet is at: http://www.webbwize.co.uk/Test_Area/VTPO/scripts/stylesheet.css and relevant images are in: http://www.webbwize.co.uk/Test_Area/VTPO/images and subfolders. I know that there are further problems with IE6, but I'll address those later. Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups Shopsmith 520 + bits Flatulus Antiquitus __ css-discuss [EMAIL PROTECTED] 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] Image displacement
Alan K Baker wrote:
http://www.webbwize.co.uk/Test_Area/VTPO/
[...] I can't see why this should be a placement problem and wonder
if it's to do with the way z-index is handled, or is it because I
have misunderstood the way that transparent images are supposed to be
rendered when displaced within a set size div?
The addition of...
.couplertab li a, .fluetab li a, .reedtab li a, .stringtab li a {
background-repeat: no-repeat;
}
...will fix the problem with the shorter background.
[...] The correct effect can be seen on the top text for each image,
which is working correctly as expected.
Except that small font-sizes do not survive 'minimum font size' or
'ignore font size'.
Can anyone think of a way of achieving this with text, as I don't
want to have to resort to further graphical text manipulation?
Address them as...
#navbar li a:active span { /* and style to your liking */ }
Delete the 'z-index: 200;' on '.abbreviate, .pitch' while you're at it,
as it serves no purpose.
Additional comments:
The whole construction makes me wonder why there are so many DIVs and
ULs in there, as one UL and a number of LIs with anchors would work just
fine.
All backgrounds with all states can be contained in one image, and
horizontal background-offset be used to line them up as what you have
now. Will make the whole thing less complicated I think, and one image
loads faster. You can also tune the image a bit and make it 8bit png,
which will make IE6 more cooperative.
Remember that IE6 'auto-expands' empty elements, as IE/win sees
imaginary spaces in empty elements.
Declaring 'overflow: hidden' on them or simply placing an HTML comment
as only content inside them, will make IE6 stop expanding them.
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/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Image displacement
- Original Message -
From: Gunlaug Sørtun
To: Alan K Baker
Cc: css-d
Sent: Sunday, May 18, 2008 2:11 PM
Subject: Re: [css-d] Image displacement
Alan K Baker wrote:
http://www.webbwize.co.uk/Test_Area/VTPO/
The addition of...
.couplertab li a, .fluetab li a, .reedtab li a, .stringtab li a {
background-repeat: no-repeat;
}
...will fix the problem with the shorter background.
Absolutely on the nose, Georg. I do feel silly for missing that one, but then
it's obvious after it's been pointed out. :-)
[...] The correct effect can be seen on the top text for each image, which
is working correctly as expected.
Except that small font-sizes do not survive 'minimum font size' or 'ignore
font size'.
Agreed, but then how far do you go to accomodate everyone? My main criteria is
to have the text fit the tabs and have the entire presentation look like the
'real thing', to those 'in the know'.
Can anyone think of a way of achieving this with text, as I don't want to
have to resort to further graphical text manipulation?
Address them as...
#navbar li a:active span { /* and style to your liking */ }
Thanks for that Georg. Something I needed to learn. :-)
Delete the 'z-index: 200;' on '.abbreviate, .pitch' while you're at it, as it
serves no purpose.
One that got 'left-over' when moving things around, it will be banished. g
Additional comments:
The whole construction makes me wonder why there are so many DIVs and ULs in
there, as one UL and a number of LIs with anchors would work just fine.
As with many of my 'projects', I'm always in a hurry to meet a deadline and
panic myself into taking the easy option, then maybe clean up afterwards. This
one has several 100Mb of music files for users to download, and I took the
files on because the forum-server that they are on, is almost full, so needs
emptying ASAP. This one's my own pet project, so it's only me to blame.
All backgrounds with all states can be contained in one image, and horizontal
background-offset be used to line them up as what you have now. Will make the
whole thing less complicated I think, and one image loads faster. You can
also tune the image a bit and make it 8bit png, which will make IE6 more
cooperative.
That sounds like a good idea and one I will consider as soon as the site is
actually 'live'. I presume that you are suggesting that each li is given a
style appropriate to its background image position. It's a nice solution, and
one that I am now keen to implement.
There may be one complication in that (if you've ever seen one of these
instruments) the console is shaped like a horseshoe, and the backboard which
contains all of the tabs is semi-circular, which means that the tabs nearer the
left and right sides are turned inwards by varying degrees. I'm aiming at
future expansion which would mean many more tabs, and as with the real thing,
they simply won't fit in a straight line in the available space. Although it's
straightforward enough to rotate the images, as they will still be in
straight-sided containers, it may prove quite difficult to make the 'squares'
overlap, using lis alone. Further comments appreciated.
Remember that IE6 'auto-expands' empty elements, as IE/win sees imaginary
spaces in empty elements. Declaring 'overflow: hidden' on them or simply
placing an HTML comment as only content inside them, will make IE6 stop
expanding them.
Will do. Again Georg, thanks for your sage advice.
regards
Georg
--
http://www.gunlaug.no
Regards,
Alan.
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups
Shopsmith 520 + bits
Flatulus Antiquitus
__
css-discuss [EMAIL PROTECTED]
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] Image displacement
At 3:17 PM +0100 5/18/08, Alan K Baker wrote: There may be one complication in that (if you've ever seen one of these instruments) the console is shaped like a horseshoe, and the backboard which contains all of the tabs is semi-circular, which means that the tabs nearer the left and right sides are turned inwards by varying degrees. I'm aiming at future expansion which would mean many more tabs, and as with the real thing, they simply won't fit in a straight line in the available space. Although it's straightforward enough to rotate the images, as they will still be in straight-sided containers, it may prove quite difficult to make the 'squares' overlap, using lis alone. Further comments appreciated. Alan: These are only images. They can be arranged any way you want with rollovers anywhere you want. Your semi-circular tabs are quite simple as compared to this: http://webbytedd.com/bbb/map/ You see, all of what you described can be accomplished with css. Everything you need to do is illustrated in this link. Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [EMAIL PROTECTED] 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] Image displacement
Tedd. Granted that your map is quite an inspiration and as you imply, it's complex. However, I do believe that I may still have an equally difficult task ahead, not just due to partially rotated images, but also due to rotated text. Now that is going to be awkward without resorting to text images. g I do believe that you are right and that all can be achieved just with the use of CSS. A little lateral thinking perhaps? :-) Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups Shopsmith 520 + bits Flatulus Antiquitus - Original Message - From: tedd To: css-d Sent: Sunday, May 18, 2008 3:38 PM Subject: Re: [css-d] Image displacement Alan: These are only images. They can be arranged any way you want with rollovers anywhere you want. Your semi-circular tabs are quite simple as compared to this: http://webbytedd.com/bbb/map/ You see, all of what you described can be accomplished with css. Everything you need to do is illustrated in this link. Cheers, tedd __ css-discuss [EMAIL PROTECTED] 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/
