How do you add "style" to a border?

[Bobby]

I'd like to align a picture to the right and have the text wrap around it
but leave a bit of space so it looks neat.
By playing around I found a way to do it but I have to paste the following
code into the html:

style="border-left:10px solid #ffffff; border-top:5px solid #ffffff"
align="right" hspace="0"

The whole command might look like this:

<img border="0" src="boat.jpg" width="210" height="168"
style="border-left:10px solid #ffffff; border-top:5px solid #ffffff"
align="right" hspace="0">

I've tried to do this using the Frontpage interface (I have FP 2002) but it
changes the code and I lose that extra space.
Does anyone know how to do it thru the program?

Bobby

 

[Ronx]

Right click the image, choose Picture Properties. On Appearance tab

Set the alignment to right
Set Horizontal Space to 10
Set vertical Space to 5
Set border to 0

Results in <img border="0" width="210" height="168" src="boat.jpg"
align="right" hspace="10" vspace="10">
which matches your description, assuming the page background is white.

 

[Murray]

<img border="0" src="boat.jpg" width="210" height="168" style="float:left;
margin-left:10px;">

 

[Wes]

Picture properties / Appearance / Wrapping style (Not alignment, choose
right)

 

[Bobby]

Hi Ronx,

The problem with this is that when I align to the right the 'space' created
by "horizontal space = 10" leaves an invisible border on the right, thus the
text does not align vertically when set to justify.
What I want is the text to line up vertically on the right both above and
below the picture as it wraps around but not be right up against the picture
itself (that's why I am trying to leave only the left border and top or
bottom if necessary.

 

[Bobby]

Murray,

Placing: style="float:right; margin-left:10px;" works but my goal is to
find a way of doing it with the interface of Frontpage and not editing the
html.
I've tried playing around with style commands and borders (picture
properties/general/style/format/border/custom/solid/left/width) but they
somehow keep resetting and I just can't get it to do what I want.

 

[Bobby]

Wes,

Choosing "wrapping style" automatically changes the alignment as well, they
are the same (both become 'right').

The problem is that when I align to the right the 'space' created
by "horizontal space = 10" leaves an invisible border on the right, thus the
text does not align vertically when set to justify (the text goes past the
end of the picture).
What I want is the text to line up vertically on the right both above and
below the picture as it wraps around but not be right up against the picture
itself (that's why I am trying to leave only the left border and top or
bottom if necessary.

 

[Stefan B Rusynko]

Try selecting the image & right click for Picture Properties
Style Format Paragraph - Set Indentation - Before Text to 10

--




| Murray,
|
| Placing: style="float:right; margin-left:10px;" works but my goal is to
| find a way of doing it with the interface of Frontpage and not editing the
| html.
| I've tried playing around with style commands and borders (picture
| properties/general/style/format/border/custom/solid/left/width) but they
| somehow keep resetting and I just can't get it to do what I want.
|
|
| "Murray" <[email protected]> ha scritto nel messaggio
| | > <img border="0" src="boat.jpg" width="210" height="168" style="float:left;
| > margin-left:10px;">
| >
| >
| > --
| > Murray
| >
| > | > > I'd like to align a picture to the right and have the text wrap around
| it
| > > but leave a bit of space so it looks neat.
| > > By playing around I found a way to do it but I have to paste the
| following
| > > code into the html:
| > >
| > > style="border-left:10px solid #ffffff; border-top:5px solid #ffffff"
| > > align="right" hspace="0"
| > >
| > > The whole command might look like this:
| > >
| > > <img border="0" src="boat.jpg" width="210" height="168"
| > > style="border-left:10px solid #ffffff; border-top:5px solid #ffffff"
| > > align="right" hspace="0">
| > >
| > > I've tried to do this using the Frontpage interface (I have FP 2002) but
| > > it
| > > changes the code and I lose that extra space.
| > > Does anyone know how to do it thru the program?
| > >
| > > Bobby
| > >
| > >
| >
| >
|
|

 

[Murray]

Bobby:

In FP2003

1. Select the image, and edit the properties of the <img> tag.
2. Click Style....
3. Select Format... > Paragraph
4. Set Indentation Before text: to 20px (!?!)
5. Click OK
6. Select Format... > Position
7. Select Wrapping style (!?!) > Left
8. Click OK to exit

That will transform this -

<img ...>

to this -

<img style="float:left; margin-left:20px;"...>

In my opinion, this is where FP really drops the ball. They make doing
things the *right* way very hard in many cases, and they use very confusing
nomeclature in the process. Who would think to use "indentation before
text" to specify the left margin of an image? 8(

 

[Bobby]

Thanks Stefan that works for me.

 

[Bobby]

Murray,

That is a fine solution, thank you.
For some reason if you don't follow the order correctly FP resets the
parameters!

Here's the definitive solution for me:

1. Select the image, and edit the properties of the <img> tag.
2. Click Style....(general)
3. Select Format... > Paragraph
4. Set Indentation Before text: to 10px
5. Set Spacing Before: to 5px
6. Click OK
7. Select Format... > Position
8. Select Wrapping style: Right
9. Click OK to exit

The idea behind setting "spacing before" to 5 px is to make sure there is a
bit of space above the picture as well as to the left, it even balances the
picture nicely with the bottom margin too.

Thanks again for all your help!

 

[Murray]

You're OK. I think you'll agree that manually coding this is a MUCH better
idea. After all, you just need to give the img an id and you're bada bing
bada boom with a simple style in the stylesheet, so to speak.
Alternatively, you could use a cleverly crafted descendent selector to refer
to just that specific image, and then you wouldn't have to touch any code on
the page!