On Feb 1, 2008, at 6:11 AM, Ken Davies wrote:
> Original site http://www.equestrian-jewelry.com/index.htm -
> Right now
> I am just worried about the top banner.
Off the cuff, here's the approach I'd take to the banner. I've done
no testing on it, apart from Safari and Firefox, so it's not
presented as a final solution, but rather as a place for you to start
from:
HTML
<div id="banner">
<img src="Animation11.gif" alt="" width="80" height="56" />
<img src="BCG100.gif" alt="Logo" id="logo" width="94" height="53" />
<p>Horse jewelry for equestrians and horse lovers.</p>
<p>Breeds of horses, barrel racing, rodeo, dressage, jumping and
polo</p>
</div>
CSS
#banner { padding: 3px; text-align: center; width: 858px; height:
53px; border: 3px double black;}
#banner img { float: right; }
#banner img#logo { float: left; }
#banner p { margin: 0; padding: 0; font-weight: bold; font-size: 110%;}
Commentary:
I don't like CSS class names that are tied to the presentation,
especially during development. During development, many aspects of
the design are likely to change, and then I'll have to go back
through all the pages and change the class name. I think it's a much
better practice to create class and ID names related to the meaning/
function of the object being styled. Hence "logo" instead of
"floatleft".
I also don't like using any more semantically empty tags (div, span)
than I absolutely have to, hence only one. It junks up the document
to use multiples, and while I'm not against doing so if I have to for
a desired effect, I never do it needlessly.
With CSS on the scene, tags like "b" and "i" become redundant. Forget
they even exist is my advice. That's what CSS is for.
The "p" for the title text is probably non-optimal. I'm not sure
where you;re going with this, but replacing them with any sort of
header tag would work as well, though you'll have to change the font-
size to do so.
At a guess, I'd say you're overthinking it, and that's why you're
stressed. The process is simple:
1. Content first. Write the text and select the images.
2. Break the document into logical sections, if possible.
3. Decide what the function of each element is. Is it a heading? then
mark it with an "h" tag of the appropriate level. If it's an image/
description pair you could put it in a table (image in one column,
description in the other) or a definition list (dt for image, dd for
description).
Only now do we get to CSS
Notice to this point we haven't given a single thought to appearance.
They're off-topic for the list, so I avoided detail, and won't
discuss them further on list. But here we start with CSS, so I'll
walk you through what I did to get the above code
I wanted two images, one at each end. One was the logo, so the logo
ID would be enough to call it out. Since there isn't another img in
the banner, a general img style could float it to the other side. You
can reverse the two images n the HTML file, if you want. The greater
specificity of the logo styling will always pre-empt the general
float right to send it left.
Next, the original had two lines of text, centered, so I centered all
the text in the banner. I killed the margins and padding because the
browser defaults vary, and they all pretty much suck (browsers are
lousy at typography). You can tinker farther with this by playing
with line-height as well as padding and margin.
That gave me the images and the text, but the border wasn't there.
The old site looked like a double border, so that's what I loaded
here. Then I adjusted the height of the banner div (when the images
floated, they were removed from the flow of the document, so the
banner container shrank to the height of the text. You *could* play
with the text size until the box was the right size, but that's open
to being clobbered by someone using a strange text size (Yes, that's
you, Felix ;{>} )
Now if you wanted to make it bulletproof (for modern browsers) you
might want to recast the div and image sizes in ems, so they would
grow along with the text. That would probably mean recreating the
images at a larger size, then forcing the browser to shrink them down
to "normal," but it's possible. Then as text size grows, the design
elements grow with it. (Like implementing Opera's "zoom" feature in
CSS for the other browsers.) But that's just personal quirks.
You might want to take a look at "Eric Meyer on CSS", where he walks
through the process of taking a site from a table into pure CSS. (And
I'd recommend it even if he wasn't the founder of our feast, so to
speak.)
Or, if you're wanting to work a bit harder, pick up "Transcending
CSS" (Andy Clarke's absolutely wondrous volume which epitomizes the
ideal that a book on design should be a thing of beauty). The latter
assumes a basic knowledge of CSS, though, so if you don't get it
first, you may find parts of it hard slogging.
Have Fun,
Arlen
------------------------------
In God we trust, all others must supply data
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
