CSS menu again

Further to my recent mail about the width of CSS menus and how to make
it fill the site by pasting it into another box: I now discover that,
if I make the menu and paste it into a box which I’ve coloured black,
it works fine if that’s all that’s on the page. If I try to paste the
two parts into another box as an inline item, it stops working.

best wishes,

Paul Bradforth

http://www.paulbradforth.com


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

Paul,

Rather than putting your CSS menu inside another html box, try adding a style to the ul (with the Extended option in the Style Editor) to set the Width to 100%. That should make your list the full width of the browser window…or at least the full width of your page layout.


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

On 19 Sep 2008, at 18:53, chuckamuck wrote:

Rather than putting your CSS menu inside another html box, try
adding a style to the ul (with the Extended option in the Style
Editor) to set the Width to 100%. That should make your list the
full width of the browser window…or at least the full width of
your page layout.

You mean select the whole of the list text and add it via ‘Extended’?
Or select the box that contains the list and add it via ‘Extended’?
Tried both, with no result.

best wishes,

Paul Bradforth

http://www.paulbradforth.com


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

If you’re doing a CSS-based layout you would then target the DIV ID or the class style applied to your list items.

For example you might have a list in a specific DIV called “Blank” and inside you have an unordered list formed with some list items in there. To target the list items you’d have to put a new “TAG” style into your CSS palette by using the extended tab and putting in

#Blank ul {width: 100%}

Via the extended tab. With “width” being the name, and value being “width:100%.” Then put the “#Blank ul” in the TAG name-able area, not the NAME area.

Then it will target those list items in that DIV.


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

On 19 Sep 2008, at 22:12, Dan J wrote:

If you’re doing a CSS-based layout you would then target the DIV ID
or the class style applied to your list items.

For example you might have a list in a specific DIV called “Blank”
and inside you have an unordered list formed with some list items in
there. To target the list items you’d have to put a new “TAG” style
into your CSS palette by using the extended tab and putting in

#Blank ul {width: 100%}

Via the extended tab. With “width” being the name, and value being
“width:100%.” Then put the “#Blank ul” in the TAG name-able area,
not the NAME area.

Then it will target those list items in that DIV.

Thanks Dan, and Chuckamuck; you both said the same thing; I tried it,
but still can’t get it to work.

I made a new document with only a CSS menu, pasted into an HTML box in
order for the 100% width to have a reference (100% of the container).
I made the style as suggested, added the Extended attribute, and
nothing altered at all. Here’s a picture of what I did:

http://www.paulbradforth.com/personalpics//ZZ635B9C95.jpg

This is driving me nuts. I’d love to know why I can’t just paste the
menu into another DIV, clear the height of that containg DIV so that
the menu could expand if someone enlarges the text and the containing
DIV would expand with it. Come to that, why can’t I just select the
DIV that’s called ‘menu’, go to ‘Item>Extended’ and enter ‘width: 100%’?

best wishes,

Paul Bradforth

http://www.paulbradforth.com


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

Paul, it’s not clear if you used the action to create your CSS menu or not, but here’s a simpler suggestion.

After you remove your CSS menu box from the second box you are using as a background, select your CSS menu box and uncheck the height and width buttons in the Inspector pallet. Set the background color of the box in the inspector pallet to whatever you want.

Doing this will give the html box the list is in a solid color and it will stretch all the way across the browser window.


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

On 19 Sep 2008, at 23:45, chuckamuck wrote:

Paul, it’s not clear if you used the action to create your CSS menu
or not, but here’s a simpler suggestion.

Yes, I used the action. Don’t know another way …

After you remove your CSS menu box from the second box you are using
as a background, select your CSS menu box and uncheck the height and
width buttons in the Inspector pallet. Set the background color of
the box in the inspector pallet to whatever you want.

Did that …

Doing this will give the html box the list is in a solid color and
it will stretch all the way across the browser window.

No change. Interestingly, when I unchecked width and height of the
menu box, the height grew.

I know it’s a stupid question but: have you tried this and seen it work?

best wishes,

Paul Bradforth

http://www.paulbradforth.com


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

On 19 Sep 2008, at 23:45, chuckamuck wrote:

After you remove your CSS menu box from the second box you are using
as a background, select your CSS menu box and uncheck the height and
width buttons in the Inspector pallet. Set the background color of
the box in the inspector pallet to whatever you want.

Doing this will give the html box the list is in a solid color and
it will stretch all the way across the browser window.

Chuckamuck: further to my last mail, I just tried a new document, made
a CSS menu in an HTML box, coloured it black, deleted the width and
height and bingo, it stretched all the way across. Then I pasted it
into another HTML box, as it would be on my site, and it became short
again :frowning:

best wishes,

Paul Bradforth

http://www.paulbradforth.com


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

Then I pasted it
into another HTML box, as it would be on my site, and it became short
again :frowning:

If the html box you are pasting into has a static width then so will your menu. Do you have a reference for what you are trying to achieve? Maybe there is another way to do what you want.


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

On 20 Sep 2008, at 00:11, chuckamuck wrote:

If the html box you are pasting into has a static width then so will
your menu.

I tried deselecting the height for both the menu DIV and the
containing DIV, to no avail.

Do you have a reference for what you are trying to achieve? Maybe
there is another way to do what you want.

I’ve stuck it up, for what it’s worth:

http://www.paulbradforth.com/menu/

This version has the menu pasted into a black containing box. It works
fine, unless you enlarge the text in the browser, whereupon the menu
bar gets deeper than the container and you can see the join.

best wishes,

Paul Bradforth

http://www.paulbradforth.com


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

Ok, sorry for not getting back earlier but was a bit busy…

Anywho, I took the liberty of recreating your sample page. Actually, I did two versions. One duplicates yours using the CSS menu action and placing the menu inside another html box for the background (although I left out the extra menu link styling you added). The other does not use the CSS menu action at all but creates the same effect using only manual css styling.

The difference between them is basically less code in the non-CSS menu version because of the lack of all the fwNav formating.

There are a couple of other differences from your site. I noticed yours has an issue in the footer where it does not expand correctly. The other is I used XHTML strict.

Hope this is of some use. http://chucksdesigns.com/downloads/Pauls_page.zip


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

Thanks for this, and apologies for not replying sooner. I get all the forum mail by email, and it was only that I happened to come here to the forum that I noticed your kind download, which I downloaded.
I actually wrote to support at Softpress about this, as I tried what both you and Dan suggested and couldn’t make it work at all, hence the reply I made where I asked if you’d actually seen it work, yourself.
Support replied to me, telling me basically to enter ‘100%’ in the width field in the Inspector, which worked flawlessly, first time. What you and Dan suggested was to make a style that basically said: #menu ul {width: 100%}, which for some reason didn’t work for me.
I had also, during the hours I spent trying to get this to work, deselected the width attribute in the Inspector by clicking the little icon next to it, which I would have thought would have the same effect as putting ‘100%’ in the Inspector’s width field, but apparently not.
So my problem was solved purely by entering the actual text: ‘100%’ in the Inspector. I notice that in your downloadable example, you have the same thing, although that wasn’t what what you suggested to me before.
Many thanks for your patience. I’m astonished that I could find no reference to this almost trivial bit of info anywhere, not in the various how-tos or the manual. The manual, in particular, goes into very fine detail about what every part of the CSS menu Actions palette does, but nowhere does it tell you how to actually stretch it from one side to the other! Gobsmacked. Am I alone? I mean, there are around three different ways to suggest to Freeway that the menu should be 100% of the width of its container but only one of them actually works?


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

Paul, the sample file without the CSS menu action involved works as I described using the 100% width. Adding the width 100% with a custom style will work as you saw without inserting the menu into another html box, but as soon as you do the new style is ignored.

The CSS menu action is a convenience but it has it’s limitations for simplicity sake which has merit for the beginer. But to truly fully control the look and function of a css menu at this point it is only possible with manual styles. Perhaps the next version of Freeway will have a more robust CSS menu action with more styling options available.

I’m sure that Softpress wants their manual to be accurate and thorough, but the manual was created for the purpose of learning to use the software. Anything beyond that is more in the domain of third party materials. Unfortunately, the Freeway community is small and for financial reasons no third party FW reference materials have materialized so far. There are a plethora of CSS books on the market to learn the tricks from, which then leaves learning the Freeway-centric way of using those resouces to achieve what is instructed. This is where I feel that the manual fails. But in defense of Softpress there is only so much instruction in general web design techniques they can provide wihtout becoming a university course. So it is up to the individual to push the boundaries of knowledge where the Freeway manual is incomplete.

This is why this forum is so valuable.


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

On 24 Sep 2008, at 00:30, chuckamuck wrote:

Paul, the sample file without the CSS menu action involved works as
I described using the 100% width. Adding the width 100% with a
custom style will work as you saw without inserting the menu into
another html box, but as soon as you do the new style is ignored.

Thanks, losing my mind and was talking about the wrong version. All is
as you said, and thanks.

The CSS menu action is a convenience but it has it’s limitations for
simplicity sake which has merit for the beginer. But to truly fully
control the look and function of a css menu at this point it is only
possible with manual styles. Perhaps the next version of Freeway
will have a more robust CSS menu action with more styling options
available.

I have made CSS menus by hand before, albeit without submenus. I can
read and write CSS but am not fluent. A bit like the way I can read
music: I know what all the notes of the stave are, and can identify
the note by seeing which line it falls on, but unlike my daughter, I
can’t just look at it and play it :slight_smile:

I’m sure that Softpress wants their manual to be accurate and
thorough, but the manual was created for the purpose of learning to
use the software. Anything beyond that is more in the domain of
third party materials. Unfortunately, the Freeway community is small
and for financial reasons no third party FW reference materials have
materialized so far. There are a plethora of CSS books on the market
to learn the tricks from, which then leaves learning the Freeway-
centric way of using those resouces to achieve what is instructed.
This is where I feel that the manual fails. But in defense of
Softpress there is only so much instruction in general web design
techniques they can provide wihtout becoming a university course. So
it is up to the individual to push the boundaries of knowledge where
the Freeway manual is incomplete.

Agreed. But throughout the manual it would be nice to have little
hints or ‘sidebars’ regarding some of the more contentious bits that
people have to find out the hard way.

best wishes,

Paul Bradforth

http://www.paulbradforth.com


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