There's another great thread gonig on about how to examine external CSS and JS files on a site, to get an idea how somebody else approached a given problem. Not wanting to hijack that thread, I'd still like to share a CSS tip that I've known about forever, but never had much use for ... I redesigned my site, and all of a sudden this style of coding is extremely helpful.
In my main html, I have this code:
<a href="../Galleries/Vancouver.html"
class="web812l mainPhoto">
...<img src="../Images/NorthVancouver.jpg" alt="
North Vancouver from Stanley Park" />
</a>
By default my photos are 8x12 inches, but plenty of them get cropped to 8x10, and there's landscape and portrait orientation - which kind of sideways. Anyway, let's look at the CSS involved:
.
web812l {
...background-repeat: no-repeat;
...background-position: center;
...display: block;
...width:850px;
...height:585px;
...background-image:url(/GraphicElements/web812l.png);
...position:relative;
...float: left;
}
.
mainPhoto { margin-left: 100px; }
Now, I could have accomplished the same thing by setting mainPhoto as the ID and not a class, but there are pages ( like
Twin Falls ) set up to display two photos. More to the point, I don't know how many classes you can assign to a particular element, but it's plural ... more than one.
This can help you repeat less in your CSS, but more importantly, it can let you create classes that are more meaningful, so build a web site that's easier to maintain.
