|
|
Posted by Jonathan N. Little on 04/15/07 17:26
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...
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Navigation:
[Reply to this message]
|