Positioning image?

I have two images in their own div tag but I'm not having any luck keeping them level with each other. The 2nd image want to jumps to the division below.
I floated the 2nd image right and cleared left but this doesn't isn't keeping my image level with first image. I put the positioning as relative.
This is what my division looks like. Is there anything I can do to move my image back up?
<div id="servicesPhotos">
<img src=file:///I|/Dreamweaver/bikes/assets/photos/bike_on_stand.jpg width="332" height="249" id="bike_on_stand" alt="Bike maintenance"/>
<img src=file:///I|/Dreamweaver/bikes/assets/photos/wheel_service..jpg width="332" height="249" id="wheel_service" alt="Wheel truing" />
</div>
#container #servicesPhotos #bike_on_stand {
float: left;
clear: right;
#container #servicesPhotos #wheel_service {
float: right;
position: relative;
clear: left;

Maybe this will help you see how floats and margins can be used to create 3-evenly spaced boxes. You can put images, text, flash objects or whatever you wish inside them.
3 CSS boxes -
http://alt-web.com/DEMOS/3-CSS-boxes.shtml
Alternatively, you could do the same thing much quicker with a 3-column table.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

Similar Messages

Trouble position image in share DVD menu option

Anyone having trouble getting an image to fit on the share DVD option menu page. Does not usual apple mask to edit and position image. Spent many hours trying to get my image which contains text not to be cut off. There seems to be no guidance on what the image size should be.
Thanks in advance,
Susan

It is a little confusing... but anything white will be interpreted as transparent.
Make the text in photoshop a different colour, and use the colour mapping tools in DVDSP to get it to look white in the normal state. You can then change the color to be anything else in the different states.
For example, if your menu background has white text as part of the background image, and your overlay has red text created in photoshop that sits directly on top of the white text, it will still show as white in DVDSP until you change the mapping. Draw a button rectangle over the text, make sure the button is selected and look in the property inspector, in the colours tab.
Set the overlay style to be 'Advanced' and the mapping type to 'Chroma'. You'll see a black, red blue and white colour control. Set the button to be 'Normal' and move all of the sliders to the left. Set it to be 'Selected' and move the red slider all the way to the right. Make sure that the dropdown box next to the red slider is also showing red in it. What this is saying is "In the red channel, use red as the colour, and make it fully opaque". Of course, you can swap the red for any other colour in the dropdown. For the 'Activated' state this is exactly what you need to do - leave the red slider on the right, but change the colour in the drop down to be what you want when the button is activated - perhaps yellow, for example.
You should now have no problem making the buttons change colour as you want.

Could use some help on positioning images

With help here, I'm making my way through ID novice to ID "dangerous". I sorta get layout and sorta get styling and now could use some help with sizing and positioning images.
The test is a 3-column newspaper that I let ID size when the document was created. All the text frames are linked. I now want to put some images on the pages and have the text wrap. I sorta understand wrapping and anchoring, the question is sizing.
Am I on the right path to start thinking that images often need to be sized to a column width or two (plus gutter)? If so, do I size images based on the frame size? For example, the columns show as 3.2222in and the gutter as .1667. Does that mean I want to set the image width to 3.2887 or are things just not that accurate? What are the best practices?
One related question on wrapping: it seems like anchoring the image allows wrapping around only one frame of text but not the other if the image spans two text columns. How do you place and image so that it wraps text in more than one column?
Also, do people make the image smaller than the frame to put a border in when wrapping text?
Thanks
Tom

Are you asking about image size as it is saved, or as placed on the page?
With older RIPS it was common to want to save images at the correct dimensions so when placed at 100% they would have the correct resolution. This was to reduce processing time. Today that is less of an issue and it is not at all unusual to scale images in the InDesign layout. (I'm talking raster here -- vector objects can be scaled almost infinitely.)
So, what is the correct size? There are a number of rules of thumb, but the basic one is that images should be placed so that the resolution, at the size they will be printed, is twice the value of the linescreen being used. Anything in the range of 1.5 to 2.5 is probably acceptable, and I know people who routinely send images at 1.4 times the linescreen.
For coated papers and reasonably good reproduction, 150 lpi is not unusual, with 200 lpi for fine art books, so you get the common suggestion that images should be 300 ppi. Newspaper printing is usually accomplished on fairly porous stock at much lower screen frequencies -- 80 to 100 lpi -- so you need considerably less image resolution.
How do you know what the resolution is at the size you've place the image? Look at the info panel with an image selected. You'll see too numbers, an "actual" ppi and an "effective" ppi. The actual number is simply the resolution recorded with the image at its dimensions when it was saved (and digital cameras often save images 20 inches or so wide at 72 ppi) and is basically irrelevant. The effective ppi is the one that matters. If it's too small, either reduce the size of the image on the page, or be prepared to live with less than stellar reproduction. If it's grossly over the requirement it usually won't hurt except for some increased processing time, but the extra image data won't improve things as it gets discarded by the RIP.
It's usually OK to downsample an image in Photoshop, though you will sometimes lose fine detail or subtlety in shading, but you'd probably lose the same things through scaling in ID. Upsampling never helps.
I presume you know that you can place graphical objects in several ways, either into an existing frame, at full size (whatever that happens to be and at the "actual" resolution) by clicking the loaded cursor on an empty spot on the page, or you can click and drag a new frame the size you want. When an image is first placed it will always be "actual size" unless some scaling factor has been applied to the frame in advance, so you may not see the entire image. You then have several fitting options available to either make the frame fit the image or the image fit the frame (and in newspaper work you pretty much only want to fit to or fill the frame proportionally).
I personally like keeping the images snapped to the column grid, but it's by no means an iron-clad rule. You want to avoid situations, though, where an image impinges on a column to the point that the remaining text is unworkably narrow.
I don't know why you are using anchored frames for your images (text wrap only affects text in the frame after the anchor point). It's not likely in a newspaper that you would want the pictures to move on the page if you edit the text. You can group the image, caption and story, if you like, so that they all stay together if you need to re-arrange the page or move them to a new location.
I don't know if I answered your question. Feel free to come back for clarification.
Peter

Help with positioning images

Hi! So, I am new to DreamWeaver and need assistance. I am working on using AP Divs to position images. I place them where I want via the Design tab and then when I preview it in IE 7 it is in a completely different place. Up until this point, I have just made the adjustments by flipping back and forth between my browser and DW Design display and using margins. You can see I did this for my sidebar links (Home, Overview etc.). Even though on the design screen it looks like I am overlapping my header, when I go out to IE, it looks fine. However, for this graphic organizer that I am working on, it will be too difficult. I will post screen shots of what I am talking about below. Can anyone tell me why this is happening and how to get it stopped? I have never had problems with this before when I have done websites. Do you think I have something wrong in my HTML code or CSS? As you can tell, I am a beginner. Any help would be appreciated! Also, I have a quesiton about the my links in my sidebar. Does anyone know how to put more space in between the words vertically (you can see the links in my second pic below)? Thanks!

How to Get Help Quickly
http://forums.adobe.com/thread/470404
HTML & CSS Tutorials - http://w3schools.com/
Code Validation Tools
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
APDivs as a primary layout method seldom works well. Here is why:
http://apptools.com/examples/pagelayout101.php
Learn CSS Positioning in 10 Steps -
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Use CSS line-height, margins and padding to add space between headings, paragraphs or list items.
Related Link:
CSS Box model
http://css-tricks.com/the-css-box-model/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Position images at bottom of div tag?

How do I position images at the bottom of a div tag?
These images are going to be used as links and Im using a
template which will double there size on certain pages, so I cant
use background images.
Please help as I cant believe this isn't possible!
James

I dont understand what you mean by;
'If you do not know the widths, and you want them all to flow
one after
the other, the make another div as their container, and move
the
"position:absolute;right:0px;" styles to the new div'
When I apply a rule for all images in the div tag, the images
all sit on top of one another;
.container img {
position: absolute;
bottom: 0px;
If I set the images individually I can stop them from doing
this;
.container #image1 {
position: absolute;
bottom: 0px;
left: 320px;
The problem however is that this design is for a template.
The images in the template will double in size when the user is on
that page.
If i use a pixel (or a %) value for the left position, then
the left hand side of the image is centered, not the centre of the
image. This means that the space between the images will vary when
one of them enlarges.
This could be solved if there was some way of making the
images sit next to each other, without specifying a position left
value (like when you insert images into a div tag with no rules).
Can this be done?
Alternatively, is there a way of using a position left value
which controlled the position via the center of the image, not the
left side? Then I could use % values and the images would still
look ordered.

Change position images in slideshow

Hello,
I am trying to change the position of the images in my slideshow, but I don't know how I can do this.
Does anyone have an idea?
Thanks in advance!

You can resize and reposition both the Hero Image container and the Image inside that (by double-clicking the Hero Image).
Although your Hero Image size/position is fixed for all the images in slideshow, you can definitely move/resize the actual images inside individually. See if that helps you get it to work for you in the Slideshow itself.
Else you can always for go the Composition Widget which allows you to place individual target slides in different positions and have different sizes.
Cheers,
Vikas

So frustrated! Need help positioning image...

Hi folks...
I am learning CSS in fits and starts, and clearly I don't have a good enough grasp on it. I hope someone can help me.
I created this page, and tried to place an image in the large "main content" area to the right of the slideshow. It didn't work, kept getting shifted elsewhere. So I specified it as the background image for that div instead... It looks fine in Firefox and Safari (I'm on a Mac), however, a colleague with Internet Explorer 7 on a PC says that it shows up way down at the bottom of the page after the slideshow
I've looked at all the ways to insert the image but none of them work. I know I must be missing something very simple. Can anyone help?
Here's the URL... http://greatdiamondrentals.com/index.html
and the source code:
<!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=UTF-8" />
<title>Great Diamond Rentals, Diamond Cove, Great Diamond Island, Maine</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
      google.load("jquery", "1.3.2");
    </script>
<script type="text/javascript" src="js/jquery.cycle.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#slideshow').cycle();
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
} else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
} else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
</script>
<style type="text/css">

</style>
<meta name="Keywords" content="Maine, Vacation, rentals, Great Diamond Island, Diamond Cove, vacation homes, Island, Casco Bay, Portland, Maine Coast, Atlantic Ocean, Oceanside, seaside, Family, New England, lobster, beach, beaches, islands, rental, hotel, inn, bed and breakfast, holiday, ferry, fort, historic" />
<meta name="Description" content="Vacation on a Maine island! Beautiful historic homes available for rent at Diamond Cove on Great Diamond Island in Casco Bay near Portland, Maine." />
</head>
<body class="twoColFixLtHdr" onload="MM_preloadImages('images/visited_homes.jpg','images/visited_about.jpg','images/vi sited_amenities.jpg','images/visited_map.jpg','images/visited_faq.jpg','images/visited_con tsact.jpg')">
<div id="container">
<div id="header">
    <table border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td><a href="http://greatdiamondrentals.com/view_our_homes.htm" target="_top" onclick="MM_nbGroup('down','group1','viewhomes','images/visited_homes.jpg',1)" onmouseover="MM_nbGroup('over','viewhomes','images/visited_homes.jpg','images/visited_hom es.jpg',1)" onmouseout="MM_nbGroup('out')"><img src="images/nav_viewourhomes.jpg" alt="View Our Homes" name="viewhomes" width="186" height="30" border="0" id="viewhomes" onload="" /></a></td>
        <td><a href="about_the_island_2010.html" target="_top" onclick="MM_nbGroup('down','group1','about','images/visited_about.jpg',1)" onmouseover="MM_nbGroup('over','about','images/visited_about.jpg','images/visited_about.j pg',1)" onmouseout="MM_nbGroup('out')"><img src="images/nav_about.jpg" alt="images/visited_about.jpg" name="about" width="192" height="30" border="0" id="about" onload="" /></a></td>
        <td><a href="amenities.htm" target="_top" onClick="MM_nbGroup('down','group1','amenities','images/visited_amenities.jpg',1)" onMouseOver="MM_nbGroup('over','amenities','images/visited_amenities.jpg','images/visited _amenities.jpg',1)" onMouseOut="MM_nbGroup('out')"><img name="amenities" src="images/nav_amenities.jpg" border="0" alt="amenities and activities" onLoad="" /></a></td>
        <td><a href="map_2010.html" target="_top" onClick="MM_nbGroup('down','group1','map','images/visited_map.jpg',1)" onMouseOver="MM_nbGroup('over','map','images/visited_map.jpg','images/visited_map.jpg',1) " onMouseOut="MM_nbGroup('out')"><img name="map" src="images/nav_map.jpg" border="0" alt="island map" onLoad="" /></a></td>
        <td><a href="FAQ_2010.html" target="_top" onClick="MM_nbGroup('down','group1','FAQs','images/visited_faq.jpg',1)" onMouseOver="MM_nbGroup('over','FAQs','images/visited_faq.jpg','images/visited_faq.jpg',1 )" onMouseOut="MM_nbGroup('out')"><img name="FAQs" src="images/nav_faq.jpg" border="0" alt="FAQs" onLoad="" /></a></td>
        <td><a href="contact2009.html" target="_top" onClick="MM_nbGroup('down','group1','contact','images/visited_contsact.jpg',1)" onMouseOver="MM_nbGroup('over','contact','images/visited_contsact.jpg','images/visited_co ntsact.jpg',1)" onMouseOut="MM_nbGroup('out')"><img name="contact" src="images/nav_contact.jpg" border="0" alt="contact us" onLoad="" /></a></td>
      </tr>
    </table>
    <h1> </h1>
</div>
<div id="sidebar1">
      <div id="slideshow">
<img src="/images/slide1.jpg" />
<img src="/images/slide2.jpg" />
<img src="/images/slide3.jpg" />
<img src="/images/slide4.jpg" />
<img src="/images/slide5.jpg" />
<img src="/images/slide6.jpg" />
<img src="/images/slide7.jpg" />
<img src="/images/slide8.jpg" />
<img src="/images/slide9.jpg" />
<img src="/images/slide10.jpg" />
</div>
</div>
<div id="mainContent">
    <h1> </h1>
</div>
    
    <div id="footer">
      <p>Great Diamond Rentals, c/o Phoenix Management, P.O. Box 759, Saco, Maine 04072 - (207) 766-3005 - fax (207) 571-3066 -<a href="mailto: [email protected]"> [email protected]</a></p>
      
</div>
    <br class="clearfloat" />

</div>
</body>
</html>

staceyetc wrote:
Hi folks...
I am learning CSS in fits and starts, and clearly I don't have a good enough grasp on it. I hope someone can help me.
I created this page, and tried to place an image in the large "main content" area to the right of the slideshow. It didn't work, kept getting shifted elsewhere. So I specified it as the background image for that div instead... It looks fine in Firefox and Safari (I'm on a Mac), however, a colleague with Internet Explorer 7 on a PC says that it shows up way down at the bottom of the page after the slideshow
I've looked at all the ways to insert the image but none of them work. I know I must be missing something very simple. Can anyone help?
Here's the URL... http://greatdiamondrentals.com/index.html
The width of your #mainConent <div> is too wide hence in IE it is displaced to beneath the side bar.
Change it to 560px wide and also add float: left; as shown below:
.twoColFixLtHdr #mainContent {
    height: 579px;
    width: 560px;
    float: left;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-right: 0px;
    padding-bottom: 0;
    padding-left: 0px;
    margin-left: 0px;
    background-image: url(images/GDRmaincontent.jpg);
    background-position: right top;
    background-repeat: no-repeat;
background-color:#609;

Looking for the most easy way to position images on a page!?

Hi, I'm looking for the most easy way for exact position a lot of PNG images on a web page. Input appreciated!
Thanks!

Basic 1-col layout with 3 evenly spaced boxes:
http://alt-web.com/TEMPLATES/Basic-1-col-fixed.html
CSS Floats and Margins tutorial -
http://alt-web.com/DEMOS/3-CSS-boxes.shtml
Float left & float right images with wrapping text
http://alt-web.com/DEMOS/CSS2-Captions-on-floated-images.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Please make it easier to position images in height and have them adapt to browser width!

Maybe I'm missing a method but I have now long enough stumbled on something I would think obvious to exist within the program.
I just want a highres intro image to pop up. i want to position it a bit down from the vertical center, but it should fill out left and right.
1. Tried using slide shows, but Lightbox won't autostart without clicking thumbnails first. Only fullscreen lightbox has this ability for some unexplicable reason. Please make the non fullres lightbox available for immediate popup without having to click thumbnail.
2. Tried using background browser fill. Works to a degree, but I can't control the image's vertical position.
3. Tried using a 100 % width box and fill it with my highres image. But this wont work for this utterly strange reason:
If I use a 960 px page width as my template, create a box 100% width, I try filling it with my image and tell it to scale to fill. But here's the bummer: If I resize my browser window to accomodate a 2560 px wide screen - my highres image was shredded when I assigned it to fill the 960 px wide box. It's looking a disaster at 2560 resolution. Please allow the image fill to retain it's original size and be able to rescale to smaller sizes instead.
Because downward scaling doesn't seem to work in fills.
So to boil it down: I want to be able to make a box and set it to 100 % browser width in the entry box, not having to graphically drag it out to whatever page width I'm currently using in Muse. I should be able to fill it with an image of any size, without Muse making any decision and downsampling my image, making it unusable for 100 % width display on high resolutions.
Please consider this!
T

>@Ian Lyons: I can't drag the panels but the scroll-wheel on my mouse works fine...far better than it did in LR1.
Agree--when LR is on the main display, but the scroll wheel does NOT work for scrolling the panels when LR is on the 2nd display. I don't know if this is intentional or an oversight or just a situation I experience, but I have experienced it with all versions of LR and in both XP and Vista.
Note that the scrolling of the side panels isn't the only thing that doesn't work properly with the scroll wheel when LR is on the 2nd display--the thumbnail panel doesn't scroll when on the 2nd display, either. However, using the scroll wheel to adjust brush sizes works fine on either display as does scrolling the thumbnails in the Grid view.

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

Need some help using CSS Rules and Positioning Image Place Holders

Evening all,
I need to get this done by tomorrow so some speedy help would be very much appreicated!
I'm doing a website for an IT company, and as you may/may not know, support for XP and Office 2003 is dropped tomorrow - they want a button in the header of their site which basically says 'click here for upgrade advice' and when you click on it you're taken to a page telling you the benefits of upgrading. They want it to look like the mock up below:
I've had a right old job even getting the button (it's in PNG format) to go above the BrownTech logo. I inserted a placeholder, linked it to the PNG file, and then I made a custom CSS rule/class called '.header_fltrt' to put the image in and position it in that place, directly above the BrownTech logo.
To get the upgrade button in the desired position, here are the 'Box' CSS properties I used for the .header_fltrt CSS rule.
It's worth noting that the dimensions for the header itself are 960x235px, and the BrownTech logo is the background image for the header class (and is 960x235 in dimensions).
The problem I am having is that when I view the page in Design Mode in Dreamweaver, it looks fine, but when I view it in Live View or in a web browser, it looks like this:
As you can see, the upgrade button is not even visible!
Furthermore, when I go back into design mode on Dw, when I click on the upgrade button, I don't get any placeholder properties like I do when I click on green logo in the top left (which by the way is just a link back to the index page).
I'm not sure why this is but I cannot find any way to resolve it. I've even tried putting the BrownTech logo on a transparent background thinking that the block white background may be covering the upgrade button, but that's not the case.
Sorry if I haven't explained it very clearly. Hopefully you can see my problem.
Any help in etting the upgrade button to preview in the correct place would be very much appreciated!

Try this in place of what you have now.
.header {
    background-color: #FFFFFF;
    min-height: 335px; /**adjust as needed**/
    width: 960px;
    background: url(../assets/banner2.png) no-repeat;
.header_fltrt {
/**no floats or positioning required**/
    width: 552px;
Nancy O.

Positioning image with DIV

I have a row with 3 columns. I want the two outsid columns to
contain images that but up against an image to the left and right
respectively. Problem is that Im getting a gap or border between
the image in outside columns and the image (outside of that it
should be butted up against). Long story short Im trying to figure
out how to use css to position them with -1 margins. I remember
seeing something about this but done know the details. Is this a
feasible route to take or is there a better one?
Thanks

www.asciconsulting.com
Ive decided not to use the corner graphics. But that leaves
two other questions. On the page notice the border to the right of
the gradient graphic? That is not supposed to be there and I can't
figure out why it is. Its like a table border showing up or
something. Any ideas?
Also the links I have on the left are supposed to highlight
when hovered over. They are purely css, but once you click on one
it will never highlight again. Even after being refreshed. How can
I fix this? Heres the CSS Code:
.nav1 {
display:block;
font-family: "Copperplate Gothic Light", "Times New Roman";
font-size: 16px;
font-weight: normal;
color: #cccccc;
text-decoration: none;
padding: 5px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color:#000000;
.nav1 a:link {
display:block;
font-family: "Copperplate Gothic Light", "Times New Roman";
font-size: 16px;
font-weight: normal;
color: #cccccc;
text-decoration: none;
padding: 5px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color:#000000;
.nav1 a:hover {
display:block;
font-family: "Copperplate Gothic Light", "Times New Roman";
font-size: 16px;
font-weight: bold;
color: #000000;
text-decoration: none;
padding: 5px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color:#cccccc;
.nav1 a:visited {
display:block;
font-family: "Copperplate Gothic Light", "Times New Roman";
font-size: 16px;
font-weight: normal;
color: #cccccc;
text-decoration: none;
padding: 5px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color:#000000;
.nav1 a:active {
display:block;
font-family: "Copperplate Gothic Light", "Times New Roman";
font-size: 16px;
font-weight: normal;
color: #cccccc;
text-decoration: none;
padding: 5px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
background-color:#000000;
Thanks for any ideas...

Positioning image on page for printing in Elements 8

In Elements 6, in the "print" dialogue, you could uncheck "center image", and print an image anywhere you chose on the paper. I use
it because I print small decal images on A4 paper at the top, cut them off and can then reuse the (expensive) paper multiple times.
Where is this option in Elements 8? When I try to move the image by dragging in the preview, it moves "behind" the window, but the actual print position remains the same, and the image is not printed in full. Where can I set the position of the printed image on the page? Surely this useful feature hasn't been removed?
best regards,
Matt

Thanks Bob for your ideas. As Elo and Bryhy have mentioned, I find it very useful without leaving the Editor workspace to produce small test prints for tweaking colour, contrast, etc.before commiting to a final large print so it is important to maintain continuity. I have used PSE from Day 1, I have found it an excellent program and I was just completely dumbfounded to discover this facility had disappeared from PSE8. All they had to do was leave it there - the software was already written for all the previous versions. Elo speculates that removing it could be a ploy by Adobe to dumb down the program and thereby push the more advanced user towards the full Photoshop. On the other hand, Adobe do not seem to have dumbed down the editing capabilities which remain quite powerful so it could be they just did not realise how useful this print facility was to some users. Either way, I feel it is a reasonable expectation that upgrades should retain existing facilities or some equivalent alternative.
I continue to try to make contact with Adobe to see whether they feel able to restore the facility with an immediate upgrade or that it will be reinstated in the next version. I have submitted three cases, two simply referred me to the help manual and the thrid was deleted without reply. I then wrote to the Chief Executive of Adobe Systems Europe in February but so far no reply has been received so it does not look like I am going to get one. I now intend to write to the Cheif Exec in the US.

Filmstrip Spry Widget - problem positioning images

Hi - fairly new at this all, so possibly I am missing something obvious, I am able to play with the position of the slideshow and the filmstrip but can't seem to change position of the images themselves. Currently they are flush to the top, overlapping the slideshow border & I am looking to centre them.
I also am having some issues on another site I have set up with same widget where the images are not loading until I click om the thumbnail, & then they are not 100% opaque. Odd indeed... help anyone please?!

The problem is with the Spry.Widget.ImageSlideShow.PanAndZoomPlugin
If you leave that out, then all is well
A dirty fix is to add the following to the HEAD section of your document
<meta http-equiv="X-UA-Compatible" content="IE=7" />

Position Image at Bottom of Div Tag

OK, so this may be the stupidest question ever, but how do I
Position an Image at Bottom of the Div Tag? I named the image and
then set;
vertical-align: bottom;
But this doesn't seem to have worked. I could achieve the
bottom alignment with multiple div tags but this seems needlessly
complicated. How should i do this?

> ok, is there a rule for when you should use an image as
a background as
> opposed to placing it normally?
No. But there are things you can do with a background image
that you cannot
do with a foreground one, and vice versa. I'm sure that's not
the answer
you wanted to hear however.
Anytime I need to place an image at a specific location
within a container
(like at the bottom, or the right edge), I'm thinking of
using a background
image.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"jameswoody" <[email protected]> wrote in
message
news:fv5el0$dn1$[email protected]..
> ok, is there a rule for when you should use an image as
a background as
> opposed to placing it normally?
> Thanks

Positioning image?

Similar Messages

Maybe you are looking for