By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,396 Members | 1,869 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,396 IT Pros & Developers. It's quick & easy.

Riding the Right (Edge That Is)

P: n/a
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
Share this Question
Share on Google+
9 Replies


P: n/a
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

P: n/a
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

P: n/a
(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

P: n/a
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

P: n/a
(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

P: n/a
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

P: n/a
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

P: n/a
>>> (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

P: n/a

"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 discussion thread is closed

Replies have been disabled for this discussion.