473,395 Members | 1,502 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.

Riding the Right (Edge That Is)

I am wondering if anyone knows how to do the following:

I have an image in a header defined by a div. It is organized in the way
that I was shown here, that is the contents of the div (three images)
are aligned to the left using text-align: left; and first image is flush
on the left, second image is has a left margin of 50px. The third
doesn't matter for now.

The question: Is there a way to keep the second image flush with the
right side of the *browser window*?

The body of the document is 2000px so I can't use the body.

Here is what I was thinking: wrap the fist and second image in another
div and size it to 100% then float the second image to the right.

That seemed inefficient to me. Does anyone else know how to do this,
maybe using margins or padding or something else?

Jul 20 '05 #1
9 2363
Quoth the raven named Heath:
I have an image in a header defined by a div. It is organized in
the way that I was shown here, that is the contents of the div
(three images) are aligned to the left using text-align: left; and
first image is flush on the left, second image is has a left margin
of 50px. The third doesn't matter for now.

The question: Is there a way to keep the second image flush with
the right side of the *browser window*?
I, and others, answered this question in your "Centering image"
thread. The response from me was snipped right from a working web page
with three logo images, one flush left, one larger in the center, and
a duplicate of the left one at flush right.

I'd give you a URL, but the page/site is in negotiation with a
prospective client.
The body of the document is 2000px so I can't use the body.
The body is 2000px? What do you mean?
Here is what I was thinking: wrap the fist and second image in
another div and size it to 100% then float the second image to the
right.

That seemed inefficient to me. Does anyone else know how to do
this, maybe using margins or padding or something else?


Again, see the answers in the other thread.

--
-bts
-This space intentionally left blank.
Jul 20 '05 #2
Beauregard T. Shagnasty replied to hisself:
I'd give you a URL, but the page/site is in negotiation with a
prospective client.


Ok, I cut the relevant parts to this page. I didn't bother taking the
time to find a suitable graphic for the center.

http://home.rochester.rr.com/bshagnasty/banner.html

--
-bts
-This space intentionally left blank.
Jul 20 '05 #3
(snip)
I, and others, answered this question in your "Centering image" thread.
The response from me was snipped right from a working web page with
three logo images, one flush left, one larger in the center, and a
duplicate of the left one at flush right.
You (and others) answered a different question. The difference is that
the page is 2000px wide (because of a table, which unfortunately there
is no way around it) so using your technique I was able to do as you
illustrated.
I'd give you a URL, but the page/site is in negotiation with a
prospective client.

The body is 2000px? What do you mean? 2000px wide

(snip) Again, see the answers in the other thread.


What I am looking for is different because of the size of the page. I
see how you misunderstood what I was asking, I wasn't very clear.

Here is the code:

<html>
<style>
#identityBox {
text-align: center;

***width: 2050px;***
}

#adOne {float: left;}

#adTwo {float: right;}

</style>
<body>
<div id="identityBox">
<img src="Game_files/ads/Banner.gif" id="adOne" />
<img src="Game_files/ads/Banner.gif" id="adTwo" />
<img src="Game_files/images/identity.jpg" id="identity" />
</div>
</body>
</html>

The question is: Is there a way to always keep the identity image
visible regardless of how the user resizes the window. With the page
being so wide, this code won't do it.

Any suggestions?

Jul 20 '05 #4
Quoth the raven named Heath:
(snip)
I, and others, answered this question in your "Centering image"
thread. The response from me was snipped right from a working web
page with three logo images, one flush left, one larger in the
center, and a duplicate of the left one at flush right.
You (and others) answered a different question. The difference is
that the page is 2000px wide (because of a table, which
unfortunately there is no way around it) so using your technique I
was able to do as you illustrated.


What kind of data is this? Could it be rearranged in vertical display
instead?
I'd give you a URL, but the page/site is in negotiation with a
prospective client.

The body is 2000px? What do you mean?


2000px wide

(snip)
Again, see the answers in the other thread.

What I am looking for is different because of the size of the page.
I see how you misunderstood what I was asking, I wasn't very clear.


Reading over the other thread, I didn't catch anyplace where you said
you wanted the left and right images to remain in the browser window
instead of /off-screen/. You said:

Oops:
-----------------------------------------
||------| |-------|
||image | My Logo.jpg | image |
||------| |-------|
-----------------------------------------

...which my example illustrates.

<snip code> The question is: Is there a way to always keep the identity image
visible regardless of how the user resizes the window. With the
page being so wide, this code won't do it.

Any suggestions?


If you want the side images to float within the visible portion of a
super-wide page, you'll need to resort to some sort of JavaScript
trickery.

--
-bts
-This space intentionally left blank.
Jul 20 '05 #5
(snip)
What kind of data is this? Could it be rearranged in vertical display
instead?
It's a super fat table
(snip)


..which my example illustrates.


perfectly. Merci Beaucoup

(sorry I have different pages the obese page and a thinner pop-up)
<snip code>
If you want the side images to float within the visible portion of a
super-wide page, you'll need to resort to some sort of JavaScript trickery.


Thank you for helping know how to say that. I was hoping that there
would be a css way.

When sizing a box using % does it always reference its' container. Or is
there a way to reference the visible window?

Jul 20 '05 #6
In article Heath wrote:
(snip)
I, and others, answered this question in your "Centering image" thread.
The response from me was snipped right from a working web page with
three logo images, one flush left, one larger in the center, and a
duplicate of the left one at flush right.
You (and others) answered a different question. The difference is that
the page is 2000px wide (because of a table, which unfortunately there
is no way around it) so using your technique I was able to do as you
illustrated.


URL? If I change paragraph in B.T.S. example to be 2000px wide, it works
exactly that way.

So it seems some stupid table layout, so there certainly is way around
it.
What I am looking for is different because of the size of the page. I
see how you misunderstood what I was asking, I wasn't very clear.

Here is the code:

<html>
<style>
#identityBox {
text-align: center;

***width: 2050px;***
}
Why you need exactly this box be that wide? It seems to be exact opposite
of what you ask.
#adOne {float: left;}

#adTwo {float: right;}

</style>
<body>
<div id="identityBox">
<img src="Game_files/ads/Banner.gif" id="adOne" />
<img src="Game_files/ads/Banner.gif" id="adTwo" />
<img src="Game_files/images/identity.jpg" id="identity" />
</div>
</body>
</html>

The question is: Is there a way to always keep the identity image
visible regardless of how the user resizes the window. With the page
being so wide, this code won't do it.


If the page has something that wide, that is not problem. If the
container is that wide, there is no way.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

Jul 20 '05 #7
Quoth the raven named Lauri Raittila:

I think we are all confused, including Heath. <g>
In article Heath wrote:
(snip)

<moresnip> URL? If I change paragraph in B.T.S. example to be 2000px wide, it works
exactly that way.


See update:
http://home.rochester.rr.com/bshagnasty/banner.html

Heath: pick your poison.

I put a width on a second set of logos, and on one paragraph which
would be equal to your obese table.

Now, if you tell us you want that right logo /always/ at the same
position near the browser's right side regardless of horizontal
scrolling, then you will need the js trickery. And js may not be
available in your visitor's browser.

I don't see any particular need for it, though. Let the visitor scroll
the table and don't worry about the rest. Assuming this is valid
tabular data that can't be compressed, there is nothing wrong with
having the rest of the pieces and parts statically positioned.

--
-bts
-This space intentionally left blank.
Jul 20 '05 #8
>>> (snip)
See update:
http://home.rochester.rr.com/bshagnasty/banner.html

Heath: pick your poison.

I put a width on a second set of logos, and on one paragraph which would
be equal to your obese table.

Now, if you tell us you want that right logo /always/ at the same
position near the browser's right side regardless of horizontal
scrolling, then you will need the js trickery. And js may not be
available in your visitor's browser.
This is what I want. Unfortunately my page is so overridden with js that
even to get to my obese table you have to be able to use js. I make it
clear from my home page that my site is completely dependent on js so
this is an option (though I would rather not use it except for where
completely necessary).

I don't see any particular need for it, though. Let the visitor scroll
the table and don't worry about the rest. Assuming this is valid tabular
data that can't be compressed, there is nothing wrong with having the
rest of the pieces and parts statically positioned.


This is a good point. I am glad there are other people to bounce my
ideas off of. I think that I will do it like this. I guess where it is
already a fixed width it won't kill anyone (except the advertisers) if
the pieces are fixed. Otherwise its more js.

Thanks for your thoughts and I am going to summarize by saying that if I
want an image to /always/ be at the same position near the browser's
right side regardless of horizontal scrolling it isn't possible with
css, instead I should use java script.

Thanks for all your help.

Heath

Jul 20 '05 #9

"Heath" <hj******@email.moc> wrote in message
news:3f**********************@news.skynet.be...
Thanks for your thoughts and I am going to summarize by saying that if I want an image to /always/ be at the same position near the browser's right side regardless of horizontal scrolling it isn't possible with css, instead I should use java script.


If IE is not going to be used, you could use fixed positioning.
But likely it will be.
Jul 20 '05 #10

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

Similar topics

2
by: Steve | last post by:
Hi, I've come across what appears to be a bug in the rendering engine of internet explorer when a document is opened by showModalDialog. Basically any elements that should render to the right...
8
by: Warren Post | last post by:
Here's a problem I've never seen before. On <http://snow.prohosting.com/srcopan/anti/>, should the viewport width be less than the width of the page's header, then the right margin becomes stuck...
8
by: Drew | last post by:
Hi All, I have a page which consists of text at left and a column of references at right. I'd like for it to behave as follows: when the user's browser is wide enough to accomodate both the...
10
by: Mercury Mercurius | last post by:
Hello, I have *almost* successfully implemented the CSS rollovers described by Dan Cederholm at his SimpleBits web site...
2
by: steeve_dun | last post by:
Hi! Does anybody has an example of a Menu positioned on the right of the screen (not the left) and that slides to the left? Or even without sliding i.e. the title of the menu on the right and...
1
by: Bob (remove 'excise-' to reply) | last post by:
I've got a form with three controls: a left-docked richtextbox, a right-docked form, and a right-docked listview. When I resize the form, the listview increases and decreases, the splitter...
4
by: JC Voon | last post by:
Hi: My application use tabbed interface, i need a close button at the right edge of the tool bar, is it possible ? Thanks JCVoon
1
by: Art | last post by:
Hi, I'm using a DataGrid. I've got a few columns right aligned. The heading text is running into the line between the columns. I can't figure out a way to get some space betweeen the header...
19
by: JB | last post by:
Hi All, Why doesn't this work in Firefox but is perfect in IE6? In IE6, the text is on the same line but in Firefox, the left aligned text is on the line above the right aligned text. ...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
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
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: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
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:
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...

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.