Keep images & text aligned?

Can someone help me, how do I keep images aligned to the centre of a page? as when I resize my browser the image doesn't match up with the background.

Hi
You can pin the image on page , so the image will be in a fixed position.
Please check Zak's response in this thread :
https://forums.adobe.com/thread/1198978
Thanks,
Sanjit

Similar Messages

Image/Text Alignment as browser(s) expand / contract

Here is what I am looking to do.
First, let me post the site so you may see what I am talking about:
www.andrewsconstructioninc.biz
What I would like to do is have the images/flash and/or java "space" (along with text and pictures) keep their ratio as the "user" (browser) window either shrinks or expands. If a user uses SHIFT+Scroll Wheel (on mouse) zooms in or out - the images and text will keep proper spacing along with their borders.
Right now - if I zoom in the "construction picture" will shrink or enlarge, but the "gray" area does not
I want the page to always look the same regardless if the window is being zoomed in or out
What is the best way to do this without having to rewrite the entire site?

Use ems instead of pixels.
Elastic Layouts -
http://www.alistapart.com/articles/elastic/
The Incredible Em
http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Text Alignment - Image Captions

I am trying to set up a wiki page with various images, and wanted to provide each image with a caption (displayed underneath). What is the best way to achieve this? I haven't seen any options for text alignment in the wiki, and it strips my CSS attributes out.
Ideas?

I have been able to solve this in the following manner:
1) Switch to code view by clicking on the "" button.
2) Add your image that will have a cation using the following syntax:
The longdesc attribute will be used as the target location in case you want to link it (I haven't yet figured out how to make the link work in the same browser without opening a new window).
The key here was to use the thumbnail class.
Any other thoughts or insights that you may have related to this?
Thanks!
-Mike
Message was edited by: Miggl

Hyphenation & text-align:justify in PDF's with CFDOCUMENT

Hello everybody!
We are using CF8.1 and are having problems of generating well designed PDF outputs with CFDOCUMENT. We would like to print out reports, which are hyphenated and have the text aligned. Example:
This works fine:
<html lang="en">
<STYLE>p { width:260px;background-color:blue;-moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; -hyphens: auto;text-align:justify}</STYLE>
<P>Haematodynamometer Haematodynamometer Haematodynamometer Haematodynamometer Haematodynamometer Haematodynamometer Haematodynamometer Haematodynamometer Haematodynamometer</P>
</html>
This won't:
<CFDOCUMENT FORMAT="PDF">
<html lang="en">
<STYLE>p { width:260px;background-color:blue;-moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; -hyphens: auto;text-align:justify}</STYLE>
<P>Haematodynamometer Haematodynamometer Haematodynamometer Haematodynamometer Haematodynamometer Haematodynamometer Haematodynamometer Haematodynamometer Haematodynamometer</P>
</html>
</CFDOCUMENT>
Do you have any solutions on this topics? Are do I have to wait until CF11.
Thanks in advance
Matthias

4tun8mom wrote:
Now, the problem is that, while the client likes this, they don't like that the headers and footers are grayed out and the colors are not as vibrant in Word as the program part I created and saved as a PDF.
They're being a bit impractical in their complaints, in fact they remind me of my Dad! The final product is still fine.
4tun8mom wrote:
They also don't like that if we keep this as a Word document, all the text is editable.
That's fair enough, the solution would be to make the text in the header and footer an image instead.
4tun8mom wrote:
So my question is, can I create a PDF that has the same features with the expandable text control boxes. If I can, would you recommend InDesign to do this?
No you can't. I'm pretty sure you can't create a PDF with expandable boxes and I'm very sure that you can't create a PDF that will add pages with headers and footrs. However you can create a PDF with basic fillable text boxes, they're called forms and you need Acrobat as well to do it, google it and you'll find plenty of info.

Text alignment with footnotes

In (unstructured) Framemaker, I can't get (especially
footnote) text to sit consistently at the very bottom of the page.
I don't want to use feathering, as this knocks out the line-by-line
text alignment across the page. Is there any obvious way of getting
the variable space to appear between the main text and the footnote
separator as standard?

FTE does the low-level work of laying out glyphs within a
TextLine (including mapping Unicode characters to glyphs and
implementing the bidirectional layout algorithm), not the
high-level work of arranging TextLines relative to each other. It
leaves the latter task to libraries such as TLF, so that they can
implement complex algorithms like
flowing-from-container-to-container or
wrapping-text-around-an-image. These don't really belong in the
Player because they are less clearly defined and need to evolve
more quickly to meet the needs of various use cases.
So... even something as basic as laying out a block of
right-aligned text is not something that FTE was designed to make
effortless. A low-level package like FTE was designed for
generality, not for ease-of-use.

Table (css) text align in ff

does anybody know of an issue where setting a table class
with text-align attributes won't center the text of the table in
firefox?
I can force it to center by adjusting the align attribute in
the <table> tag, but i have a several tables that i would
like to keep control of in my stylesheet... i found a similar
situation on a forum through google, but ended just suggesting to
wrap it in a <div align="center">... Of course i can just set
the table attributes, but i figured i'd check with y'all
first...

> oh! i see, that all makes sense now... hence the "root"
in root relative
> :)
To quote Homer, "d'oh".
> while we're on the subject, is there a preferred file
extension for ssi?
The parent file must be named with an shtm(l) extension IF
you are using
HTML/ASP includes, and IF your host has not enabled
server-parsing for all
files. If you are using PHP includes, then the parent file is
names with a
*.php extension, and so on (for CF/JSP/.Net).
The file being included can have any filename extension you
prefer - I like
*.monkeybutt myself, but that's just me.
> because when i
> saved them as .html, dw added all the doctype and head
markup...
> or is the problem in a setting in dw?
I don't think this is what you did. DW doesn't add that when
you save, it
adds that when you create the file. I usually create a plain
text file,
copy and paste the code to be included, and then (depending
on the code
type) save it with an appropriate extension (notwithstanding
my penchant for
monkeybutt), so that the code is properly colored by DW.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"m0piqsutjjqv4du" <[email protected]> wrote
in message
news:ejn1qm$6dh$[email protected]..
> oh! i see, that all makes sense now... hence the "root"
in root relative
> :)
>
> while we're on the subject, is there a preferred file
extension for ssi?
> i've been using .txt (which DW is obviously not managing
links) because
> when i
> saved them as .html, dw added all the doctype and head
markup...
> or is the problem in a setting in dw?
>

Fireworks -- PDF for print, keeping editable text?

I'm trying to print flyers (to PDF) that i've designed in
Fireworks. I'm happy with the images, colors, etc., however, the
text also exports as an image. I'd like to be able to export the
text as text so that when a viewer zooms in on the pdf, the text
does not become grainy. Also, the physical printing of the text
would look much more clear. I'm sure there are proper terms that
i'm not using, but i hope that someone more experienced than me is
reading! Just trying to keep the text "editable" when printing to
PDF from Fireworks. Any input would be appreciated. THanks! (BTW,
going through Photoshop won't work because it changes the text
layout too much.)
thanks again,
matt

BananaPhish wrote:
> I'm trying to print flyers (to PDF) that i've designed
in Fireworks. I'm happy
> with the images, colors, etc., however, the text also
exports as an image. I'd
> like to be able to export the text as text so that when
a viewer zooms in on
> the pdf, the text does not become grainy. Also, the
physical printing of the
> text would look much more clear. I'm sure there are
proper terms that i'm not
> using, but i hope that someone more experienced than me
is reading! Just
> trying to keep the text "editable" when printing to PDF
from Fireworks. Any
> input would be appreciated. THanks! (BTW, going through
Photoshop won't work
> because it changes the text layout too much.)
> thanks again,
> matt
>
In addition to Linda's comments, you can save your Fireworks
.png as an
Illustrator 7 .ai file. Then import that to Freehand or
Illustrator (if
you have them). Most of your design will remain intact and
you might not
have to start from scratch.
I just did that on my pc but, unfortunately, the text is what
imported
the worst.
SKB

Another text alignment issue

Dear friends,
I've got this div which makes up for a left column on my page and stacked therein I've got some images with some captions underneath. Now, my problem is: I want the images aligned center within that div but the text, I need it to be justified and what happens is that if I style the div>box to center the text gets centered as well. I tried creating a new class style for the text alone but the div style overules it. What should I do?
p-s: this is DW CS4 I'm using now (to make it worse)
Thanks a lot for your help
JV

If I understand you correctlyu, you want that chocolate image to center... The easiist way I can think of is to put it in it's own div and put a class rule. So go to code view and find this
<img src="Chocolate em Cascais.jpg" alt="Chocolate em Cascais" width="170" height="242" />
Change it to this
<div class="center">< img src="Chocolate em Cascais.jpg" alt="Chocolate em Cascais" width="170" height="242" /></div>
Next in your code find this
#left_area .style4 {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: small;
     text-align: left;
and add this after the last }
.center {
margin:0px auto;
text-align:center;
See what that does for you.
Gary

Converting .docx files to .eps and keeping the text editable (not outlines)?

I'm trying to batch convert a number of .docx files that each contain figures that have been created in Word (boxes, lines etc) in Acrobat 9 Pro to .eps.
I can create an .eps, using the document processing (batch processing) route, but when I open the files in Illustrator CS5 all of the editable text in the document has been converted to outlines. Ideally, I want to keep the text in the figure editable (and to create a slightly smaller file size)
I have checked the convert from PDF settings for Encapsulated PostScript and it shows 'Convert Text to Outlines' as false, the transparency settings have also been setup not to convert to outlines), can anyone help?

My thinking behind doing it via Acrobat 9 Pro was that I could take say 20 .docx files and via the document process function automatically convert them straight to .eps without having to make the PDF first. I also find using this route that I have an .eps that is already cropped to the four edges of the images (with no hidden characters making the image frame larger than the actual four edges of the figure).
When I import a PDF into Illustrator, I find that I'm getting the end of paragraph (hidden) markers from Word appearing (normally at the end of the image in Word, and some also appear before the figure where the author has hit return a few times). I then have to manually remove them so that the artboard fits to the four edges of the image. I guess I'm just trying to save a little time without having to go back into 20+ files and tidy them up by removing this character.

Dreamweaver not displaying text alignment properly

Hi,
I'm working on a site where I want a Div with a background image to align right of the text. It shows up correctly in IE, Firefox, Opera, and Safari, but not in Dreamweaver CS4 while I'm working on it.
Live page example: http://www.libertywebmarketing.com/test/sonic/CT-Audio-Mastering.html
Screenshot of Opera:
Screenshot of DW CS4:
Any ideas?
Thanks.
Fitz21

Thanks Nancy.
The image on the right is a background image of a Div, so I don't understand what I did wrong (if anything). Shouldn't the text appear to its left, just as if it were a table with a background image?
The link you posted will be helpful though for something else I have to do. Thank you.
Any other ideas?
Fitz21

Image Text Wrapping html/css

Ok, I've searched around and I don't think this is possible but...
Every example of image text wrapping I can find requires that you put the <img> into your html before or after a paragraph. I'd like have it so that I can move my image anywhere on the left side of my div box and the text will flow around it. My concern is that I want my image placed on the left side but in the middle of a paragraph so that text from the paragraph wraps all around it on the top, right, and bottom.
I realize that you can insert an <img> in the middle of the words to the paragraph and float left in css but my problem with that is it seems if the text gets resized in a browser or something it won't naturally flow with the image but yet get stuck there and get funky.
Did I lose you guys? Any ideas? Is this possible?
Thanks again

To answer your question, you can place a floated image anywhere you wish but it will never look or stay exactly where you put it when text size is increased. Remember, print design is static, web design isn't. You can use EMS instead of pixels to keep things a bit more uniform when text sizes change.
Quick & dirty demo of floats with ems.
http://alt-web.com/TEST/float-test-with-ems.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Exapand menu image and aligning sidebars

I have a menu on my website which I created using CSS. I
would like the menu background image to expand to match the text on
the menu. Please have a look at the website: www.tusptest.com.
On another note, I have used sidebars on my Css and they do
not align. I have tried the faux column technique but I seem to be
getting it wrong and have not managed to align the sidebars. Is
there any other way of doing it.
hereis the link to the website: www.tusptest.com
CSS Code:
/* global */
html{height: 100%;}
body
font-family: arial, sans-serif;
padding: 0px;
margin: 0px;
font-size: 0.78em;
p
margin: 0px;
padding: 0px 0px 16px 0px;
line-height: 1.7em;
h1
{ font-family: serif;
font-size: 108%;
letter-spacing: .1em;
h2
{ margin: 0px;
padding: 0px 0px 4px 0px;
font-size: 100%;
letter-spacing: .1em;
font-weight: normal;
text-decoration: underline;
img{border: 0px;}
a{outline: none;}
/* image positioning - left, right and center */
.left
{ float: left;
padding: 0px 8px 0px 0px;
.right
{ float: right;
padding: 0px 0px 0px 8px;
.center
{ display: block;
text-align: center;
margin: 0 auto;
/* block quote */
blockquote
{ margin: 20px 0px 20px 0px;
padding: 10px 20px 0px 20px;
border-left: 8px solid;
/* unordered list */
ul
{ margin: 8px 0px 0px 16px;
padding: 0px;
ul li
{ list-style-type: square;
margin: 0px 0px 11px 0px;
padding: 0px;
/* ordered list */
ol
{ margin: 8px 0px 0px 24px;
padding: 0px;
ol li
{ margin: 0px 0px 11px 0px;
padding: 0px;
/* margin lefts / margin rights - to centre content */
#main, #links, #footer, #logo, #menu, #content
{ margin-left: auto;
margin-right: auto;
/* main container */
#main{
width: 850px
/* header */
#header
{ width: 100%;
height: 87px;
/* logo */
#logo
padding: 1;
float: left;
margin: -15px 15px 0px 15px;
#address
{ padding: 11px 17px 0px 14px;
float: right;
text-align: right;
#address p
{ padding: 0px;
margin: 0px;
#logo h1
{ font-family: verdana, arial, sans-serif;
margin: 0px;
padding: 18px 0px 0px 0px;
font-size: 160%;
letter-spacing: .3em;
#logo h2
{ font-family: verdana, arial, sans-serif;
margin: 0px;
padding: 5px 0px 0px 0px;
font-size: 100%;
letter-spacing: .2em;
/* navigation menu */
#menu{margin: 0px 15px 0px 15px;}
#menu ul
{ height: 38px;
margin: 0px auto;
#menu li
float: right;
margin: 0px 0px 0px 0px;
padding: 0px;
list-style: none;
#menu li a, #menu li a#selected, #menu li a:hover
font-family: verdana, arial, sans-serif;
display: block;
float: left;
height: 7px;
text-decoration: none;
margin: 5px 12px 0px 4px;
padding: 7px;
text-transform: uppercase;
font-size: 80%;
#links
{ float: right;
width: 100px;
text-align: right;
padding: 0px 18px 0px 0px;
/* sidebars */
.sidebar
float: left;
width: 220px;
padding-top: 16px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
/* sidebar items / links */
.sidebaritem
text-align: left;
width: 200px;
float: right;
margin: 0px 11px 9px 0px;
padding: 0px 0px 0px 0px;
.sidebaritem h1, .sidebaritem h2, .sidebaritem p{margin: 0px
10px 0px 10px}
.sidebaritem h1
{ font-weight: normal; padding: 8px 0px 16px 0px;
text-transform: uppercase;
.sidebaritem p
line-height: 16px;
padding: 0px 0px 8px 0px;
.sidebaritem a, .sidebaritem a:hover
{ padding: 0px 0px 2px 14px;
text-decoration: none;
.sbilinks ul{margin: 0px 0px 18px 10px;}
.sbilinks li
{ list-style: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 5px 0px;
.sbilinks li a, .sbilinks li a:hover
{ height: 16px;
text-decoration: none;
width: 149px;
/* page content (centre) */
#content
text-align: justify;
width: 355px;
margin-top: 16px;
float: left;
padding-top: 11px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: -1px;
#content h1
{ font-family: arial, sans-serif;
margin: 5px 0px 12px 0px;
font-size: 128%;
font-weight: normal;
text-transform: uppercase;
#content a, #content a:hover
{ padding: 0px 0px 2px 0px;
text-decoration: none;
/* footer */
#footer
{ height: 44px;
padding: 18px 0px 4px 0px;
font-size: 80%;
text-transform: uppercase;
font-family: verdana, arial, sans-serif;
clear: both;
text-align: center;
border-top: 2px solid;
margin: 4px 15px 4px 15px;
#footer a
{ text-decoration: none;
padding: 0px 0px 2px 0px;
border-bottom: 1px dashed;
#footer a:hover
{ text-decoration: none;
padding: 0px 0px 2px 0px;
border-bottom: 1px solid;
/* Based on Nifty Corners: rounded corners without images */
/* By Alessandro Fulciniti */
http://www.html.it/articoli/nifty/index.html
.rtop, .rbottom, .mtop, .mbottom{display: block;}
.rtop .r1, .rtop .r2, .rtop .r3, .rtop .r4,
.rbottom .r1, .rbottom .r2, .rbottom .r3, .rbottom .r4,
.mtop .m1, .mtop .m2, .mtop .m3, .mtop .m4,
.mbottom .m1, .mbottom .m2, .mbottom .m3, .mbottom .m4
{ display: block;
height: 1px;
overflow: hidden;
.r1, .m1{margin: 0 5px}
.r2, .m2{margin: 0 3px}
.r3, .m3{margin: 0 2px}
.rtop .r4, .rbottom .r4, .mtop .m4, .mbottom .m4
{ margin: 0 1px;
height: 2px
#main .sidebar .sidebaritem {
background-color: #F3F9EE;
#main #content .sidebaritem {
background-color: #F3F9EE;
#main .sidebar #right_sidebar2 {
background-color: #FFFFFF;

Hi Beau:
That particular graphic will be hard to work with because
it's "tilt" will
require a lot of screen space.
{IMHO, it's a bit crude and "comic bookish" for the look you
have otherwise
designed).
With a more right-angled image, you can insert a 3 row x 3
column table (9
cells) in that container, and slice your image into four
square corner
images, and small tiling background images for the top, sides
& bottom.
The center cell will contain only your content and will
expand as needed.
"beau123" <[email protected]> wrote in
message
news:fhs2t4$3pl$[email protected]..
> please can someone help

Text alignment "Justify" is not aligned in Crystal Viewer.

Hi,
I am having a text field in report like paragraph format in Detail section and I have setting the text alignment as u201CJustifyu201D. If I launch the report through dhtml viewer the text is not aligned in justify format, it is getting aligned as left alignment, but it is working properly while exporting to PDF and Design Preview panel.
This problem is occurs in Crystal Report XI Release 2 and Crystal Report 2008 also.
This has been already posted and the link is Text Alignment - Justification Problem
Please help me to overcome this issue.
Thanks in Advance.

With CR 2008, make sure you are on SP4:
SP4
https://smpdl.sap-ag.de/~sapidp/012002523100008782452011E/cr2008sp4.exe
SP4 MSI
https://smpdl.sap-ag.de/~sapidp/012002523100008782532011E/cr2008sp4_redist.zip
SP4 MSM
https://smpdl.sap-ag.de/~sapidp/012002523100008782522011E/cr2008sp4_mm.zip
If that does not help, please provide a link to screen shots of the issue.
Ludek
Follow us on Twitter http://twitter.com/SAPCRNetSup
Got Enhancement ideas? Try the [SAP Idea Place|https://ideas.sap.com/community/products_and_solutions/crystalreports]

How can I merge my contacts on iphone but keep the text msgs

I use my phone a lot for work and a lot of my correspondance is through text msgs. My best friend and I share the apple account and we have the same contacts so when I add it to the account my phone she does the same and we come up with duplicate contacts. We would like to be able to merge them and then create seperate apple id accounts so it doesnt happen again but we need to keep the text msgs.
Please help!
BTW...we cant update our ios either because of lack of room on our phone.

I suppose you have/had them on your iPhone, but do not have your iPhone with you now.
Did you ever sync the iPhone with iTunes, did you ever backed up the iPhone to iCloud?

Is there a way to keep images opened in Photoshop 5 from 'glueing' together?

I'm moving from CS3 to CS5 and am innundated with the 'improvments' in CS5. My main problem is that I don't know how to search on something that I don't know the proper name of, for instance, until I was told that the zoom behavior I wanted to disable was called 'scrubby zoom' THEN I was able to locate and uncheck.
This time, the behavior I would like to turn off is the 'magnetic' quality which opens images in a tabbed set, rather than in loose separate cascading images as was the behavior in CS3. I would like to keep images I open separate and not glued together. I would also like to do without the 'magnetic' quality which causes images to want to become 'tabbed sets' if I happen to drag one image window over or close to another as I am trying to compare two images on-screen - I do not want them to merge or want to 'join together' as is the behavior I now am experiencing.
Where are the controls to disable this 'glueing together' behavior of open image windows?
TIA,
Ken

As I suspected "Releas notes" are more about late-breaking product announcements rather than implemented features which should be distinguished from earlier versions. So, If, I'm going to have a ready reference to the innards of PS5 I really should have the PS5 User Manual, which I assume is available in PDF format and available for download online from Adobe. - I'll search there next. I need something I can put on my iPad 2 and the User Manual in PDF format would be it.
Here's the summation of 'release notes' which does not begin to answer questions about product new feature operation:
"Welcome to Adobe® Photoshop® CS5. This document contains late-breaking product information, updates, and troubleshooting tips not covered in the Photoshop documentation.
Minimum system requirements
Install your software
Uninstall your software
Trial software
Electronic licensing
Registration information
Font installation
Known issues
Customer care
Other resources"

Keep images & text aligned?

Similar Messages

Maybe you are looking for