|
Mailing Lists
|
Home /
Groups /
Cascading Style Sheets (CSS)
Pro-bono advice anybody?
How would those of you who grok CSS composite this together?Ian Skinner 05/09/08 12:45 P > Are there any better ideas, that maybePeter Boughton 05/09/08 02:08 P Peter Boughton wrote:Ian Skinner 05/09/08 02:36 P > the logo is rather ugly without its background component.Peter Boughton 05/09/08 02:47 P How would those of you who grok CSS composite this together? Goal is to create a Header|Masthead|Banner type structure across the top of the site's pages. I am trying to put together the following elements: A title: 'Sierra Outdoor Recreation' A logo: http://www.sierraoutdoorrecreation.com/images/sorlogo.gif -- generally visually replaces the title A logo background: http://www.sierraoutdoorrecreation.com/images/masthead/logo_spring.jpg | logo_summer.jpg | ect. A banner/background filler: http://www.sierraoutdoorrecreation.com/images/masthead/banner_spring.jpg | banner_summer.jpg | ect. A flash based advertisement for the printed SOR book. My first idea is something along the following. I would normally have a linked CSS file, I am using in-line code here for brevity. <div id="masthead" style="background: url(banner_spring.jpg)"> <object id="flashAd" style="float: right;"....></object> <div id="logo" style="background: url(logo_spring.jpg); height: xx; width: yy;"> <h1 id="title" style="background: url(sorlogo.gif); text-indent: -1000px; overflow: hidden;>Sierra Outdoor Recreation.com</h1> </div> </div> Is this a good way to do this? Are there any better ideas, that maybe reduce some of the layers? Something that provides more cross-browser, alternate viewers, etc.compatibility? > Are there any better ideas, that maybe > reduce some of the layers? Definitely. Two key things: 1) Images have alt attributes, so the text-indent stuff is unnecessary. 2) Transparent images can have independent background images. Here's some nice compact HTML: <div class="banner"> <h1><img src="/images/sorlogo.gif" alt="Sierra Outdoor Recreation.com"/></h1> <object class="flashAd" ... ></object> </div> And alongside the relevant styles... <!DOCTYPE html> <head> <title>Sierra Outdoor Recreation</title> <style type="text/css"> html,body {margin: 0; width: 100%;} .banner { width: 100%; height: 98px; } .banner h1 { background:url(/images/masthead/banner_spring.jpg) no-repeat top right; margin: 0; width: 890px; } .banner h1 img { background:url(/images/masthead/logo_spring.jpg) no-repeat top right; } .banner .flashAd { float: right; clear: right; } </style> </head> <body> <div class="banner"> <h1><img src="/images/sorlogo.gif" alt="Sierra Outdoor Recreation.com"/></h1> <object class="flashAd" ... ></object> </div> </body> </html> Peter Boughton wrote: > Definitely. Two key things: > > 1) Images have alt attributes, so the text-indent stuff is unnecessary. > > 2) Transparent images can have independent background images. Thanks, but that is basically the current implementation I am trying improve on. The part I don't like is that when CSS is not in effect the logo is rather ugly without its background component. My goal was to replace it with a simple text title rather then leaving the incomplete logo in this case. My posted solution does this fairly well, I was just asking if there were any cool tricks or concepts I was overlooking. At the moment I am pondering the issue of this offset solution not showing anything if CSS is on, but images is disabled. That is probably not an important use case to spend a lot of effort on, but if anybody has an idea I would love to hear it. > the logo is rather ugly without its background component. If the logo relies on the background to be complete, then it is a single image and thus should be a single file, not two. If the background will change throughout the year, you simply use layers in the original graphic file to handle this.
|
June 19, 2013
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
