IMAGE POSITIONING IN DW

Hi
I have four rollover images that I want to centre on my homepage, but I want to align them as in the attached pic below. Do I need to create a new style for each image? I've tried this and many other things, but nothing seems to work! I'm obviously completely new to Dreamweaver and I have made several attemps to do this with no luck! Any help would be hugely appreciated..... thanks very much..

View source in your browser to see the CSS & HTML code. NOTE: No images were used.
It's all done with CSS and a 2 x 2 table :-))
http://alt-web.com/TEST/roundmenu.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

Cannot Control Image Position in RoboHelp When Linking To FM Files

We are using TCS 3.5 on Windows XP Pro. It has taken a lot of work to get our mapping from FM to RH to work correctly, and we now remain with one outstanding task that I cannot figure out: controlling the position of images in the RoboHelp output.
The images appear arbitrarily justified left, center, or right in RoboHelp itself and in help outputs. I should also add that this is happening with both structured and unstructured FM files. Typically, the output I'm working with is WebHelp or WebHelp Pro.
I've turned to the "Object Properties" and "Anchored Frame" pods in FM looking for settings that might be contributing to this behavior, but have not found anything that appears to connect settings there with the image behavior in RH. In the structured FM files, I had some suspicions that complex if/else conditions controlling image position might somehow be contributing to this problem. But the conversion settings in RH don't allow those EDD rules to carry over.
I also turned to the "Conversion Settings" in RH and played with some of the options for "Images" there, unticking or ticking "Use Distiller to Generate Images" and "Do Not Regenerate Images."
Our online help now looks pretty clean, since all the styles are mapped, with the exception being these wonky images everywhere.
I would certainly like to determine the root cause of this behavior, because we're using this FM>RH workflow to create online help systems for hundreds of legacy FM documents that encompass thousands of such images. I want to fix this in the mapping and not touch the original images, if possible
However, if anyone has the answer regarding the best practice for generally controlling image behavior in structutured and unstructured FM to RH, I would be eager to learn these details as well.
Thanks in advance,
Douglas

I believe it is. And I have had the same problem with tables.
I made multiple posts about the images trying to describe it in different ways, but all I got were crickets chirping on the forums. I finally called Adobe technical support. Their initial reaction was to show me how image mapping did work correctly with freshly minted FM files and RH project. I had to draw them back into real world scenarios by giving them my source files to recreate the issue. At this point they admitted something was amiss, and one rep even slipped and said it was a “known issue.” They promised to get back to me with a resolution. But despite 4 additional attempts contacting them, and they now just ignore my e-mails.
I am very disappointed in the way Adobe has handled this matter, both from a development and a support standpoint. It would do all of us users a world of good if they admitted these flaws in their release notes, and offered possible workarounds. Maybe there is no workaround, in which case it explains why they don’t admit it? But beyond poor software development and bug fixes, I think it’s sad that they don’t follow up on support.
Adobe seems to assume that tables and images are going to carry over from FM to RH correctly, so you get no fine tune controls, like you do for character and paragraph mapping, and I think this is the crux of the problem.
I got those tables working in my projects just by dumb luck, but I still have no control over them. The images…they still represent a huge problem for our company. We invested an enormous amount of resources into a RH migration, hoping to continue to use FM. But now we have issues with no apparent resolution. It’s making us regret our decision and reconsider our initial considerations to move to MadCap Flare and/or a component content-management system.
If you have any luck making headway with the issue, I would love to know more.

Convert mouse position to image position

Using a zoomed IMAQ image in an image control, I want to recover the position of the mouse in the co-ords of the underlying image. LastMousePositionX (and Y) give the info I want but they are one click in the past and not the current position. Amazingly, there doesn't appear to be an equivalent CurrentMousePositionX. I can't seem to find the info I need to do the conversion manually. The mousedown event returns the current mouse position and I can get the position in the image container by subtracting off its left and top position. But to convert this to the image position I need to know both the zoom and where the images origin is relative to what is displayed. I can't seem to find that origin position in the list of property nodes. The only thing I can seem to come up with is to extract the info from teh image information string, but this seems like an incredibly poor way to extract such obvious information - espeically since the info must be calculated to put in the string anyway. Can anyone help with this?

Hi,
I am confused why you get the mouse position one click in the past because it seems to work ok for me. I've had to use four of the image properties to recreate the effect using the mousemove event, but this seems to give the same values as the Last Mouse Position property so I think it does what you want. I couldn't see an origin property so I did the conversion using the position given at the image center. I wanted to post a snippet here but I'm new to posting and couldn't seem to get it to work for the whole block diagram, so I'm using a screenshot instead. I hope this helps in some way.
Will
Attachments:
mouse position test.vi ‏58 KB

Loading pages in Div? & Image Positioning

Hi i have 2 questions but to save 2posts i will put them both here
First might i say i trully appreciate the help people give at this forum!! hope one day i can help to
Anyway this is my 1st question
i am getting use to Divs now but still learning
i have my page layout as follows: Div at top of page containing site banner> Div under this containing the site navigation> Then my div containter containing site content
So what i want to do is load all website content into the bottom Div but not have to reload the top 2 divs similar to frames basically... I just see it as more efficient if the user is not having to reload the flash buttons and banner for the website everytime a page is called upon and yes i know frames are crap out of date etc etc im not using frames... i just want to target a div
Some one suggested using SSI which i understand how this works sort of... but i know the alternative to what i want is just to set up a basic of how everypage is to look and use ssi + new content?
My other question is about image positioning this i know little about> is there a way in dream weaver to grab absolute control of a picture and position it were you want in design view? similar to changing the wrapping in MS word and just wacking the pic were u want it to go
alternatively or on the same suject that may not be possible but can u atleast layer image over image or position images over 2 divs?
or is there a good tutorial on doing these sorts of things in dreamweaver cs4
Thanks alot for any help given

CSS Captions on floated images (similar to word wrap)
http://alt-web.com/DEMOS/CSS2-Captions-on-floated-images.shtml
I just see it as more efficient if the user is not having to reload the flash buttons and banner for the website everytime a page is called upon and yes i know frames are crap out of date etc etc im not using frames... i just want to target a division.
You're wrong about efficiency because that's not how a web browser works. Once your images are loaded into the browser's cache, they remain there - available for instant use in the rest of your site pages. Efficiency comes from good site planning. Gimmicks do not a good site make.
Adobe removed Flash Buttons and Flash Text from CS4 for a reason. Use CSS styled text links or CSS Sprites instead.
CSS Sprites
http://alt-web.com/DEMOS/CSS-Sprites.shtml
Best of luck with your new project!
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb

Utility to adjust image position?

Does anyone know if there is a utility that can be used to fine tune the display image position (ie. horizontal/vertical position, rotation)?
I've noticed that the image on my iMac display is slightly off to the right -- in other words, there is more black border on the left than on the right. I was hoping there would be some simply adjustment similar to the built-in adjustment controls on some LCD monitors.
Thanks!

Not that I know of.
You can try the Apple genius bar at your local Apple store maybe they know how too.
I know in windows you can or if you have a external monitor but then you have to install that monitor's specific drivers / programs if they have some ??
There might be a program but you should not have to worry about stuff like this as that is why you payed too much for your Apple so it can be returned to them so they can replace it or fix it.
It can even be something stupid like the display driver and that then only will be fixed in Tiger 10.4.5 update that is free likely around the 22 feb or later.

Can I control an image position with Scripting?

hello --
i find myself doing a lot of repetitive tasks in keynote, such as creating dozens of slides with an image in a specific position (x-y position). is there a way to automate this using applescript or automator?
so far, i am able to create the empty slides with the images in a specified folder, but they always just get centered. it's a good start, but the next time suck is to position them by hand.
any ideas?
thanks in advance.

Hello,
It's not possible without the help of the GUI Scripting.
This implies that you should not use the mouse or the keyboard during the execution of the script, but it's better than doing it manually on several images.
You must enable the GUI Scripting by clicking the checkbox labeled "Enable access for assistive devices" in the Universal Access System Preference pane.
Here is the script : this script create a slide of each image (your selection in the Choose file dialog), and it set the position of the image in each added slide to (40, 60)
---------------------Beginning ot the Script
set tFiles to choose file of type "public.image" with multiple selections allowed
tell application "Keynote"
    activate
    tell front slideshow
        set nSlides to count slides
        make image slides paths tFiles without set titles
        set nSlides2 to count slides
        set firstTime to true
        if nSlides2 > nSlides then repeat with i from (nSlides + 1) to nSlides2
            show slide i
            my setImageposition(40, 60, firstTime) -- set image position to (40, 60)
            set firstTime to false
        end repeat
    end tell
    display dialog "Done"
end tell
on setImageposition(posX, posY, firstTime)
    tell application "System Events"
        tell process "Keynote"
            if firstTime then (* initialization so that the script works correctly.
                   Show the Inspector window, click on "Metrics" tab.
                   Set the View to "Slide Only" *)
                set frontmost to true
                delay 0.3
                click menu item "Slide Only" of menu "View" of menu bar item "View" of menu bar 1
                set inspectorWindow to missing value
                set tWindows to windows whose subrole is "AXFloatingWindow"
                repeat with i in tWindows
                    if exists radio group 1 of i then
                        set inspectorWindow to i
                        exit repeat
                    end if
                end repeat
                if inspectorWindow is missing value then
                    keystroke "i" using {option down, command down} -- Show Inspector
                    delay 0.2
                end if
                tell window 1 to if name is not "Metrics" then -- size and position
                    click radio button 6 of radio group 1 -- the "Metrics" tab
                    delay 0.2
                end if
            end if -- end initialization
            keystroke "a" using command down -- select image
            perform action "AXRaise" of window 1 -- set the focus to the Inspector window
            delay 0.1
            tell group 1 of window 1
                set focused of text field "X" to true -- left position
                delay 0.1
                keystroke ("" & posX & tab & posY & tab) -- set image position,
            end tell
        end tell
    end tell
end setImageposition
--------------------- End Script
Important : You must localize the titles (depending on the language used in your system) in these two lines:
click menu item "Slide Only" of menu "View" of menu bar item "View" of menu bar 1
tell window 1 to if name is not "Metrics" then -- size and position

Background Image Position Whole Numbers vs Decimals

Hi EA experts,
I'm using sprite sheets to create animations in Edge Animate CC and have run into a peculiar problem: Occasionally, when I am animating frame-to-frame and changing the background image position, the numbers I input (for example, -400) end up somehow being changed to a value a few decimal points off (such as -399.96). When playing the animation back, even this tiny fraction of a pixel difference ends up causing the sprites to shift and play back choppily. What's more frustrating still is that Edge Animate shows the X/Y values as the correct whole-numbers I inputed, until I click on them (see attached). Given the amount of animation I'm doing, now that I've found out this is the problem, I have maybe hundreds of X/Y values to correct.
The whole number I input is displayed...... until you click, and see that it's off a bit
Is there a way to easily correct this? Perhaps a way to make Edge Animate only accept whole numbers for background image position values?
Thanks,
-Adam

Whole numbers kick decimal butt.
Also, that's not how you calculate leap years. Just
an FYI.What is it? Leap year if %4 == 0 and %100 != 0?
I think... whatever, Google is your friend.

Placed image position change

I have a few images placed into my website. The positioning changes between chrome, firefox, and the biggest change in IE. Is there any way to avoid this? www.jarminlaw.com the bottom quote marks under testimonials.
Thanks!

I have checked the home page on all the three browsers that you mentioned and they all look same to me.
If you still see the issue with the image placing, I will suggest that you group them together with the text or content above or below it. Grouping usually fixes most of the alignment issues.
- Abhishek Maurya

Problem with Image positioning

Hello everyone I am having a problem with the positioning of an image I want to sit on top of the background in DW. I want it to sit on top of the background because I want to use a behaviour effect so that it fades in. Anyway, I go to Insert and choose the image I want, and it shows up in the top-left corner of my DW, which I expect it to. However, I want the Image to sit a lot further down the page (and eventually at the center). So, I select the image and go to the "V Space" in the properties panel and I alter the value in it so that the image will be positioned further down the page. However, when I do this for some reason the whole page shifts to the left a little and I also get a scroll bar that makes the page a lot longer, which I don't want. Does anybody know why this is happening and what I could do to prevent it? I will attach a "before" and "after" screenshot so you can see what I mean a little more clearly.
If you can see the whole page shifts slightly to the left and I get a scroll bar which makes the page a fair bit longer. I've also experimented a little by moving the image down bit by bit and found that everything is fine until I cross around 200 on "VSpace"- after that is when the page shifts and I get the scroll bar.
I greatly appreciate any help! Thanks

As a starting point, Copy & Paste this code into a new, blank HTML document. The comments will guide you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html {font-size: 100%}
body {
margin: 0;
background:#000;
font: 1em Geneva, Arial, Helvetica, sans-serif;
color: #FFF;
text-align:center;
#wrapper {
width: 960px; /**width in px, ems or %**/
margin:0 auto; /**centers page**/
padding: 0;
border: 2px solid silver; /**optional border**/
#header {
text-align: center;
border: 1px dotted silver; /**optional border**/
/**Main Menu**/
#navlist {
margin: 0;
padding: 0;
font: italic 24px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
text-align: center;
#navlist li {
margin: 0;
padding:0;
list-style: none;
display: inline;
#navlist li a {padding: 0.75em; text-decoration: none;}
/**link colors**/
#navlist li a:link,
#navlist li a:visited { color: #999; }
/**On mouseover**/
#navlist li a:hover,
#navlist li a:active,
#navlist li a:focus { color: #FFF; text-decoration: underline;
/**End Menu styles**/
#content {
width: 400px;
font-size: small;
margin: 20px auto 0 auto;
text-align: center;
color: #CCC;
#content ul li {margin:0; padding:0;
list-style:none}
/**Rollover Image**/
#content a img {
border:none;
opacity: 0.6;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70)}
#content a img:hover,
#content a img:active,
#content a img:focus {opacity: 1.0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100)}
#footer {
border-top: 4px solid #990000;
font-size: x-small;
text-align: left;
margin:0;
padding: 0 0 0 15px
/**RE-USABLE CLASSES**/
.left {text-align:left}
.right {text-align: right}
.center {text-align:center}
</style>
</head>
<body>
<div id="wrapper">

<div id="header">
<h1>Amy Carrier </h1>
</div>

<ul id="navlist">
<li><a href="#">AC</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul> 


<div id="content">
<p class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac dolor velit, sed adipiscing ipsum. </p>
<ul>
<li>details</li>
<li>details</li>
<li>details</li>
</ul>

<a href="http://www.google.com/chrome"><img src="http://dret.net/lectures/web-fall09/img/chrome-logo.png" alt="image" /></a>
</div>

<div id="footer">
<p>@ 2010 Footer text goes here</p>
</div>
</div>
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Image positioning in a div, vertical and central alignment

Can any body help me with this please.
I have a row of logo images displayed across a page like this example working perfectly on my test site http://thewebsitedeveloper.co.nz/thinkRedTest/pattonNz/suppliersTemplateCombined.html
On the actual Business catalyst site the same code is not accepting the verticval alignment and is positioning the image at the top of the div. Seen here http://pattonnz.businesscatalyst.com/suppliers_NZ
Can anybody tell me why this is/how to fix it? I have Googled but found no BC specific fixes.
Here is the relevant html/css info.
HTML
<div class="logoBand">
   <div class="supplierBox">
       <div class="supplierLogo">
            <img src="images/suppliersLogo/hidria.jpg" alt="Hidria logo" >
        </div>
        <div class="supplierName">
            External Rotor Fans
         </div>
   </div>
</div>
CSS
.suppliers{float:left; width:890px; height:auto; margin-bottom:30px; }
.logoBand {float:left; width:890px; height:100px; margin-bottom:30px;}
.supplierBox{float:left; width:211px; height:auto;}
.supplierLogo{float:left; width:211px; height:90px; line-height:90px; text-align:center;}
.supplierLogo img{ vertical-align:middle;}
.supplierName{float:left; width:211px; height:auto; font-size:.625em;text-align:center;}
Thanks in advance.
Grant

Hey Liam (and anybody else with the same problem), I found a fix. By adding
a span tag just before the image I am able to get the effect I'm after in
Business catalyst. I don't really understand how it does it, but it works,
in all browsers too = I'm happy. Here it is working
http://pattonnz.businesscatalyst.com/suppliers_NZ
CSS
.logoBand {float:left; width:890px; height:100px; margin-bottom:30px;}
.supplierBox{float:left; width:211px; height:auto;}
.supplierLogo{float:left; width:211px; height:90px; line-height:90px; text-align:center;}
.helper {     display: inline-block;    height: 100%;    vertical-align: middle;}
.supplierLogo img{ vertical-align:middle;}
.supplierName{float:left; width:211px; height:auto; font-size:.625em;text-align:center;}
HTML
<div class="supplierBox">
    <div class="supplierLogo">
     <span class="helper"></span>
        <img src="images/suppliersLogo/frascold.jpg" alt="Frascold logo" />
     </div>
     <div class="supplierName">
        Screw & Semi-Hermetic Compressors
     </div>
</div>
Grant

Determine Image Position within it's containing graphic frame.

Hi,<br /><br />I am trying to obtain the offset of an image item within it's containing frame. i.e. if I set the top left co-ordiante to be x:10pt , y:10pt<br />I need to obtain this programatically.<br /><br />I have tried using Both the ITransformSuite and ITransformFacade without much luck. The values I am getting are not what I expect.<br /><br />I.e.<br /><br />>K2Vector<PMReal> i_x;<br />K2Vector<PMReal> i_y;<br /><br />>Utils<Facade::ITransformFacade>()->GetItemsTranslation( UIDList( imageRef ), Transform::InnerCoordinates(), &i_x, &i_y );<br /><br />always gives me 0,0 ( as you would expect ).<br /><br />>Transform::ParentCoordinates()<br /><br />Gives me a value but it doesn't seem to be relative to the top left of the containing image item.<br /><br />The strange thing is that if I create 2 image frames and import the same image, I get different values for the positions within the parent ( even if the positions of the images within their respective frames are the same in the InDesign"Control" panel ).<br />But if I create a box and duplicate it and then import the images, I get the same values for the offsets ( although they are still not what I expect ).<br />This difference seems to be related to the original position a box is drawn with on the spread.<br /><br />Ultimately, I would like to obtain the scale, rotation, skew and offset of an image and then apply those same criteria to another image ( possibly on another document ).<br /><br />TIA,<br /><br />Mike.

Aperture already works the way you want it to. "Rejected" is just another rating. Like all ratings, it doesn't move your image from its Project. (You can make a Smart Folder to show images rated as "rejected" -- just like you can create a Smart Folder for any rating (or series of ratings).) To see rejected images in a Project just press "{Control}+8". This and other filter short-cuts are built in Aperture. Click the magnifying glass icon inside the search field in top border of the Browser to see them.

OBIEE 11g Title view Image position

Hi All,
Is there any way to change the position of image in title view in OBIEE 11g.By, default the image is coming on the left side..In my report i wanna display on the right side..
Guys please help..
Regards

In order to achieve this, you will need a custom skin (you can modify the original file, but I would not suggest to do this!).
The controlling file for the GUI rendering with regards to the title view is in the msgdb. It's the /messages/standardviewtemplates.xml. Again: please follow the process to create a custom skin and put the modified standardviewtemplates.xml there.
Changes to be made are here:
Standard:
<WebMessage name="kuiTitleViewDisplay" translate="no">
<HTML>
    <table class="TitleTable" cellspacing="0" style="@{tableStyle}"
    width="100%">
      <sawm:if test="logo || title || help">
        <tr>
          <sawm:if name="logo">
            <td class="TitleLogo" style="@{logoStyle}" rowspan="4">
            <img border="0" src="
            <sawm:param name="logo" />" alt="
            <sawm:messageRef name="kmsgTitleViewLogo" />" title="
            <sawm:messageRef name="kmsgTitleViewLogo" />"/></td>
          </sawm:if>
          <sawm:if name="title">
            <td class="TitleCell" style="@{titleStyle}"
            title="@{desc}">
              <sawm:param name="title" />
            </td>
          </sawm:if>
          <sawm:if name="help">
            <td class="TitleHelp" align="right" rowspan="4">
              <a href="@{help}" target="_blank">
                <img border="0" alt="" src="fmap:Views/Help.gif" />
              </a>
            </td>
          </sawm:if>
        </tr>
      </sawm:if>
After changes:
<WebMessage name="kuiTitleViewDisplay" translate="no">
<HTML>
    <table class="TitleTable" cellspacing="0" style="@{tableStyle}"
    width="100%">
      <sawm:if test="logo || title || help">
        <tr>
          <sawm:if name="title">
            <td class="TitleCell" style="@{titleStyle}"
            title="@{desc}">
              <sawm:param name="title" />
            </td>
          </sawm:if>
          <sawm:if name="help">
            <td class="TitleHelp" align="right" rowspan="4">
              <a href="@{help}" target="_blank">
                <img border="0" alt="" src="fmap:Views/Help.gif" />
              </a>
            </td>
          </sawm:if>
          <sawm:if name="logo">
            <td class="TitleLogo" style="@{logoStyle}" rowspan="4">
            <img border="0" src="
            <sawm:param name="logo" />" alt="
            <sawm:messageRef name="kmsgTitleViewLogo" />" title="
            <sawm:messageRef name="kmsgTitleViewLogo" />"/></td>
          </sawm:if>
        </tr>
      </sawm:if>
Basically you switch around the order of Logo -> Title -> Help to Title -> Help -> Logo. This way you know what happens in the doce above and make it Title -> Logo -> Help if you want.
These changes are application-wide wherever the custom skin is used (or just applciation-wide full stop if you modify the original file).

Code for bg image position

I found the code for centering a back ground image:
background-position:center;
but this puts it dead center. I want the image to be top
center.
I assume it's easy, just can't find it...
Thanks!

background-position:top center;
Alec
Adobe Community Expert

HTML Textfield Problem with Image Positions/Image Tag img

I am using :
Flash Builder Burito - Flex Hero SDK - Air 2.5 - Flash Player 10.1
Hi,
i have a problem with the normal Textfield.I'm loading html text into it and apply an css stylesheet on it. Everything works fine, but if there is an <img> in the html code, the image is displayed at the wrong position (top left).
It looks like the Problem is only in Air Applications. I tried the exact same code in an normal actionscript project and tested it in the broweser. Here the images are at the right position.
Does anybody else has this problem in Air or knows a solution to this?
Thanks. Laurid
btw: I tried it on Windows 7 and Android with the same problem.

Okay, I think I found the solution myself:
http://www.kirupa.com/forum/showthread.php?t=322233
For AIR content in the application security sandbox, AIR ignores img tags in HTML content in ActionScript TextField objects. This is to prevent possible phishing attacks,
This does not make any sense to me. Can somebody please explain it to me? I can load images with the loader-class and combine it with my html text. The only thing which does not work is that the text is wrapping aroung the images. So why does this prevent phishing attacks?
For me this doesn't make sense at all. It's just annoying that you develop an application in Flash and that it's not working the same way in Adobe Air. Now I have to find a complicated work-around myself. Or does anybody know how I can easily wrap text around images?
Thanks. Laurid

Why are my images positioned further down the page as size increases?

Hello,
I'm experiencing a problem with images that I'm a little baffled about.
My image tag is listed as below and comes below text in other plain paragraph tags.
<p><img id="p_image" height="411 width=312 source={src} styleName="image"/></p>
The image is not appearing. If I decrease the height to 50 it appears (obviously skewed though) and is positioned below the text.
If I increase the height to 300 it appears but now the top of the image is further below the text.
If I set the height to 411 it doesn't appear I assume because the combination of the image height as well as the increased space between the top of the image and the preceding paragraph puts it off the page.
Why does the space below the paragraph increase as the image height increases?
Images attached.
Any help is appreciated.
Thanks, peter

I think the effect you are seeing is a result of how the lineHeight is set up. By default, the lineHeight will be calculated as 120% of the size of the largest thing on the line -- in your case, this is the inline graphic. This is designed to leave space between the line before and the line with the graphic. So it is taking the height of the graphic, multiplying by 120%, and making this the distance between the previous line and the line with the graphic. So the bigger the graphic, the bigger the space above the graphic. Normally this works well with text, but in this case you may want to get closer to "set solid". You can do this by setting the lineHeight to 100%. Or you may wish to leave a couple of percent for the descenders of the previous line. Or, another alternative that may work well for you if you really know exactly where you want the line set, you could measure the graphic, add on the number of extra pixels to leave for the descenders, and make the lineHeight a constant. So you could do something like this:
<img lineHeight="104%" height="411"/>
or this:
<img lineHeight="423" height="411"/>
Obviously you would still need to specify the source and any other parameters you want on the image.
Note that if you are trying to fit a 200 pixel high graphic into a 200 pixel high container, you will hit the same problem -- in order to fit the graphic, the container will have to be slightly bigger than the graphic in order to fit the descenders on the last line. This is true even if the last line contains only the graphic, and no descenders (or text) at all.
Hope this helps,
- robin

Image position the same? Image size the same?

Hello
I am inserting images into my website and want them to be in the same position (they are all the same size by the way). When I insert them they are sometimes lower down than I need them. I then have the annoying task of deleting lines to "move" the image up. I know it something to do with CSS styles but is it easy to achieve?
Furthermore, on my site I have a small image that when clicked leads onto a larger image. In order to achieve this I am having to create 2 images (large and small) with an image resizer (it's tedious!).
Is there a way to make the images on the website the same size to prevent having to resize them prior to importing them?
Thank you

osgood_ wrote:
Herbert2001 wrote:
I agree with Nancy and Jon - you can automate it easily in Photoshop and other tools. It takes a couple of extra minutes
Only if you require no cropping of the images. I've never produced a website yet where the majority of images can be used directly without cropping areas, which makes them unique and cannot be batch processed all together.
The only time I use a batch process is if I need to convert everything from 300dpi to 72dpi or I set a max image width or height.
Photoshop is great if all the original images you need to batch process are the same dimensions and you need to use the same area, after that you need to start manually manipulating the process. Automation has it's limitations.
Herbert2001 wrote:
osgood_ wrote:
Not many practice what they preach because it creates additional work, which mostly they are not paid for. In the 'real world' it aint happening, in your world which is tutoring I believe it happens because time is NOT money. How many create 3/4 different sized images targeted at specific devices, not many. Images are getting bigger and bigger not smaller and smaller as you would expect now we are supposed to cater for this that and the other device. Preaching your philosophy is admirable but sadly misguided.
Many assumptions on your part, I dare say.
No assumptions, go to any responsive website now and you'll come across large images set at max-width; 100%; to cater for all devices.
Herbert2001 wrote:
osgood_ wrote:
Not many practice what they preach because it creates additional work, which mostly they are not paid for. In the 'real world' it aint happening, in your world which is tutoring I believe it happens because time is NOT money. How many create 3/4 different sized images targeted at specific devices, not many. Images are getting bigger and bigger not smaller and smaller as you would expect now we are supposed to cater for this that and the other device. Preaching your philosophy is admirable but sadly misguided.
Nowadays I tend to work from an efficient mobile base initially (if and when the client/project requires it, of course) - which has become the norm for me in the last two years, at least. Perhaps not for you. If I can provide a quick and efficient mobile experience alongside a good desktop/large screen version, then I will. I am not going to brute-force unnecessary bandwidth costs upon mobile users either, which you seem to advocate in your first post - and those assertions were what I thought to be rather odd and lop-sided.
Anyway, the extra work is trivial when done through simple back-end and front-end scripting and having it all done automatically for you, and then re-use for the next client. And most CMS's provide such built-in functionality as well, so it does not really take more time at all to provide a good mobile experience.
Then will will have to agree to differ. I start from desktop first then move onto mobile. If you are finding the extra work is trivial then you are short changing your clients. Personally I've found producing responsive design to increase the workload considerably, given the extra css and testing you need to carry out I would have thought that was fairly obvious, unless you're using some kind of duplicated templated system for each client, which I prefer not to.
Everything is rather odd and lop-sided isn't it? I mean the new html5 tags create <div> soup if they are used correctly - I find that rather odd and lop-sided considering for so long we were told that more marked up created greater download times and was overly complicating matters. Now its ok until in a few years time it's replaced by something else, and we'll be told that it was all a big mistake.
Herbert2001 wrote:
osgood_ wrote:
I'm not asking you, because I live in the real world whereas as you live on planet fantasy.
Good, because it was the OP that asked the question.
Then you should direct your response to the OP and not me.

IMAGE POSITIONING IN DW

Similar Messages

Maybe you are looking for