Some CSS Help

Freeway
1

I’m working on styling a horizontal list here and my instructions are to apple styles to any “span” tags.

For example my example list CSS code reads:

#menu li a span {
      float:left;
      display:block;
}

How do I target a specific span with no class attached to it? I see in the code a span style is attached to the list item but it has no class name:

<li><a href="#" title="Link 1"><span>Link 1</span></a></li>

Or is there a way to rewrite this part so it targets a span class name I set on my own in the styles palette?

Kind of confused on the matter and would appreciate any help.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

In Freeway, you can’t make a span without adding a classname to it. So make a dummy style with nothing in the Tag field, and some word (maybe span) in the Name field. Don’t add any style attributes to it, but be sure that Permanent is checked.

So now you have a style that doesn’t do anything. To re-write your CSS so it will only attach itself to this style, you can simply change it to:

span.span {
    float: left;
    display: block;
}

Or, if that doesn’t do the trick, you could do this:

#menu li a span.span {
    float: left;
    display: block;
}

But I suspect that first one will do fine.

Now select the text you want to apply this span.span style to and click on .span in the Styles palette list of styles. As long as what you have applied the style to is less than a full paragraph of text, the code that will be written will be something like this:

<li><a href="#" title="Link 1"><span class="span">Link 1</span></a></li>

By the way, there are MUCH simpler ways to make a horizontal list than this.

Try this:

#menu ul {
    float: left;
    width: 100%;
    padding: 0;
    margin: 0;
}
#menu li {
    float: left;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#menu li a {
    display: inline-block;
    padding: 4px 8px;
    background-color: #cfc;
    border: 1px solid #333;
}

Yes, it’s way more CSS, but absolutely nothing that doesn’t belong in your HTML. Your menu is nothing but a list of links, which is a very semantic structure. If Freeway allowed you to add IDs or classes to lists, then you would be using the absolute bare-minimum amount of HTML, because you could skip that wrapper DIV.

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Thanks Walter. I’ll try it out as soon as I get back.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Oh it didn’t post my message. For some reason I can’t apply a span class to list items without any properties. Meaning I select the text and try to apply the empty style and it doesn’t “apply”. Even when I add a property it won’t apply the “span” class style to it in the code. I can apply the blank style to the DIV itself, meaning it will style the UL part. Strange.

I’ll keep messing around with it. I’m trying to create a tabbed horizontal menu that uses background images to expand based on each one’s specific text-size for a screen-cast I’m working on.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

You could try adding an id to your links with the extended option in the hyperlinks pallet, then target the id with a style to change the background.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Try adding one innocuous property, like color, to your empty style. Or just use the elements of the list as I showed you. The spans are non-semantic and just add bulk to your page that isn’t necessary.

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Walt is right – In my experience Freeway won’t publish some class
styles that are “empty” (without definition) or are not actually
applied to a page.

There are ways around these limitations, but loaded with caveats. If
the class style you want to define appears in the external stylesheet
instead of the embedded one, and isn’t applied to any object in the
site in the “traditional” Freeway point-and-click way, then you can
define the class style by using the Tag field of the Edit Styles
window (remember to include the leading period). Freeway (almost?)
always publishes Tag Name styles.

If your class style appears in the external stylesheet and you want to
have some traditional application ability, what I will do is create a
“dummy” page in the site (no links to it) where I can place items like
random text bits with styles applied the normal Freeway method. The
style gets published to the external stylesheet, and I can then call
the style anywhere else in the document with either extended or custom
code.

Custom styles can of course be embedded into the head of a page, but
why do that if you don’t have to.

On Sat, Sep 6, 2008 at 4:08 PM, waltd wrote:

Try adding one innocuous property, like color, to your empty style. Or just use the elements of the list as I showed you. The spans are non-semantic and just add bulk to your page that isn’t necessary.

–
Ernie Simpson – Freeway 5 Pro User – thebigerns.com

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options