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

Similar Messages

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

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

How can I make an image placed in the body tag expand to the entire width of the browser?

How can I make an image placed in the body tag expand to the entire width of the browser?I

background-repeat -- best used with small image tiles.
background-gradient - Ultimate CSS Gradient Generator - ColorZilla.com
background-size:cover - Resizable Full Page Background Image
Nancy O.

How do I get things to expand/contract with window size?

RE: www.hawaiihosa.org
I'm working on a website for my organization...and it looks
alright when the windows of internet explorer and firefox are
expanded...but when the windows are smaller, the heading remains
the same size, and the text moves behind my vertical menu bar on
the left.
Is there a way to make it so that the header is the same
width (with proportional height) as the width of the white area? I
think the white area is set to a width of 80 percent or something.
When windows are smaller, is there a way to make it so that
the text in the body of the pages stays where they originally were
(to the right of the menu bar...and not behind)?
Another thing not related to window size...how do I get the
text to be vertically in line on one side? Whenever write anything
and it extends below the menu bar, it uses the full white space. I
want it to have the same width of writing space as the rest of the
page. In other words, I want it to be constricted to the right of
the menu bar with the text being justified to the left.
Hopefully someone can halp us with this.
Thank you very much!
Maurice Nakamura
If you didn't get the url...its
www.hawaiihosa.org

I would set the page to adhere to a minimum width. Add
min-width: 610px;
to your css as shown below. (this won't work in IE browsers
prior to 7
so if you want to support that google min-width for IE6)
.twoColLiqLtHdr #container {
width: 80%; /* this will create a container 80% of the
browser width */
background: #FFFFFF;
min-width: 610px;
margin: 0 auto; /* the auto margins (in conjunction with a
width)
center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center
on the body
element. */
To have the text vertically inline on one side as you put it
try adding
this to your css stylesheet:
#container p {
margin-left: 190px;
Instead of the width for the side bar being 24% make it 170px
as shown
below:
.twoColLiqLtHdr #sidebar1 {
float: left;
width: 170px; /* since this element is floated, a width must
be given */
background: #FFFFFF; /* the background color will be
displayed for the
length of the content in the column, but no further */
padding: 15px 0; /* top and bottom padding create visual
space within
this div */
You cant really make your header img grow/reduce in size as
the page is
enlarged or narrowed because it would distort. What you need
to do is
find a place to slice it into sections wherebay you can have
part of it
as a repeating background image i.e., the left and right side
of the
image remains on the left and right but the bit in the middle
repeats
itself as the browser window is widened and narrowed.
This needs to be taken into account when designing a liquid
page.
MauriceNakamura wrote:
> RE: www.hawaiihosa.org
>
> I'm working on a website for my organization...and it
looks alright when the
> windows of internet explorer and firefox are
expanded...but when the windows
> are smaller, the heading remains the same size, and the
text moves behind my
> vertical menu bar on the left.
> Is there a way to make it so that the header is the same
width (with
> proportional height) as the width of the white area? I
think the white area is
> set to a width of 80 percent or something.
> When windows are smaller, is there a way to make it so
that the text in the
> body of the pages stays where they originally were (to
the right of the menu
> bar...and not behind)?
> Another thing not related to window size...how do I get
the text to be
> vertically in line on one side? Whenever write anything
and it extends below
> the menu bar, it uses the full white space. I want it to
have the same width of
> writing space as the rest of the page. In other words, I
want it to be
> constricted to the right of the menu bar with the text
being justified to the
> left.
>
> Hopefully someone can halp us with this.
>
> Thank you very much!
> Maurice Nakamura
>
> If you didn't get the url...its
http://www.hawaiihosa.org
>

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.

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

New to CSS, text-align and line-height ok in 'Design', but not in browsers (IE 10 & Chrome) on Win8

[DREAMWEAVER CC]
I'm now learning CSS, and find that where I specify in an external style sheet
h1 {
          font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
          text-align:center;
          color: black;
          font-size: 1em;
          font-weight: normal;
          font-style: normal;
          line-height: 3.0;
          letter-spacing: 0px;
          word-spacing: 10px;
text-shadow: 3px 3px 5px #333;
text-decoration: none ;
text-transform: none;
That, in DW Design, they look fine, but in Windows 8, IE 11 and ChromeVersion 31.0.1650.63 m   that the text-align: center; and the line-height: 3.0; are ignored.
I work around by specifying <tr align="center" height = "77">   shouldn't the text-align: center; and the line-height: 3.0; be specifiable in my CSS??
Thanks for any help!
<tr height="77" align="center">
        <h1>
            <td bgcolor="CornSilk">1/28/2014</td>
            <td>the Sky</td>
            <td>Fate is the Hunter</td>
          <td >Ernest Gann</td>
            <td >John</td>
            <td >Jessica</td>
          <td><a href="http://www.amazon.com/FATE-HUNTER-Ernest-K-Gann/dp/0671636030/ref=sr_1_1?s=books&ie=UTF8&q id=1387462831&sr=1-1&keywords=ernest+gann">Learn More</a></td>
        </h1>
    </tr>

hemmi1 wrote:
[DREAMWEAVER CC]
I'm now learning CSS, and find that where I specify in an external style sheet
Not sure what it is you are trying to do but what you have at the moment is invalid code which is most likely why it doesn't work cross browser. (of cousre this css does not help - line-height: 3.0; - 3.0 what? - px, ems?)
Here's an example below of how you could do it. Give your table a class (below it is called .myTable) then you can start styling the <td> cell, and anything inside it by appending the element like an <h2> tag to the class name - .myTable h2
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
.myTable {
    width: 900px;
    margin: 0 auto;
.myTable td {
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
width: 150px;
.myTable h2 {
    margin: 0;
    padding: 0;
text-align:center;
color: black;
font-size: 1em;
line-height: 50px;
word-spacing: 10px;
text-shadow: 3px 3px 5px #333;
.myTable a {
    display: block;
    text-align: center;
</style>
</head>
<body>
<table class="myTable" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><h2>1/28/2014</h2></td>
<td><h2>the Sky</h2></td>
<td ><h2>Ernest Gann</h2></td>
<td ><h2>John</h2></td>
<td ><h2>Jessica</h2></td>
<td><a href="http://www.amazon.com/FATE-HUNTER-Ernest-K-Gann/dp/0671636030/ref=sr_1 _1?s=books&ie=UTF8&qid=1387462831&sr=1-1&keywords=ernest+gann">Learn More</a></td>
</tr>
</table>
</body>
</html>

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.

Entered text alignment in middle, not top left...how to fix?

I have a text field that's about .5" tall. When a user enters information into the field the entered content begins in the middle of the area. As they enter more information the center alignment seems to go away and the text moves up to simulate top left alignment (the field has expand to fit on also). So, 1) do I have to make the cell smaller for it to have top left alignment and subsequently throwing off the look of the form or 2) is there a way to get the cell to have top left alignment?
Thanks for any help!
Becky

You can align the input to top, middle or bootom as well as right, left or center. These settings are contained on the font palette. The palette is probably not visible to you, so go to the Window Menu and turn the font palette on (or hit the shift F4 shortcut key). Now click on th eobject you want to align and look at the Font palette. Jsut below the Tabs is a line that says what you are editinng (by default it is set to caption and value). Change it to edit just the value. Now you can set the alignment by clicking on the paragraph tab and choosing the options that you want.

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

Insert specific image + text to quiz feedback

Hi,
Within Captivate quiz, I know there is a facility to offer text feedback to the learner dependent upon the option clicked by the learner after the Submit button is depressed.
However, is there a way to include an image too? So if a learner clicks the Correct option, they see a message saying (for example) "Well Done" as well as Image01. And if they click an Incorrect option they would probably get a text message saying "sorry, the option is incorrect" along with Image02.
In the straightforward setup, it seems that only text can be entered.
Any help will be most appreciated.
Many thanks
John
PS: I use Captivate 5 but Captivate 4 is not much different, so any help from those who use Captivate 4 too is welcome.
Thanks again.

Hello again
Actually, the feedback captions are composed of a couple of elements. The text you type and a background image. You are able to remove all text leaving behind the background image. You are also able to choose any image you like for the background image. You just browse to it and choose it. You will likely have to adjust the size of it after choosing an image.
Cheers... Rick
Helpful and Handy Links
Begin learning Captivate 5 moments from now! $29.95
Captivate Wish Form/Bug Reporting Form
Adobe Certified Captivate Training
SorcererStone Blog
Captivate eBooks

How I can make a note on an image in the IMAQ browser?

Hi,
I searching for the way to add a text on a thumnail image in the IMAQ browser.
I just ran Browser Example.vi and tried to add a note on a thumnail image using IMAQ Overlay Text API.
And also tried adding Overlay Text on the source image and then add that source image to the IMAQ browser.
But both way failed to make it work!
So.. Is there any way I can add a text on the image in the IMAQ browser?
Thanks for your help!
Regards,
YoungMin
Attachments:
browser window.png ‏51 KB

You need to add a text overlay to each image, then merge the overlay with the image before it's loaded into the image browser. Look in the sequence frame 1 of the outer sequence structure in the attached VI.
www.movimed.com - Custom Imaging Solutions
Attachments:
Browser Example (modified).vi ‏39 KB

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

Why won't my text align right in Live View or Browsers?

I created a class called .reviewer so the the name of the reviewer would align right while the the review itself remains aligned to the left. I applied the class to the reviewer's name and in design view, it looks perfect. But in Live view and when I preview in a browser, the text remains aligned left. I put this class in two external style sheets, main.css and mainReviews.css.
The page in question is: www.jillgrovemezzo.com/reviews.htm
To be more specific, the text I want to align right under the first review is "Lawrence A. Johnson, Chicago Classical Review"
Regina

Add display: block; to your css class .reviewer (as shown below).
.reviewer {
text-align: right;
display: block;

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

Similar Messages

Maybe you are looking for