473,395 Members | 1,676 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,395 software developers and data experts.

Move image1.jpg leftmost and imag2e.jpg rightmost on a page???

On a webpage I would like to move image1.jpg as left as possible (directly to the browser window left border)
and - simultaneously - the picture image2.jpg to the rightmost (directly to the right browser window border).

How do I code this in HTML resp. CSS?

If the user shrinks the browser window to a size which is smaller than the sum of the size
of the two images image1.jpg + image2.jpg then all browser tend to position these pictures
vertically. But: I don't want a "line wrap". If the horizontal size doesn't fit then
the right picture image.jpg should be truncated.

Is there a solution for this?

Jason

Jul 20 '05 #1
2 3241
Jason Stacy wrote:
On a webpage I would like to move image1.jpg as left as possible (directly to the browser window left border)
and - simultaneously - the picture image2.jpg to the rightmost (directly to the right browser window border).

How do I code this in HTML resp. CSS?

If the user shrinks the browser window to a size which is smaller than the sum of the size
of the two images image1.jpg + image2.jpg then all browser tend to position these pictures
vertically. But: I don't want a "line wrap". If the horizontal size doesn't fit then
the right picture image.jpg should be truncated.

Is there a solution for this?


Absolute positioning.

<div style="position: absolute; top: 0; right: 0; width: 200px;"><img
src="..."></div>
<div style="position: absolute; top: 0; left: 0; width: 200px;"><img
src="..."></div>

should do it (untested) for 200px-wide images. Of course, style
information should be in a separate style sheet rather than inline.

Note that I put the right image first in the source, to achieve your
requirement that it goes "under" the left image - I presume that's what
you intend when you say "truncate".

If you want these to be relative to a containing element rather than the
browser window, put them inside a <div> with position: relative set.

--
Mark.
http://tranchant.plus.com/
Jul 20 '05 #2
Ivo
"Jason Stacy" <jj*****@yahoo.net> wrote in message
news:ce*************@news.t-online.com...
On a webpage I would like to move image1.jpg as left as possible (directly to the browser window left border) and - simultaneously - the picture image2.jpg to the rightmost (directly to the right browser window border).
How do I code this in HTML resp. CSS?

If the user shrinks the browser window to a size which is smaller than the sum of the size of the two images image1.jpg + image2.jpg then all browser tend to position these pictures vertically. But: I don't want a "line wrap". If the horizontal size doesn't fit then the right picture image.jpg should be truncated.


There are many ways to do this using CSS. One possibility is this:
[quote cite=http://www.vansandick.com/archief/]
<div>
<img src="CI2a.jpg" alt="label" id="label" width="560" height="340"
border="0"
style="position:absolute">
<img src="CI7.jpg" alt="label" id="label" width="900" height="340"
border="0"
style="float:right">
</div>
[/quote]

--
Iv
Jul 20 '05 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Sandra Setz | last post by:
Hi, I was wondering if someone could explain to me what the difference is between the width propery of the picture property of an image and the width property of the image itself. I would...
3
by: Sandra Setz | last post by:
Hi, Is it possible to assign the Picture property of a picturebox to the Picture property of an image control? I use an invisble picturebox to make some changes to a picture, but I want to...
0
by: Jason Stacy | last post by:
On a webpage I would like to move image1.jpg as left as possible (directly to the browser window left border) and - simultaneously - the picture image2.jpg to the rightmost (directly to the right...
6
by: Prakash | last post by:
Hi !! In a Continuous Form with say 10 records, I'd like to have 1 button with an "UP" Arrow & another button with a "DOWN" arrow. By pressing either the Up or the Down Arrow, I'd like the user...
8
by: Ron Vecchi | last post by:
I know this has been asked before but I out of all the posts I've read regarding using Directory.Move and then the application restarting itself I have found no answer except that Sessions are...
3
by: Nathan Sokalski | last post by:
I am using GDI+ to generate buttons in my application. Because I want the left and right edges of the buttons to be a certain number of pixels from the start and end of the text, I need to know (or...
6
by: Dave | last post by:
How can I determine if the two rightmost elements of my string are ." ? Obviously, vb.net has a special use for the double-quote character, so how do I account for that. I have... if...
55
by: indhu | last post by:
HI all one sequence has many panels. when i select combo it displays all the fields but panel has more rows. i want to view that also. how to do that? move next and previous commds are there...
3
by: rkhurana | last post by:
Hi I am writing a JSF application that uses some third party charts. While I can see the chart but the javascript that is supposed to calla function to update chart periodically has a problem. It...
3
by: hantechs | last post by:
Hi, all I found I can get the img element named with "image1" in a html by using "document.image1" with javascript. It's very convenient because I don't need to use the long method like...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
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...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
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...

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.