Subject: [css-d] Can this be done with DIV instead of TABLE?

From: andrewyao at yahoo.com (Andrew Yao)
Date: Mon, 28 Apr 2003 15:48:34 -0700 (PDT)

Hi Folks,

There is a subtle effect with both solutions presented
so far: when you resie the browser width so it is
smaller than the combined width of all the images, the
banner will wrap into multiple lines.. I don't know if
this is the desired effect.

I propose to use multiple spans in a div and
white-space:nowrap 

<html>
	<head>
		<title>Untitled Document</title>
		<style type="text/css">
			#topbanner {
				white-space:nowrap;
				background-image:url(images/top/background.png);
				background-repeat:repeat-x;
			}
			#topbanner span {
				width:6%;
			}
		</style>
	</head>
	<body>
		<div id="topbanner">
			<span><img src="images/top/left.png" width="16"
height="42" alt="riotgrrrl.com"/></span>
			<span><img src="images/top/r.png" width="36"
height="42" alt="riotgrrrl.com"/></span>
			<span><img src="images/top/i.png" width="36"
height="42" alt="riotgrrrl.com"/></span>
			<span><img src="images/top/o.png" width="36"
height="42" alt="riotgrrrl.com"/></span>
			<span><img src="images/top/t.png" width="36"
height="42" alt="riotgrrrl.com"/></span>
			<span><img src="images/top/g.png" width="36"
height="42" alt="riotgrrrl.com"/></span>
			<span><img src="images/top/r2.png" width="36"
height="42" alt="riotgrrrl.com"/></span>
			<span><img src="images/top/r3.png" width="36"
height="42" alt="riotgrrrl.com"/></span>
			<span><img src="images/top/r4.png" width="36"
height="42" alt="riotgrrrl.com"/></span>
			<span><img src="images/top/l.png" width="36"
height="42" alt="riotgrrrl.com"/></span>
			<span><img src="images/top/dot.png" width="36"
height="42" alt="riotgrrrl.com"/></span>
			<span><img src="images/top/c.png" width="36"
height="42" alt="riotgrrrl.com"/></span>
			<span><img src="images/top/o2.png" width="36"
height="42" alt="riotgrrrl.com"/></span>
			<span><img src="images/top/m.png" width="36"
height="42" alt="riotgrrrl.com"/></span>
			<span><img src="images/top/right.png" width="16"
height="42" alt="riotgrrrl.com"/></span>
		</div>
	</body>
</html>

cheers

Andrew

__________________________________
Do you Yahoo!?
The New Yahoo! Search - Faster. Easier. Bingo.
http://search.yahoo.com