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. > >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/
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. 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/
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 s 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
- 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.
> 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 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 s 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
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 ?
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/
