left and right align to images in a div

[Jon Slaughter]

..Header {
position:fixed;
height:110px;
top:0px;
right:0px;
width:100%;
background-image:url(images/Nav2.png);
background-repeat:repeat-x;
z-index:10;

}

<div class="Header">
<img src="images/Nav1.png" style="left:0px; top:0px;"/>
<img src="images/Nav3.png" style="right:0px; top:0px;"/>
</div>

I have a div that I want to stick an image onto the left of it and one on
the right. Unfortunately the right image is not aligning itself to the
right of the div. Whats wrong with my logic? Should right:0px tell the
second image tag to position itself relative to the right of the div?

Or shouldn't there be any way to right align the cordinates? (so default is
to draw from right to left instead of left to right?

thanks,
Jon

 

[Ben C]

.Header {
position:fixed;
height:110px;
top:0px;
right:0px;
width:100%;
background-image:url(images/Nav2.png);
background-repeat:repeat-x;
z-index:10;

}

<div class="Header">
<img src="images/Nav1.png" style="left:0px; top:0px;"/>
<img src="images/Nav3.png" style="right:0px; top:0px;"/>
</div>

I have a div that I want to stick an image onto the left of it and one on
the right. Unfortunately the right image is not aligning itself to the
right of the div. Whats wrong with my logic? Should right:0px tell the
second image tag to position itself relative to the right of the div?

In what you've posted, there's nothing to make the img elements
absolutely positioned. They need position: absolute. For position:
static, the default, "left", "right" and "top" do nothing.

 

[Jon Slaughter]

In what you've posted, there's nothing to make the img elements
absolutely positioned. They need position: absolute. For position:
static, the default, "left", "right" and "top" do nothing.

ok. I added it and it works. Guess I need to read up on positioning.

Thanks,
Jon

 

[Beauregard T. Shagnasty]

I have a div that I want to stick an image onto the left of it and one on
the right. ...

Perhaps this will give you some ideas. Use <span> instead. See the
".banner..." styles embedded in the page.

http://k75s.home.att.net/banner.html

 

[Jon Slaughter]

http://www.jonslaughter.com/

If you compare MyPage.html and Test.html I get the same results except when
the view window is made very small. The tables method, while the code is
ugly, looks very elegant when the view window is scaled down. It pushes the
left image off the side instead of overrunning it.

I like the simplicity of the div code in Test.html but I don't like the way
it looks compared to MyPage.html when the browser window is made very small.
Its not that big a deal but is there an easy fix to make them work the same?

(MyPage.thml works just how I want it in Firefox 2.0 and IE7 except I don't
like the menu because when you select one and go to select the other it
moves the menu item and you have to readjust the mouse position. (its
expected but I like the idea of the expanding menu on mouse over. Also
firefox has an issue with only doing the mouse over on one of the menu items
instead of all... probably a bug in the code))

I'm just trying to tidy up the code and not hack things so much like I did
with the tables.

Thanks,
Jon

 

[dorayme]

http://www.jonslaughter.com/

If you compare MyPage.html and Test.html I get the same results

On Safari, one page has white text, the other none, one has a
green left bit, the other does not...

 

[Jon Slaughter]

On Safari, one page has white text, the other none, one has a
green left bit, the other does not...

Yes. I know. I'm not talking about that. I didn't add the menu or content
page to the test.html because that wasnot of convernt. What I mean the
layout and imagery. I could easily copy and page the rest of the code to
make them almost exactly the same(except for the issues I'm having) but that
would be irrelevant to the problem. (or easier I could just remove the text
and menu stuff from MyPage.html)


I guess I should have done that just so no one would get confused though...
didn't think about it though...

Thanks,
Jon

 

[dorayme]

I didn't add the menu or content
page to the test.html because that wasnot of convernt. What I mean the
layout and imagery. I could easily copy and page the rest of the code to
make them almost exactly the same(except for the issues I'm having) but that
would be irrelevant to the problem. (or easier I could just remove the text
and menu stuff from MyPage.html)


I guess I should have done that just so no one would get confused though...
didn't think about it though...

I said what I said because I could not see what you were really
talking about, hoping for you to give some more clues about what
is bugging you?

 

[John Hosking]

I could easily copy and page the rest of the code to
make them almost exactly the same(except for the issues I'm having) but that
would be irrelevant to the problem. (or easier I could just remove the text
and menu stuff from MyPage.html)


I guess I should have done that just so no one would get confused though...

Oh, don't feel bad; that alone wouldn't have been enough.

didn't think about it though...

Well, you're thinking about it now.

We'll wait.

 

[Jon Slaughter]

I said what I said because I could not see what you were really
talking about, hoping for you to give some more clues about what
is bugging you?

Open both pages. Now scale the browser windows to as small as possible in
the width. You see anything different? (the left and right images overlap on
test and on mypage the left gets pushed out the viewport)

 

[Jon Slaughter]

Oh, don't feel bad; that alone wouldn't have been enough.


Well, you're thinking about it now.

We'll wait.

Jesus christ? does scaling down the browser window not make sense? Or have
you even tried? Do I have to say resize instead? You know what resize
means? If so then all the **** you have to do is resize the browser window.
As you do this, if you do it in the horizontal direction, then the left and
right images will both say on there respective sides relative to the
viewport. But if you continue resizing down to, say, about 200px, then in
mypage the Jon Slaughter image will push out the musical symbols image...
that is, the musical symbols image will move to the left outside the browser
viewport. In test.html the Jon Slaughter image will just cover up the
musical notes image.

Shit man.. you blame me for it being confused but could it not be that you
just haven't tried to think about it? You sound like some blonde saying "You
don't know how to explain it to normal people" and what gets me is that she
thinks she's normal.

 

[dorayme]

Open both pages. Now scale the browser windows to as small as possible in
the width. You see anything different? (the left and right images overlap on
test and on mypage the left gets pushed out the viewport)

I am doing this and am trying to abstract from the other
differences and see nothing much. I am now going into my backyard
where I keep a piece of hardwood timber for occasions like this.
I will bash my head with it several times and come back and try
again.

 

[dorayme]

Jesus christ? does scaling down the browser window not make sense? Or have
you even tried? Do I have to say resize instead? You know what resize
means? If so then all the **** you have to do is resize the browser window.
As you do this, if you do it in the horizontal direction, then the left and
right images will both say on there respective sides relative to the
viewport. But if you continue resizing down to, say, about 200px, then in
mypage the Jon Slaughter image will push out the musical symbols image...
that is, the musical symbols image will move to the left outside the browser
viewport. In test.html the Jon Slaughter image will just cover up the
musical notes image.

Shit man.. you blame me for it being confused but could it not be that you
just haven't tried to think about it? You sound like some blonde saying "You
don't know how to explain it to normal people" and what gets me is that she
thinks she's normal.

Well, I fucking well looked again, I am a bit fucking groggy
after my fucking self beating with the fucking block of wood and
in my fucking browser, fucking Safari, the two fucking browser
windows have a minimum fucking width that they fucking will not
fucking go below in the fucking horizontal fucking direction and
so I cannot see the effect you are fucking talking about.

You blonde?

 

[John Hosking]

Jesus christ?

No, just call me John...

does scaling down the browser window not make sense? Or have
you even tried? Do I have to say resize instead? You know what resize
means? If so then all the **** you have to do is resize the browser window.
As you do this, if you do it in the horizontal direction, then the left and
right images will both say on there respective sides relative to the
viewport. But if you continue resizing down to, say, about 200px, then in
mypage the Jon Slaughter image will push out the musical symbols image...
that is, the musical symbols image will move to the left outside the browser
viewport. In test.html the Jon Slaughter image will just cover up the
musical notes image.

Shit man.. you blame me for it being confused but could it not be that you
just haven't tried to think about it?

Oh, anything's possible. But if it takes five posts for us to figure out
what your problem is (while in the meantime other concerns you mention
just sort of evaporate), then maybe you need to work on your skills of
concentration, explanation, and proofreading.

But see what you think of this attempt:


Hello everybody, I'm Jon Slaughter.

I have two versions of some prototype pages at
http://www.jonslaughter.com/Test.html
and http://www.jonslaughter.com/MyPage.html.

I like the coding of the former (Test.html) but within it, I want to
duplicate some behavior from the latter (MyPage.html). Specifically, I
want the "Jon Slaughter" logo to push the music image off the page to
the left, when the viewport is sized ridiculously small.

I've uploaded a simplified test case to
http://mypage.bluewin.ch/jlh/Jon-Slaughter.htm which also exhibits this
pushing behavior.

How can I integrate the behavior into
http://www.jonslaughter.com/Test.html? Can I do it without tables?

I hope my explanation is clear and accurate. Thanks for any help.

- Jon

 

[Jon Slaughter]

Forget it guys. I'll figure it out on my own.

 

[John Hosking]

Forget it guys. I'll figure it out on my own.

I guess my attempt to restate your question was way off then, huh?

Sorry dorayme and I couldn't help you. We might be the only ones who
haven't killfiled you already.

HAND

 

[Neredbojias]

I am doing this and am trying to abstract from the other
differences and see nothing much. I am now going into my backyard
where I keep a piece of hardwood timber for occasions like this.
I will bash my head with it several times and come back and try
again.

Um, if your head is harder than the timber, that won't work.

 

[Jonathan N. Little]

Open both pages. Now scale the browser windows to as small as possible in
the width. You see anything different? (the left and right images overlap on
test and on mypage the left gets pushed out the viewport)

Well, if I understand you here, what you wish is as the window is
narrowed drastically your do not want the logo images to stack
vertically which can happen with floats, be behave more like the table...

Well here is one solution, in HTML which IMHO your should be using
instead of XHTML which your markup shows that you neither need nor have
the level of experience to use without giving yourself unnecessary
headaches.

The simplest would be:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>Logo Solution NO IE</title>

<style type="text/css">
BODY { margin: 0; padding: 0; color: #fff; background-color: #263a53; }
#banner { height: 110px; overflow: hidden; color: #fff; background:
#263a53 url(http://www.jonslaughter.com/images/Nav2.png) repeat-x; }
#banner IMG { float: left; }
#banner IMG + IMG { display: block; position: absolute; right: 0; top: 0; }
</style>

</head>
<body>

<div id="banner">
<img src="http://www.jonslaughter.com/images/Nav1.png" alt="Music"
width="150" height="110">
<img src="http://www.jonslaughter.com/images/Nav3.png" alt="Jon
Slaughter" width="150" height="110">
</div>

<h1>Your page</h1>
<p>Blah, blah blah...</p>

</body>
</html>

However this would fail miserably in MSIE do to lack of sibling selector
support, you seem to be ignoring MSIE 6 & 5 with your alpha-transparency
PNGs but there is an easy solution for the selectors. Two additional IDs.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>Logo Solution With IE Support</title>

<style type="text/css">
BODY { margin: 0; padding: 0; color: #fff; background-color: #263a53; }
#banner { height: 110px; overflow: hidden; color: #fff; background:
#263a53 url(http://www.jonslaughter.com/images/Nav2.png) repeat-x; }
#banner #music { float: left; }
#banner #js { display: block; position: absolute; right: 0; top: 0; }
</style>

<body>

<div id="banner">
<img id="music" src="http://www.jonslaughter.com/images/Nav1.png"
alt="Music" width="150" height="110">
<img id="js" src="http://www.jonslaughter.com/images/Nav3.png" alt="Jon
Slaughter" width="150" height="110">
</div>

<h1>Your page</h1>
<p>Blah, blah blah...</p>

</body>
</html>


It won't push the logo image out of the viewport, but it will overlap
what I guess is the more important image "Jon Slaughter" image over the
"Music" image and not intrude on the page below...

 

[Jon Slaughter]

Well, if I understand you here, what you wish is as the window is narrowed
drastically your do not want the logo images to stack vertically which can
happen with floats, be behave more like the table...

Well here is one solution, in HTML which IMHO your should be using instead
of XHTML which your markup shows that you neither need nor have the level
of experience to use without giving yourself unnecessary headaches.

The simplest would be:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>Logo Solution NO IE</title>

<style type="text/css">
BODY { margin: 0; padding: 0; color: #fff; background-color: #263a53; }
#banner { height: 110px; overflow: hidden; color: #fff; background:
#263a53 url(http://www.jonslaughter.com/images/Nav2.png) repeat-x; }
#banner IMG { float: left; }
#banner IMG + IMG { display: block; position: absolute; right: 0; top:
0; }
</style>

</head>
<body>

<div id="banner">
<img src="http://www.jonslaughter.com/images/Nav1.png" alt="Music"
width="150" height="110">
<img src="http://www.jonslaughter.com/images/Nav3.png" alt="Jon Slaughter"
width="150" height="110">
</div>

<h1>Your page</h1>
<p>Blah, blah blah...</p>

</body>
</html>

However this would fail miserably in MSIE do to lack of sibling selector
support, you seem to be ignoring MSIE 6 & 5 with your alpha-transparency
PNGs but there is an easy solution for the selectors. Two additional IDs.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>Logo Solution With IE Support</title>

<style type="text/css">
BODY { margin: 0; padding: 0; color: #fff; background-color: #263a53; }
#banner { height: 110px; overflow: hidden; color: #fff; background:
#263a53 url(http://www.jonslaughter.com/images/Nav2.png) repeat-x; }
#banner #music { float: left; }
#banner #js { display: block; position: absolute; right: 0; top: 0; }
</style>

<body>

<div id="banner">
<img id="music" src="http://www.jonslaughter.com/images/Nav1.png"
alt="Music" width="150" height="110">
<img id="js" src="http://www.jonslaughter.com/images/Nav3.png" alt="Jon
Slaughter" width="150" height="110">
</div>

<h1>Your page</h1>
<p>Blah, blah blah...</p>

</body>
</html>


It won't push the logo image out of the viewport, but it will overlap what
I guess is the more important image "Jon Slaughter" image over the "Music"
image and not intrude on the page below...

Which it does anyways. I'll just stick with the table since it works better.

 

[Jonathan N. Little]

Which it does anyways.
??

I'll just stick with the table since it works better.

Somehow I figured that your be your answer.