left and right align to images in a div

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

}

Re: left and right align to images in a div

On 2007-04-13, Jon Slaughter wrote:
> .Header {
> position:fixed;
> height:110px;
> top:0px;
> right:0px;
> width:100%;
> background-image:url(images/Nav2.png);
> background-repeat:repeat-x;
> z-index:10;
>
> }
>
>

>
>
>

Re: left and right align to images in a div

"Ben C" wrote in message
news:slrnf1vqtc.7bg.spamspam@bowser.marioworld...
> On 2007-04-13, Jon Slaughter wrote:
>> .Header {
>> position:fixed;
>> height:110px;
>> top:0px;
>> right:0px;
>> width:100%;
>> background-image:url(images/Nav2.png);
>> background-repeat:repeat-x;
>> z-index:10;
>>
>> }
>>
>>

>>
>>
>>

Re: left and right align to images in a div

Jon Slaughter wrote:

> 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 instead. See the
".banner..." styles embedded in the page.

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

--
-bts
-Motorcycles defy gravity; cars just suck

Re: left and right align to images in a div

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

Re: left and right align to images in a div

In article <3JSTh.14701$JZ3.3734@newssvr13.news.prodigy.net>,
"Jon Slaughter" wrote:

> 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...

--
dorayme

Re: left and right align to images in a div

"dorayme" wrote in message
news:doraymeRidThis-14ED23.07534814042007@news-vip.optusnet. com.au...
> In article <3JSTh.14701$JZ3.3734@newssvr13.news.prodigy.net>,
> "Jon Slaughter" wrote:
>
>> 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...
>

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

Re: left and right align to images in a div

In article ,
"Jon Slaughter" wrote:

> 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?

--
dorayme

Re: left and right align to images in a div

Jon Slaughter wrote:

> 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.

--
John

Re: left and right align to images in a div

"dorayme" wrote in message
news:doraymeRidThis-803020.09063714042007@news-vip.optusnet. com.au...
> In article ,
> "Jon Slaughter" wrote:
>
>> 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?
>

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)

Re: left and right align to images in a div

"John Hosking" wrote in message
news:4620111a$1_6@news.bluewin.ch...
> Jon Slaughter wrote:
>
>> 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.
>
>

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 fuck 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.

Re: left and right align to images in a div

In article ,
"Jon Slaughter" wrote:

> "dorayme" wrote in message
> news:doraymeRidThis-803020.09063714042007@news-vip.optusnet. com.au...
> > In article ,
> > "Jon Slaughter" wrote:
> >
> >> 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?
> >
>
> 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

Re: left and right align to images in a div

In article ,
"Jon Slaughter" wrote:

> "John Hosking" wrote in message
> news:4620111a$1_6@news.bluewin.ch...
> > Jon Slaughter wrote:
> >
> >> 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.
> >
> >
>
> 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 fuck 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?

--
dorayme

Re: left and right align to images in a div

Jon Slaughter wrote:
>
> 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 fuck 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

--
John Hosking

Re: left and right align to images in a div

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

Re: left and right align to images in a div

Jon Slaughter wrote:
> 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
--
John

Re: left and right align to images in a div

On Sat, 14 Apr 2007 00:21:14 GMT dorayme scribed:

>> 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.

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

--
Neredbojias
He who laughs last sounds like an idiot.

Re: left and right align to images in a div

Jon Slaughter wrote:

> 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:

"http://www.w3.org/TR/html4/strict.dtd">

width="150" height="110">

Your page

Blah, blah blah...

alt="Music" width="150" height="110">

Your page

Blah, blah blah...

Re: left and right align to images in a div

"Jonathan N. Little" wrote in message
news:e19fb$46226018$40cba7c0$18856@NAXS.COM...
> Jon Slaughter wrote:
>
>> 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:
>
> > "http://www.w3.org/TR/html4/strict.dtd">
>
>
>
>
>
>
>
>
>
>
>
>
>

> > width="150" height="110">
> > width="150" height="110">
>

Your page

Blah, blah blah...

> > alt="Music" width="150" height="110">
>
>

Your page

Blah, blah blah...

Re: left and right align to images in a div

Jon Slaughter wrote:
> "Jonathan N. Little" wrote in message
>
>> 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.

Somehow I figured that your be your answer.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: left and right align to images in a div

Jonathan N. Little wrote:

> Somehow I figured that your be your answer.
>


Now translated in to English:

"Somehow I figured that would be your answer."

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: left and right align to images in a div

On Sun, 15 Apr 2007 20:26:34 GMT Jonathan N. Little scribed:

> Jonathan N. Little wrote:
>
>> Somehow I figured that your be your answer.
>>
>
>
> Now translated in to English:
>
> "Somehow I figured that would be your answer."

You must be a Brit.

--
Neredbojias
He who laughs last sounds like an idiot.

Re: left and right align to images in a div

Neredbojias wrote:
> On Sun, 15 Apr 2007 20:26:34 GMT Jonathan N. Little scribed:
>
>> Jonathan N. Little wrote:
>>
>>> Somehow I figured that your be your answer.
>>>
>>
>> Now translated in to English:
>>
>> "Somehow I figured that would be your answer."
>
> You must be a Brit.
>

Hey! What's with all this "You must be a Brit" stuff? I must have missed
something.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: left and right align to images in a div

On Tue, 24 Apr 2007 14:24:36 GMT Jonathan N. Little scribed:

>> You must be a Brit.
>>
>
> Hey! What's with all this "You must be a Brit" stuff? I must have missed
> something.

Everybody knows that the British speak the second-worst English in the
world. (Top honors go to the Aussies, of course.)

--
Neredbojias
He who laughs last sounds like an idiot.

Re: left and right align to images in a div

Neredbojias wrote:
> On Tue, 24 Apr 2007 14:24:36 GMT Jonathan N. Little scribed:
>
>>> You must be a Brit.
>>>
>> Hey! What's with all this "You must be a Brit" stuff? I must have missed
>> something.
>
> Everybody knows that the British speak the second-worst English in the
> world. (Top honors go to the Aussies, of course.)
>

My error was not in speaking but in my deplorable typing!

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: left and right align to images in a div

On Wed, 25 Apr 2007 14:19:06 GMT Jonathan N. Little scribed:

>>> Hey! What's with all this "You must be a Brit" stuff? I must have
>>> missed something.
>>
>> Everybody knows that the British speak the second-worst English in
>> the world. (Top honors go to the Aussies, of course.)
>>
>
> My error was not in speaking but in my deplorable typing!

Then I can just imagine what your alt text is like...

--
Neredbojias
He who laughs last sounds like an idiot.