Flare 4.2 straight to PDF. I have images with a p.img style applied. It is supposed to float the image to the right. sometimes the image goes all the way to the margin like a want and sometimes it doesn't. What should I look for? The top image floats the correct way and the bottom image isn't.
I am aware there is a white border. I had one image float way out to the right. When I drew a border it came in. I changed the border to white to hold onto it.
What is the difference between p.img and img.(whatever)? I know they have p.img applied but is mayber there a better way to handle this?
You do not have the required permissions to view the files attached to this post.
p.img is a class of the p tag that suggests it should work with images (although technically you could apply it to text too).
img.whatever is a class of the img tag.
The main differences are a) you have to apply the class to the appropriate base tag, so they aren't interchangeable, and b) the img tag cannot be used standalone and does not affect placement. So, if you are looking to control margins, centering, etc. then the best approach is to use p.img.
EDIT: sorry, I shouldn't have said floats in there earlier (edited to remove it).
Until next time....
Kevin Amery
Certified MAD for Flare
Applying a float:right to p.img floats the entire paragraph to the right. What you want to do is remove the float from the p.img class, then create a custom img class that has float:right set on it. When you write your paragraph, put the cursor at the beginning of the paragraph, insert the image, then apply the custom img class to the img tag. The image will float to the right of the paragraph but will still be bound by the paragraph, so if you truly want it at the right margin then you want to remove the margin:right property from the p.img class.
Lisa Eagles may soar, but weasels aren't sucked into jet engines. Warning! Loose nut behind the keyboard.
alright, now I have another question. I know the answer is a style issues. My pics are handling correctly. The only issues I'm having are with the 'resized' pics as opposed to the pic size controlled by Capture. I have a pic that sets in the correct area but only one senctence of the paragraph shows and breaks to the next page. The picture, instead of moving to the next page, prints over the footer. What can I set to get the picture to move to the next page?
I'm experimenting with the Positioning style group but the overflow is for on screen type stuff from what I'm seeing. What about printing? (Even though I'm in the print medium.)
Which paragraph did you insert the image in? I'm assuming the second one, but want to double-check. Could you also post the page code for those two paragraphs?
Lisa Eagles may soar, but weasels aren't sucked into jet engines. Warning! Loose nut behind the keyboard.
<h3>System Control</h3>
<p>All simulator hardware (cockpit gages and controls, motion control systems, the visual system, etc.) connects to the simulator's main computer, called the <b><MadCap:keyword term="Host Computer" />host computer</b>, or simply the <b>host</b>. While in use, the simulator operator controls all simulator functions, including VITAL X, using the host. The operator may also control VITAL X at the <MadCap:keyword term="Keyboard:See also KVM" /><strong>Keyboard, Video, </strong><MadCap:keyword term="Mouse:See also KVM" /><strong>Mouse </strong>(KVM) <MadCap:keyword term="KVM: user interface" />user interface station installed in the cabinet.</p>
<p>
<img src="../../Resources/Images/VXKVMClosing.jpg" class="frame" />The multi-port KVM includes a rack-mounted flat-panel <MadCap:keyword term="KVM:monitor" />monitor and <MadCap:keyword term="KVM: keyboard" />keyboard equipped with a <MadCap:keyword term="Mouse: trackball" /><MadCap:keyword term="KVM: trackball" />trackball <MadCap:keyword term="KVM: mouse" />mouse. Much like a laptop computer, the KVM monitor can be folded flat onto the keyboard. Once folded, the unit slides into the rack.</p>
<p>By default, the VCC is always connected to input 8 on the KVM.</p>
Sorry, I guess that wasn't clear. The css code I just posted isn't a class, it's a complex selector. (That's why there's a space between the p and img rather than a period.) What it says is, "if you find an img tag inside a p tag, avoid breaking the page inside."
Until next time....
Kevin Amery
Certified MAD for Flare
I get it. Where do I put that? Do I put that in the p tag section of the css? (Sorry, my coding days were years ago so I can read it but don't know all the nuances.)
I went out on a limb and just stuck it in, compiling now!
I must need to do something different because it isn't working. I'll also check instructions on w3schools.
Last edited by ChristyPatton on Tue Mar 17, 2009 7:30 am, edited 1 time in total.
You need to make sure it's in the correct medium section (i.e. if you only want it for print, put it in the @Print section). Putting it after your other p classes etc. for that medium would be the normal approach.
Until next time....
Kevin Amery
Certified MAD for Flare
since learning that I can float in an image without a div tag I put the image where I wanted it. I had been putting the image at the top left of the appropriate paragraph. With this particular image, I looked at a good pdf without the image and picked a spot within the paragraph and inserted the image. Works like a charm. It MIGHT mean an adjustment in the future but somehow I doubt it.
I want to thank you for your help. I still have a learning curve but I'm getting there. Online things like WDG and w3schools help but I think it is time to buy books.
I like books. Going through one on InDesign in my spare time.
To be honest, most of what I've learned about HTML and CSS has been from designing websites using Dreamweaver. It allows you to do a split view so you can see the HTML code in one pane while your text is in the other, so you can see what code is put in as you type and select various features. If you need to refine the code, you can click right in the code view pane and modify the tag. Plus if you open a stylesheet file in Dreamweaver, it has code hints, so as you start adding a tag it shows you the options available for that tag. Does that in the code view, too. I wish Flare had a split view option and code hints.
Lisa Eagles may soar, but weasels aren't sucked into jet engines. Warning! Loose nut behind the keyboard.