[Pro] High volume image find/display ideas

Legacy Tutorials
41

On Mar 13, 2012, at 12:56 PM, Joe wrote:

I re-downloaded the gistfile, renamed it list.php and replaced the old one with it. The list is now cleaned up:

http://zakmakestracks.com/test1.html

Now it’s a single vertical column 10 lines high, so I still need a change to get the “paragraph” look I want. I had addressed this once before with Tag-only styles > Extended > display: inline, but that seems to have no effect right now. Not sure what to to mess with right now.

I’m also wondering how to gain control of the side margins in the list box, which are always wider than I want regardless of padding settings. Padding is now 0 and still wide on the sides, though the top and bottom are fine.

You don’t seem to have a matching style on #item2 ul – that’s where your padding is coming from. Look back through this thread for the attributes you need (padding-left: 0) and make a new style for the list (ul) itself.

The style that you do have on #item2 li seems to be formatted badly, so it’s breaking all the other styles in the same block. Make sure that if you use the Extended dialog that you don’t add any curly-brackets to the fields. If you read this CSS example on the Web somewhere:

#someId tag { margin: 0; padding: 0; }

That would translate into Freeway as (assuming you had Edit Style open):

1. Click Extended.
2. Click New.
3. Enter 'margin' in the Name field, enter '0' in the Value field.
4. Press OK.
5. Press New.
6. Enter 'padding' in the Name field, enter '0' in the Value field.
7. Press OK.
8. Press OK.

A lot of clicking, to be sure, but the point is that Freeway will create all of the colons, semicolons, and brackets – all you add are the names and values and let it format everything else.

Walter

Thanks to some web research, I’ve also set the preferences in TextWrangler and TextEdit to proper settings to avoid future screwups. Don’t need to add confusion.

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

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

42

That helped the margins. Now to get the paragraph look – get rid of the returns/vertical look?

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

43

You need to fix the way you formatted the #item2 li style. You have two sets of brackets following the selector, not sure how you did that, but please read through my example of how to use Extended to add multiple properties to a style.

Walter

On Mar 13, 2012, at 2:19 PM, Joe Vissichelli wrote:

That helped the margins. Now to get the paragraph look – get rid of the returns/vertical look?

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

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

44

I can’t I know where you mean that is, because I’ve never type a bracket in my life. Anything I put there was copy/pasted, hopefully the codes were rendered properly on my end when I did that. I don’t see one in my Tag-Only>Extended styles. Here’s what I have there:

#item2 li { list-style-type: none; margin-left: 0; }
With Extended:
list-style-type: none
display: inline (which I thought would give me the paragraph I’m after for the list – it was working before the big script screwups I had to replace)

Then again, but with nothing in Extended attributes, I have:
#item2 li { list-style-type: none; margin-left: 0; }

And then there’s this:
#item2 ul { padding: 0; }
And to that I just added these Extended attributes:
margin:0
padding:0

Seems correct to me, but what do I know?

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

45

I went back and re-read how to do the paragraph effect, and I still don’t see how it went wrong. Part of the problem for me is that I’m not so clear on the terminology when you say there are brackets after the selector where they shouldn’t be. I assume the selector is #item2 li, but any brackets I have after that were copied and pasted in.

Can you clarify where they are, since I don’t find them) or recognize them as being extra or wrong, if they are) in the Tag-Only>Extended panel? Did my previous post with the details raise any red flags I’m missing?

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

46

Here’s what I see in the source code of your page:

Look carefully at line 5 and line 6, note how they appear different than the other lines around them. There should only be one set of curly braces in each line. A CSS rule looks like this:

selector { attribute: value; another-attribute: value; }

You can also use white-space formatting (line-breaks and tabs) to make it easier for humans to read, oh, and the last semicolon inside the braces is optional. But what you see above is precisely what you must have in the way of format – no variations are permitted to the basic structure.

Your CSS has two sets of braces, and Freeway won’t do that by itself, so that’s why I was thinking you must have typed (or pasted) those in yourself.

When you use the Edit Styles dialog (through its Extended interface) you really must type in only the attribute and the value in the Name and Value fields, respectively. You cannot introduce any of the other formatting that makes up the body of the style rule, because Freeway is going to build that for you automatically. When you double-up on the control characters {;:} you end up with confusion, and the browser will simply ignore the entire rule (or even all remaining rules below it in extreme cases).

Here’s another way you can try this. First, delete the two styles you made in the Styles palette. Control-click on each one, and choose Delete style. Next, choose Page / HTML Markup from the main menu, make sure that the picker in the lower-left corner of the resulting dialog is set to Before /HEAD, and paste in the following:

This is the entire body of the styles you wanted to create, but properly formatted bracket-wise (and humanized for ease of reading).

Walter

On Mar 16, 2012, at 11:40 AM, Joe wrote:

I went back and re-read how to do the paragraph effect, and I still don’t see how it went wrong. Part of the problem for me is that I’m not so clear on the terminology when you say there are brackets after the selector where they shouldn’t be. I assume the selector is #item2 li, but any brackets I have after that were copied and pasted in.

Can you clarify where they are, since I don’t find them) or recognize them as being extra or wrong, if they are) in the Tag-Only>Extended panel? Did my previous post with the details raise any red flags I’m missing?

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

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

47

I found the problem. When you first suggested them, I was pasting in your suggestions into the Tag box with the brackets and all in my ignorance, then applying Extended styling. Alternately playing with it and seeing the source code has made that clearer. All fixed. Sorry to be high maintenance!

Can you contact me in a non-public email?

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