On Fri, 02 Jul 2004 13:48:04 -0700, Aaron <ag********@comcast.not>
wrote:
I'm trying to do my site without table unless absolutely necessary, and
I've run into a problem I'm not sure how to get around. I have a div
with float:right that contains some images (the outer edges) and a div
sandwiched between two of them. The sandwiched div has a background
image which is to tile based upon it's width. The thing is, divs are
normally set to display:block, which causes it to be placed on it's own
line. If I set it's display to inline, it collapses. Does anyone know a
trick to get around this, or should I just use a table instead?
#middle {float: right;}
#topborder {background-image: url(images/content3.gif); width: 300px;
height: 53px;}
<div id="middle"><img src="images/sign_bottom.gif" alt="Making Homes
Beautiful Since 1992" border="0" /><img src="images/content1.gif" alt=""
border="0" /><div id="topborder"></div><img src="images/content2.gif"
alt="" border="0" /></div>
As much as I hate to suggest it, given that your design is completely
based around pixel-oriented images, you might enjoy better luck
abandoning the float approach and instead using CSS positioning with
pixel values to get the images in the right places to fit together.
You can still retain some semblance of dynamic scaling by having, at
the root of the document, a couple of elements with widths specified
in percentages, and then use position:absolute to position the child
images relative to the dynamic boxes. (position:absolute is supposed
to be relative to the containing element, but I seem to remember some
browser bugs in this regard)
Unrelated to your question, I suggest you also try to throw in some
more semantic markup there so that it'll work more nicely for text or
speech browsers. Specifically, only one of your "Making homes
beautiful" images needs alternative text; the rest can just have
alt="". Same for "Coastal Roofing Company". Put the main heading
images inside a <h1> element so that the text is rendered as a
heading. If you can persuade browsers to cooperate, you should also
make your navigation bar some kind of list, such as UL. You can then
use CSS to stop it being a list for graphical browsers:
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
margin: 0;
padding: 0;
}
(although you'll probably want to use some classes or ids there rather
than setting *all* elements)
The best way to see if you've got it right is to load it into Opera
and turn on "User mode" (so it'll ignore your CSS) and turn off image
loading. Any images with alt="" will vanish completely, and others
will be rendered as the surrounding markup dictates, albeit with some
boxes around the images. You will have to ensure that all of your CSS
is in a stylesheet rather than in STYLE attributes, though. You could
also try lynx or links, which are popular text-only browsers.
(Making it nice for non-graphical browsers benefits you because
Google's indexing robot is a non-graphical browser!)
Good luck,
-Claire
