Box model, P tag and images

Freeway
1

OK. I’ve styled my P tag, so all my body copy is automatically styled. The P tag has 50px line height and 50px space after.

I’ve then created a html item and inserted a graphic item, then a html item.

But the two items don’t touch, see example. It seems the P tag is effecting the layout. It seems that the graphic item is being inserted into the text rather than creating a div. Which is strange; if I draw an absolutely positioned graphic item, in the source code, it is a div - but this isn’t the case when I use “Insert”.

Do people not style the P tag because it creates layout issues??

Mark

http://www.advocatedesign.co.uk/test/

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

2

I’ve done some more experimenting. Even if the P tag isn’t styled with line height or space after it is not possible to do the box model: with a html item with a graphic item inserted followed by a html item inserted - there is a vertical gap between them.

It appears that:

  1. Don’t style the P tag
  2. When using box model, graphic items have to be inserted in a html item container. And the container should have nothing else inside it.

Mark

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

3

The line-height of the p tag affects the image because it is inflow with
the text. This is appropriate for images that are part of the content, to
appear with the content. You can take that inflow image “out” of the
visible flow by applying a float:left to it. I think this solves your issue?

–
Ernie Simpson

On Fri, Jul 12, 2013 at 10:37 AM, Mark email@hidden wrote:

I’ve done some more experimenting. Even if the P tag isn’t styled with
line height or space after it is not possible to do the box model: with a
html item with a graphic item inserted followed by a html item inserted -
there is a vertical gap between them.

It appears that:

  1. Don’t style the P tag
  2. When using box model, graphic items have to be inserted in a html item
    container. And the container should have nothing else inside it.

Mark

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

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

4

Hi Earnie

All I want is a single column with a pic at the top and text beneath. See example.

Even when I delete all the styling from the P tag, there is still a vertical gap between the graphic item and the html item.

How do I do this?

Do seasoned pro FW users style up the P tag? I’ve created a body tag with line-height and space after and this badly effects the layout of my box model. How do you style your body copy? Do you use the P or Body tag?

Thanks

Mark

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

5

To achieve a single column with a pic at the top and text directly underneath, it appears I have to:

  • insert two html items
  • insert a graphic item into the top html item (this acts as a container for the image)
  • don’t use line-height or space-after or space-before on the P or Body tag

Is this correct?

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

6

If you have two HTML items inline next to each other, the P tag won’t affect them at all, because they won’t have a P between them.

div
	div
	div

If you have an HTML item and a graphic item inline next to each other, you’ll get this:

div
	div
	p
		img

And then you will have to worry about the line-height of the p tag. Now, if there are no other p tags in the outer div, you can use the ID of that div to force any p tag inside it to have little or no line-height. Something like this:

div#item42
	div#item43
	p
		img#item44

And then the CSS:

#item42 p {
	line-height: 1;
	margin: 0;
}

That will give you a tight fit between the peer div and p>img objects.

Walter

On Jul 12, 2013, at 11:06 AM, Mark wrote:

To achieve a single column with a pic at the top and text directly underneath, it appears I have to:

  • insert two html items
  • insert a graphic item into the top html item (this acts as a container for the image)
  • don’t use line-height or space-after or space-before on the P or Body tag

Is this correct?

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

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

7

Sorry is there a FW way to have no gap between an insert graphic item and a html item?

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

8

Presumably this?

To achieve a single column with a pic at the top and text directly underneath, it appears I have to:

• insert two html items
•insert a graphic item into the top html item (this acts as a container for the image)
• don’t use line-height or space-after or space-before on the P or Body tag

or

• insert two html items
• in the top item use ‘background image’
• don’t use line-height or space-after or space-before on the P or Body tag

Is this correct?

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

9

Freeway offers you the ability to create CSS styles that apply “magically” to the elements you want to affect. Here’s how you would translate my raw CSS into a “Freeway” solution. These steps are general, and can be adapted to many other layout problems.

  1. Click once on the outer (common parent) HTML box. Look in the Inspector at the Name/ID field. Write down the ID you find there, note that this is case-sensitive.
  2. In the Styles palette, click on the “gear” menu and choose New Style… from the options. In the Tag field, type a # followed by the ID you wrote down, without a space between. #item42 for example, followed by a space and the letter p. Tab into the Name field, delete whatever you find there, and tab back out to ensure that nothing gets auto-filled into that field. The Name field must remain empty.
  3. Click the Extended button, then New or Add to add a new name/value pair. In the Name field, enter line-height. In the Value field, enter the numeral 1. Click New/Add again, and repeat with margin and 0 (zero). Okay out of the stack of dialogs.
  4. Don’t apply this style to anything, ever. It will just work, as long as you never rename the parent HTML box.

Walter

On Jul 12, 2013, at 11:18 AM, Mark wrote:

Sorry is there a FW way to have no gap between an insert graphic item and a html item?

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

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

10

Hi Walter

Surely I can do the suggestion from my previous post?

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

11

On Jul 12, 2013, at 11:26 AM, Mark wrote:

Presumably this?

To achieve a single column with a pic at the top and text directly underneath, it appears I have to:

If all you want is to have the text snug directly under the picture, all you need to do is insert your image, then enter a soft-return (break tag) after that, and type your text. The result will be this, in code:

<p><img ... /><br />Your text here</p>

Visually, the text will be immediately under the image, separated only by the line-height of the text in that container. To enter a soft-return in Freeway (as with any other DTP application on the Mac) you type Shift-Return.

• insert two html items
•insert a graphic item into the top html item (this acts as a container for the image)

This will work, all it’s doing is substituting the div (html item) for the p. Either one will work, and either one may be styled identically.

• don’t use line-height or space-after or space-before on the P or Body tag

Not important if you override the style more specifically.

or

• insert two html items
• in the top item use ‘background image’

That’s a great idea, certainly this will work.

• don’t use line-height or space-after or space-before on the P or Body tag

You don’t need to adjust these attributes at the global level, unless you really want to. If you do, then you need to override the global style with one that is more specific. The style rule I outlined earlier #item42 p is quite a lot more specific than just a single style for the p tag. Whatever you add to #item42 p will override the base style you set in p, but only when the p is inside the #item42 container. The point of this is that you can set general rules, then override or extend them in specific parts of your page, so you don’t have to set the font over and over in each style, for example, but you can have specific sizes for a p tag in different parts of the same page.

Walter

Is this correct?

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

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

12

Hi Walter

Do you style up the P tag to create a default style for your body copy? Or do you use the Body tag to do this? or do you style your body copy with a style starting in FW with a full stop (this neatly side steps the issues with giving the P and Body tag line-height, but it must be a pain to have to manually apply a style to all your body copy)?

Thanks

Mark

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

13

Anything that I really want to carry over the entire page, like a base font, I style in the body tag, or in the #PageDiv tag. That’s the common parent to all elements on a Freeway page. The reason I would not just style the P tag is because not every bit of text on the page gets put in a P. If you are styling some of the text into a list, either numbered or bulleted or none, then your text will not be in a p at all. If you use header tags (and you SHOULD) then those aren’t p tags any more, either. So since it’s a very good idea to use fonts sparingly, styling the body or #PageDiv to a single font is a great shortcut, since you only need to set the font once. If you decide you want a pull-quote or a headline to have a different font and color, you can set that once there, but for most things, you will leave the font alone and only style the size or the font-style (italic, maybe).

Walter

On Jul 12, 2013, at 11:46 AM, Mark wrote:

Hi Walter

Do you style up the P tag to create a default style for your body copy? Or do you use the Body tag to do this? or do you style your body copy with a style starting in FW with a full stop (this neatly side steps the issues with giving the P and Body tag line-height, but it must be a pain to have to manually apply a style to all your body copy)?

Thanks

Mark

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

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

14

Hi Walter

I’ve just styled up a Body tag (with line-height and space-after) and it messes up my box model layout. Graphic items inserted into html items now have a massive space below them (presumably the line-height of the Body tag)

I think I will avoid using P or Body tag as it messes up my layout. I’ll manually style my body text (rather than use P or Body tag styles to do this automatically for me)

Thanks

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

15

Definitely don’t set space-before or -after on the body tag. Remember, those properties map to the margin-top and margin-bottom, and those properties then apply to the body – which is 100% height, and to all elements you add into the body, which will have a defined height of their own. Unless you set the margins on every other item (and Freeway will only set this if you ask it to) then they will inherit those properties where you don’t expect them. Line-height and font and font color are harmless in layout terms, so go ahead and set those as you like at the body level.

Walter

On Jul 12, 2013, at 12:01 PM, Mark wrote:

Hi Walter

I’ve just styled up a Body tag (with line-height and space-after) and it messes up my box model layout. Graphic items inserted into html items now have a massive space below them (presumably the line-height of the Body tag)

I think I will avoid using P or Body tag as it messes up my layout. I’ll manually style my body text (rather than use P or Body tag styles to do this automatically for me)

Thanks

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

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

16

Styling the body element affects almost ALL the text on your pages - not
just the p tag. Styling the p tag affects ONLY the p tag.

For example, I will set the font-family on the body tag - so all my
paragraphs, headers, etc. have the same font face. Line-height is, I think,
better individually calculated so I would set that on the specific tags
like p. Text styles in the body tag should be broad strokes, while specific
text tags (like p) should handle directed, individual text elements.

–
Ernie Simpson

On Fri, Jul 12, 2013 at 11:46 AM, Mark email@hidden wrote:

Hi Walter

Do you style up the P tag to create a default style for your body copy? Or
do you use the Body tag to do this? or do you style your body copy with a
style starting in FW with a full stop (this neatly side steps the issues
with giving the P and Body tag line-height, but it must be a pain to have
to manually apply a style to all your body copy)?

Thanks

Mark

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

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

17

I would still set the image alignment to float:left - the result when
applied to the example currently shown at
http://www.advocatedesign.co.uk/test/ causes no space between the image and
the div element that follows it.

–
Ernie Simpson

On Fri, Jul 12, 2013 at 11:00 AM, Mark email@hidden wrote:

Hi Earnie

All I want is a single column with a pic at the top and text beneath. See
example.

Even when I delete all the styling from the P tag, there is still a
vertical gap between the graphic item and the html item.

How do I do this?

Do seasoned pro FW users style up the P tag? I’ve created a body tag with
line-height and space after and this badly effects the layout of my box
model. How do you style your body copy? Do you use the P or Body tag?

Thanks

Mark

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

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

18
  • insert a graphic item into the top html item (this acts as a container
    for the image)

No, it doesn’t work that way. When you select an html item and apply an
image to it like with a graphic image box, FWP converts the html item into
a graphic container. An image made as you describe is not contained at all,
but is inline just as if you had inserted it as a graphic item.

I guess I’m still not following what you want - your example is just boxes
and don’t make sense to me.

Here, I made an example -
http://cssway.thebigerns.com/workbench/maerk-imageplustext/

More like the top or bottom?

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

19

Hi

All I want to know is how to create a single column, with a graphic item at the top and a html item below it - in box model - with no vertical gap between them.

I think the answer to the first part of the question is:

click inside a html item and insert two html items
then click inside the top html item and insert a graphic item

And the second part of the question:

I’ve learned that the vertical gap is caused by line-height or space-before or space-after applied to the Body or P tag.

Cheers

Mark

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

20

If I draw a html item (yellow), see example, then click inside it and insert a graphic item (black), then a html item (cyan) - I get a big vertical gap between the top and bottom items regardless of whether the graphic item is floated left.

Cheers

Mark

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