|
|
Posted by Jon Slaughter on 04/15/07 17:49
"Jonathan N. Little" <lws4art@centralva.net> 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:
>
> <!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.
Navigation:
[Reply to this message]
|