I have some inline Carousel 2 Text Tabs, and I’d like their background color to change when active. This is all easy to set up using CSS styles in the Style Palette, but I’m finding that background-color is only changing the area just behind the text, rather than altering the fill of the entire div (as if the text had been highlighted with a marker).
Oddly, if I create plain divs and apply the style to them, the fill works properly! So I’m thinking there is something special about the s created by the action, but I can’t quite nail down what it is.
I’ve searched high and low here on FWTalk and on the Internet, but haven’t been able to find a solution. Does anyone know what might be going on here? Thanks!
The simple way to style these links is to not try to style them with inline styling. That’s where the span comes from – not the Action. Just as with any other HTML text link, the correct way to style it is to select the container element (HTML box) and use the Inspector: Styles tab, Link segment. Those controls will create a clean, span-less style for the A tag itself. If you want the link to have a block shape to it, you wouldn’t need to wrap it in a div, only apply some Extended CSS to the links in that box. For example, this would give you a gray rectangle behind each link inside the box with the ID ‘foo’:
To do that in Freeway, you would simply select the box “foo” and use the Inspector as noted above to set the link styles. The parts of that style that you would have to apply with the Extended interface are the padding and the display attributes. Everything else is there (albeit not exactly named correctly) for you to do with the visual interface.
Walter
On Feb 8, 2014, at 7:49 AM, derekzinger wrote:
Aha! The only wraps around the text, which explains why the styling is being applied where it is.
Is there a simple way around this? Perhaps setting it up as a CSS menu?
Thanks for the explanation, Walt. I’ve been doing some pretty heavy battle here, but with your kind words and my slowly growing knowledge of CSS I’ve managed to get it all working. Heck, I’ve even managed to work out all on my own which multiple selectors were needed to get the active Carousel tabs to display properly — Codecademy would be proud! ). And to top it all off, the CSS3 Corners action can be added in without a hitch.
Anyway, your suggestion took the inverse route of what I was thinking: instead of moving the link onto the enclosing div, it moves the styling onto the “inline-block” of text and makes it larger by adding flexible height and padding. Genius!
Actually, scratch that bit about the CSS3 Corners. Rather than use the action, I swiped the CSS code and added it in to Inspector > Link Styles > Extended.
). And to top it all off, the CSS3 Corners action can be added in without a hitch.