How to overlay a web graphic

[Tea]

Help!

Tannin is away and he's left me here all on my own to figure out how to code a web page (one that he rather foolishly volunteered to do for a local landcare group). The thing is, the design is more-or-less fixed. I have PDF mockups of a half-dozen example pages, and my job is simply to translate those mockups into real, live HTML code.

I've knocked most of it over. Tthe fundamentals at any rate. I won't get the actual text and scanned graphics for illustrations for a few days yet, but that's no problem. Once the basic code is up and running (as most of it is already) it's just a matter of pasting the text and images in and letting the CSS do its magic.

But this bit is giving me trouble.

That's the right-hand half of the top of a page. I need to have the two lines(they symbolise the watercourse that the landcare group exists in order to restore) just wander unobtrousively over the pages here and there, exactly as you see above.

At present, the horizontal menu bar is just created with CSS.

#hornav {
position: absolute;
top: 174px;
left: 0;
height: 30px;
width: 100%;
border: none;
margin: none;
padding: 6px 0 0 0;
font-weight: bold;
color:white;
background-color:#6d6e71;
}

#hornav a:link { color: #dbcda4;}
#hornav a:visited { color: #dbcda4;}
#hornav a:active {color: red;}
#hornav a:hover { text-decoration: underline;}

Most of the rest of the page is done in much the same way.

How do I get the creek to overlay the nav bar?

I can create a PNG or JPG to show the creek easily enough (just a screencap) but I don't know anything about making transparent GIF or PNG files.

 

[Howell]

I don't know much about web devel. but have you thought about making the picture of the watercourse the background of the webpage. Shouldn't the browser then take care of the "blending".

 

[Tea]

Yup. But that has problems. First, the watercourse only goes in particular places (not always the same one or the same place on the screen.) I could overcome that easily enough though. (I think.)

More seriously, I need the watercourse to overlay the other content (or at least some of it). For example, the horizontal nav bar above. The watercoure should cut the bar. I could use a composite image of the bar and watercourse together, but that would be (a) a dreadful waste of bandwidth, and (b) run into all sorts of problems with different screen resolutions.

Thanks for the suggestion. Keep 'em coming!

 

[Handruin]

If you don't want to deal with transparent images, cut the graphic into three parts, and edit the middle part of your watermark so the background is the same color as the dark gray bar. You will end up with three total images, with the intersecting gray piece in the middle which will look like an uninterrupted piece of the gray bar. Then use CSS or a table to line up the top and bottom pieces.

I can't make an example right now, but when I get home I'll try to help more.

If you want to use a transparent gif, I can cook one up when I get home. I don't know how to do transparency with png yet, but I can probably dig up the info and give it a whirl.

 

[Buck]

Could you just create a class for the image, and create an absolute position?

Example:

img.x {position:absolute; left:600px; top:0px; z-index:+1}


Regardless of the resolution, the image would be placed in the same spot from the left and top margins. Then the z-index would give it priority so that it would come to the front of the navbar. The trick would be to make the image background transparent so that the navbar will show through when necessary.

 

[Buck]

Oh, by the way, be careful with that z-index thing. It is a CSS2 spec and needs Netscape 6.0 or IE 4.0 or newer to work properly. I don't know how it will work with Opera.

 

[sechs]

I'm going to state the obvious: this isn't worth the effort.

You could do this using something unhappy like Flash, or hacked-up images, or code that isn't compatible with several browsers. Or you could just change the design to still be compelling and easy to implement.

I'm sure that this organization can deal. Especially for the price.

 

[Buck]

Just as a side note, I never realized (until now) that Opera has a feature where you can see what a website would look like on a PDA or cell phone with full Internet capabilities. It sure makes a mess of some websites. Fortunately my company's redesigned site (not yet available) works reasonably well.

 

[Buck]

Here is a sample of the z-index feature.

• 
  Z-Index

 

[Buck]

Oh, and yes, I did get it to work in Opera 7.10 build 2840.

But sechs still has the right idea.

 

[Tea]

Oh, it's worth the effort, Secs. Three reasons.

(a) I only have to figure the code out once and them use it about 30 times on the various pages of the site I'm doing. (It's to be a fairly extensive site, and although each page is different, once I've got the first instance coded, the others will all be either exactly identical (i.e., the same heading bar) or very similar (same general idea, but elsewhere on the page, lower left, or etc.)

(b) And it does look the part. I'd never have thought of it, but (IMO) it symbolised the nature of the group very well, and someone - a government department no-doubt, the landcare group doesn't have that kind of budget - has paid quite a lot of money to have a professional design house do the layout.

(c) It's an improvement in my skill base. Worth doing simply as self-education. Doubtless I'll reuse the same basic idea on other pages one day.

 

[Tea]

If you don't want to deal with transparent images, cut the graphic into three parts ... Then use CSS or a table to line up the top and bottom pieces.

Oh, I don't mind using transparent GIFs or PNGs, Doug. It will be a very simple image and its load time will be small enough not to worry about. I just don't know how to make one.

I have bubby-sized Photoshop (er, I mean Photoshop Elements), which can certainly do it, but I find Photoshop ridiculously difficult to use, primarily because most of the controls don't appear on the menus, only as stupid look-alike icons that you can't ever find or remember. (Well, I can't. I can remember words (or even numbers if I have to), but icons all look the same to me.)

There is bound to be a much smaller graphics program, probably a freeware thing, that can make a GIF or PNG transparent. I'll see what I can hunt down on Google when I get home from work tonight. But if anyone already knows of one - great!

I started doing the line-up thing for the various bits, but decided that the perils of implementation were simply too great with all those different web browsers that don't always follow the rules properly, different screen resolutions, and so on. Very messy and doubtless a bad coding practice. (Not that that's ever stopped me before!)

Transparent GIF/PNG is clearly the way to go.

 

[Tea]

Buck, you are a marvel!

I had no idea that there was a Z-index property. The very thing I need. I had more-or-less arrived at the same thing by mucking about with the order I put things on the page, but that is cumbersome and you get weird results with different browsers. Sonner or later, it will break the page.

My design goal is to have the page work with IE 5.X, Opera 6.X, Mozila 1.X or higher, and do it without making multiple style sheets. I checked your example with Opera 6.05 and it works just fine. Cool!

(At some stage, I may look at making the pages work in readable-but-ugly mode with Netscape 4.X. But I'm not too fussed about that. Only if I get time and it's not too difficult.)

Now all I need is a convenient way to make transparent GIF/PNG images. That's tonight's job.

 

[Buck]

Thanks for the compliment Tea. Do you know what format your images will be coming in (jpg, gif, png, tif)? You would want to use gif as the final format, since that will keep your transparent background. As far as getting a background transparent, I don’t know of any magic-wand solutions. For me, if it would just be one image, I would manually delete the background to make it transparent. You can do this by copying and pasting the image into a new PSD file which has a transparent background. Then when you use the Rectangular Marquee Tool to delete the areas you want transparent, that is what will happen.

 

[Will Rickards WT]

http://www.phoenity.com/newtedge/png_degradability/

 

[Will Rickards WT]

The Gimp - image editor comparable to photoshop.
http://www2.arnes.si/~sopjsimo/gimp/stable.html
I have it through the grape vine that version 2.0 will be out in about a week.

 

[Mercutio]

Photoshop is a tools for Pros to use. It's made for someone who spend his/her entire day in it to work fast and efficiently. I'm not very good at creating new things with photoshop, and I've never used Illustrator or CorelDraw, but I can edit things very, very quickly in photoshop; I've used it for years.

If you want newbie editing, there's always Kai's Soap or PictureIt. Elements is definately a step up from those.

 

[Tea]

Works like a charm! Storage Forum gets it right again. Details a little later, but the short answer is that I downloaded a thing called "GIF construction set", more or less at random after a bit of a Google hunt, discovered that making a transparent GIF took about 5 mouse-clicks through the help file to figure out and another 5 clicks to implement. Added Buck's Z-index trick, and Hey Presto!

Cool!

(Wait till Tannin gets back and discovers that I worked this out all by myself ... er ... with a little help from my friends, that iz.)

 

[Buck]

I look forward to seeing the site when it is completed.

 

[Tea]

Test page up at http://www.redhill.net.au/woady/index.html

Quite a lot still to do (see http://www.redhill.net.au/woady/notes.html ) but I think it's starting to look like it will fly.

The layout, remember, is pretty much fixed, it's my job just to code the layout that the graphic designer put together. Ditto the text.

With one exception, the entire site is frame-free, table-free, and best of all, Javascript-free. The exception is the home page. I gave out trying to code that in CSS such that it worked in both my main target browsers (Moz 1.6 and IE 5.0) and eventually resorted to tables.

Comments welcome!

 

[blakerwry]

i like tables. They are the perfect tool for alot of jobs.

 

[Tea]

Coming back to tables for that front page was like coming home after a month in motels, Blake. It was just so easy and intuitive. But real web coders say that tables are bad karma - that business of using structural elements for content. In this case, my (poor) excuse is that the front page is essentially content-free anyway. But the real reason is that it was just too hard to do it the "proper" way.

 

[blakerwry]

Tables are there for a reason. I agree that they can be very intuitive and comfortable if you're used to using them.

As long as you write your tables correctly and the result renders well on your target browsers then I see no problem.

 

[Buck]

Nice job Tea, I like it a lot. I noticed you skipped the z-index and are using the float property instead.

 

[Tea]

Yeah. I had some issues, which turned out to have to do with a graphic overlaying a div that had a clickable link in it. It does weird stuff! That's why the single grey horizontl bar is, in fact, three or four seperate divs.

 

[Buck]

Tea, you note on the notes page: "Some issues with Mozilla turning plain text into links at 1024 x 768 resolution. (Yup, a strange one.) Example: the text "Promoting productive catchment management" on the home page."

This didn't happen to me in Mozilla 1.4a, has it already been fixed?

 

[Tea]

I got it on my laptop, Buck. Haven't seen it on this machine. Hang on a tic and I'll give it a bash at 800 x 600 (which is a shocking waste of a perfectly good 19 inch monitor, but there you go).

Hmmm .. ugly, but no spurious links problem. I've had similar issues crop up here and there earlier, and not only in Moz. Those I resolved by taking care with overlapping absolutely positioned divs. This one seems to have dissapeared all by itself, at least for the time being.

No work on the web page today. A fair bit of actual paid work; plus driving down to Tannin's parents' place (best part of an hour each way) to install his father's new broadband link; and more time wasted satisfying Tannin's strange new fetish for looking at ever more expensive cars that he doesn't need and can't afford. Maybe I'll get to do some work on it tomorrow.

(I wish bloody Tannin would help a bit. He's just left the whole thing up to me. Indeed, I've only heard two sorts of comments from him. When I get stuck on something and depressed about it he tells me the job is much too hard for me and that I was stupid to take it on because I'm only an ape. And when I get something right and it looks great, he walks around muttering something obscure and probably offensive to do with Shakespeare and typewriters. Dunno why.)

 

[Buck]

I still like the site. The idea of using all CSS and no tables had never crossed my mind. I'll have to give that a try some day, I really like the idea. But no Javascript? I don't know about that. If a browser supports new, fancy CSS properties, it will work well with Javascript. Plus Javascript doesn't slow the site down if used moderately.

I like the design and layout of the site too. Although the logo is a bit large.

 

[Buck]

Is there any particular method to getting Google or another search engine to crawl your site on a regular basis?

 

[Mercutio]

I believe google crawls pages it considers more important more regularly. Do a search for cnn or slashdot and note that its cache is rarely more than a couple days old. If you're linked on a "more important" page, your ranking likewise goes up.

At least, that's how it's been explained to me.

 

[Buck]

Merc, that is what I was thinking too.

 

[Buck]

With one exception, the entire site is frame-free, table-free, and best of all, Javascript-free. The exception is the home page. I gave out trying to code that in CSS such that it worked in both my main target browsers (Moz 1.6 and IE 5.0) and eventually resorted to tables.

Comments welcome!

Here is the front page without tables:

http://www.hlmcompany.com/Test/

I took the liberty of changing some dimensions too, sorry. Seems to work at 800x600 and up to 1280x1024 (that was the range I tested). For me, the key seems to be the order in which you have each div statement -- that will be the order in which they appear. So you need to look at each div statement as a layer, and then visualize how they will stack in order to properly overlap each other.

 

[Mercutio]

So Buck, the answer is clear: You need to get you page linked on slashdot and CNN.

 

[Buck]

So Buck, the answer is clear: You need to get you page linked on slashdot and CNN.

C'est la vie.

 

[Tea]

(Lots of work later)

OK, site finished! You can take a look at www.woadyyaloak.com.au

Well, as finished as it's going to get. It all validates as HTML 4.01 Strict, ecxcept for the front page, which is my cruddy table version still, and which seems to work in the major browsers and can wait till I get nother burst of energy before I clean it up.

Buck, your pure css front page is very clever! I'm not sure that I understand it properlt though. I spent quite a while figuring bits of it out, but then I got distracted.

There are varous things still wrong with the woady site coding, such as some sub-standard graphics and some visual touches that still ought to be added, but I think I'll just leave it much as is.

Oh, There is a weird thing with the header logo sometimes - it can load as a squashed square sort of shape. A bug in PNG rendering in browsers? Or something else? It sorts itself out soon enough anyway.

Opera 7.23 chokes on the horizontally-styled list (i.e., the horizontal menu), but it's fine in IE 5 and 6, Moz, and Opera 6.0. I've not bothered to make it work in Netscape, and don't intend to. I'll probably take a look at Opera's problems later this week.

Thanks heaps for your help, good SR people, and especially to our residant HTML Wizard, Buck.

 

[Buck]

I'm glad you finished the project Tony (and I prefer we keep the html wizard title to those that deserve it, like Handy).

 

[Buck]

Opera 7.23 chokes on the horizontally-styled list (i.e., the horizontal menu), but it's fine in IE 5 and 6, Moz, and Opera 6.0. I've not bothered to make it work in Netscape, and don't intend to. I'll probably take a look at Opera's problems later this week.

In your CSS file, when defining the properties for #hornav, include what I have in red so that it works in Opera 7.23:

#hornav {
position: absolute;
top: 138px;
left: 0;
height: 30px;
width: 100%;
border: none;
margin: 0 0 0 0;
padding: 0 0 0 0;

font-weight: bold;
color:white;
background-color:#6d6e71;
}

and for the following ids, take out what has been highlighted in red:

#hornav {
position: absolute;
top: 138px;
left: 0;
height: 30px;
width: 100%;
border: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
font-weight: bold;
color:white;
background-color:#6d6e71;
}

#hornav li {
position: relative;
float: left;
padding: 3px 20px 3px 20px;
cursor: default;
background-color: #6d6e71;
border: none;
}

 

[Buck]

A sample of the changed data is here.

 

[Tea]

Amazing!

Thanks Buck. But why does it work?

My guess is that Opera 7.23 doesn't like background colour on an in-line element (but I'll have to check that in IE 5.0 - which just might have been the reason the BG colour went in there in the first place - this machine has IE 6.0 and I'm too lazy to get the notebook out tonight - and the width ... er .. it's not a 100% wide nav bar, as I recall.

Whatever. Workz is workz.

Cool!

 

[Buck]

Actually, Opera needs the width to be 100% so that it will scale horizontally. You are creating the actual color and size of the horizontal navigation bar with the #horbar id, and since it comes before the decor and wander ids used for stream.jpg, everything layers nicely. However, the actual links in the navigation bar, which you define with the ul and li properties, comes after stream.jpg in your html code. This is good, as the stream.jpg image will never cover up your navigation bar links, it will float behind them, yet still in front of the background color defined with #horbar. The only problem with the layering technique is when the items in front of stream.jpg have a background color defined, because then they cover up the image. Remove those two instances, and the fact that any of this is layered becomes transparent to the end-user.