473,837 Members | 1,739 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Inserting an image so it won't move on different size monitors?

48 New Member
I am trying to insert an image into my website. I don't want the image to move when changing the browser window size or even a monitor size, I want it to remain in the middle of a specific page. I have seen many websites do this with no problem. Every time I try it, even if I use absolute positioning, it seems to always slide around to the left or to the right. I am using Dreamweaver cs3 suite software. I am sure there are a simple fix to this problem, but I am having a mind boggling time figuring it out. Any help would be greatly appreciated. Thank You.

here is my code, what do I need to input?



Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. <!--
  8. body {
  9.     background-image: url(/images/buckcollagebg.jpg);
  10. background-repeat:no-repeat;
  11. background-attachment:fixed;
  12. background-position:center; 
  13.  
  14. }
  15. -->
  16. </style>
  17. <link href="/css.css" rel="stylesheet" type="text/css" />
  18. </head>
  19.  
  20. <body>
  21.  
  22.  
  23. <p>&nbsp;</p>
  24. <p>&nbsp;</p>
  25. <p>&nbsp;</p>
  26. <p>&nbsp;</p>
  27. <p>&nbsp;</p>
  28. <p align="center">&nbsp;</p>
  29. <table width="400" border="1" align="center">
  30.   <tr>
  31.     <td><img src="/images/archer2.gif" alt="" width="346" height="432" /></td>
  32.     <td><div align="center"></div></td>
  33.     <td> <p>&nbsp;</p>
  34.     <p>&nbsp;</p></td>
  35.     <td><div align="left"><img src="/images/archer2.gif" width="346" height="432" /></div></td>
  36.   </tr>
  37. </table>
  38. <table width="300" border="1">
  39.   <tr>
  40.  
  41.   </tr>
  42. </table>
  43. </body>
  44. </html>
  45.  
Jan 5 '11 #1
46 10284
AutumnsDecay
170 New Member
Are you setting the CSS 'top' and 'left' of the image when you use absolute positioning?
Jan 5 '11 #2
AutumnsDecay
170 New Member
Unless it's in your CSS, I don't see where you've set your image(s) to absolute positioning.

Try this:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled</title>
  6.  
  7. <style type="text/css">
  8. .centereddiv
  9.     {
  10.         width:400px;
  11.         height:200px;
  12.         position: absolute;
  13.         top:40%;
  14.         left:40%;
  15.     }
  16. </style>
  17. </head>
  18.  
  19. <body>
  20.     <center>
  21.         <div class="centereddiv">
  22.             <img src="your_image.jpg" alt="" />
  23.         </div>
  24.     </center>
  25. </body>
  26. </html>
  27.  
Just create a blank document and try that out, you can then apply that logic / knowledge to your situation.
Jan 5 '11 #3
Sean Watkins
48 New Member
so what If I wanted two images to be centered within the page? Would I also have to use the left and right intervals as well?
Jan 5 '11 #4
AutumnsDecay
170 New Member
No, let's say you use the above method that I posted, you could just add a second image to the code:

Expand|Select|Wrap|Line Numbers
  1. <img src="your_image.jpg" />&nbsp;&nbsp;<img src="http://bytes.com/topic/html-css/answers/..." />
  2.  
You'd want to modify the CSS of the div containing these images. Set the width property to auto, or whatever the total dimensions of the images are, if you know them.
Jan 5 '11 #5
Sean Watkins
48 New Member
code of two images, I would like them to be side by side with a little space in between them.

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>Untitled </title>
6.
7. <style type="text/css">
8. .centereddiv
9. {
10. width:100px;
11. height:200px;
12. position: absolute;
13. top:90%;
14. left:75%;
15. }
16. </style>
17. </head>
18.
19. <body>
20.
<div class="centered div"> 22. <img src="/images/first turkey.jpg" alt="" width="200" height="496" /> 23. </div>
<center>
21. <div class="centered div">
22. <img src="/images/first turkey.jpg" alt="" width="572" height="496" />
23. </div>
24. </center>
25. </body>
26. </html>
27.
Jan 5 '11 #6
AutumnsDecay
170 New Member
See my above example. This will put both on top of each other.
Jan 5 '11 #7
Sean Watkins
48 New Member
So I will need to actually paste the div tag code into a CSS document, and not directly into the HTML code its self? Also wanted to say thank you thus far for all the help, I really appreciate it sir.
Jan 5 '11 #8
AutumnsDecay
170 New Member
With absolute positioning, it doesn't matter WHERE in the document it is, as long as it's within the <body> tag.

If you copy the CSS I made for that example for you, and copy the div I made as well, and populate that div with your images, it should work.

It's hard to know if it will 100% work for what you're doing, as I don't know exactly what your project is.

You're welcome though. Sites like this, with people like me are the gateway for the next generation of developers. :)
Jan 5 '11 #9
Sean Watkins
48 New Member
Ok, one other thing. I have a background image set in my document. When I go to my MAC and re-size the window the background moves differently than that of the table I have inserted in the document. What is causing this? Is it because I don't have the table in a absolute position DIV? It's just that the image slides around and changes the location of where I intended the image to be. I know its not a big big deal, but when you have a background image and images on top of that, when one moves and the other moves differently then this throws everything off center, and looks non professional.
Jan 5 '11 #10

Sign in to post your reply or Sign up for a free account.

Similar topics

5
11497
by: Aaron | last post by:
I have a div with an image which needs to appear in it's bottom left. I currently have the padding top of the image set to 100%, which should move the image to the bottom of the the div, but for some strange reason, there is still space below the image which I can't get rid of. I've set the image margins to 0 and it does nothing, so it's not the margins. The stranger thing is, if I reduce the height of the enclosing div to 326px, the space...
21
20662
by: Dan V. | last post by:
I have tried a number of things including preloading, but the background image (water tile in header) in IE 6 will not display where other browsers will. http://www.officeactivate.com/web-site-design.shtml Any ideas? thanks.
7
18937
by: Andrew Poulos | last post by:
I'm using the following code to create a small table with one column and two rows. An image goes into the first cell. //create table var t = document.createElement("TABLE"); t.style.position = "absolute"; t.style.left = "100px"; t.style.top = "100px"; t.style.width = "200px";
3
2578
by: Peter Oliphant | last post by:
I'm importing a jpeg via: Bitmap* image = new Bitmap( filename ) ; Then, using the Drawing::Graphics object, I execute DrawImage( image, x, y ). My problem is that the original image was 200x200, but it's drawing something smaller (something like 130x130, about 2/3 the original size). I am using transforms, but I've verified that scaling is set to 1.0 on both x and y axis.
12
2609
by: Yuaw | last post by:
I managed to cobble together some code and all I need to be on my way is to have the close button I created to always be at the top right of my pop up. The pop ups are large versions of thumbnail images and vary in size, so that's why I need the button to follow the image size. Is this possible to do?? AND, this does not render correctly in IE! Can someone please help me out? :( <style type="text/css"> ..myLayersClass
4
14618
by: FlyingsCool | last post by:
Well, I did a search and found a few references with a similar subject but no answers for me. At http://www.flyingscool.com/FC_eLearning.htm I have a table row with a background image using the following code. It displays fine in IE, but won't show up in Firefox. <tr height="120px" style="background: #909090 url('images/FlyingsCool_Stores.jpg') no-repeat fixed right"> <td> <table width="816px" height="120px" border=0...
2
2661
by: dpicella | last post by:
I have a semi-urgent need to solve a problem in Java. I have three small images that I need to hold to a constant size (e.g., 1 inch) regardless of both monitor size and resolution. Basically it breaks down to this series of events. 1. Determine the users monitor size. 2. Determine the users screen resolution size. 3. Calculate the height and with to scale the image to for a constant size. 4. Display the image.
53
5290
by: Jonas Smithson | last post by:
In his book "CSS: The Definitive Guide" 2nd edition (pgs. 116-117), Eric Meyer has an interesting discussion about "font-size-adjust" that was evidently dropped in CSS 2.1 due to browser non-support. I'm wondering if there's some way I could still get a primitive version of this functionality, because different fonts display at very different optical sizes for the same nominal sizes. For example, suppose I want type to display in...
7
2167
by: julietbrown | last post by:
I was scolded on "Bytes" a couple of weeks back for writing all my own Save/Delete/Next etc buttons, so I have completely redone my main "Contacts" form using the button wizard. (I've also converted all the Macros to VBA so that I can more or less understand what they are actually doing!) Must admit this has cleaned things up a lot, but I have hit a problem ... as follows There is an unbound "Find Contact" combo box on the form which lists...
1
2824
by: betlogs | last post by:
Hi guys, I'm trying to float different size images to the left within a fixed container. Problem is that I want the images to fit like a puzzle like this. With the code I have now it looks like this were the image on the next line does not sit snuggly underneath the first image. I'm sure you can do it with positioning each image manually, but would there be another solution? <style type="text/css"> body { margin:0; }
0
9846
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9693
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10280
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9419
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7823
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7009
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5679
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
2
4056
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3128
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.