[Redcap]

This might just seem like a graphics thread. It's not; I'm having problems (i.e., getting a handle on understanding how to) implementing the HTML/CSS2 for the new site look I have planned!

In a thread on the "Concept, Layout, and Graphics Design" forum, thread entitled [url=http://developers.evrsoft.com/forum/showthread.php?s=&threadid=1129&pagenumber=4]"Help on a catchy logo?"[/url] DCElliott and Animgirl gave me a heck of a lot of help; I'm hoping you folks can do the same for a very confused person - me!

Specifically, DC mentioned:

Originally posted by DCElliott
Just thought of sumpin' else.

You might consider CSS layering - it can be very effective. Animgirl and I came up with a really neat effect on a site she has been doing for a vocal group. The masthead has 4 layers counting from back:
#1 background
#2 text with faint glow effect
#3 R-side picture
#4 L-side graphic text

These layers slide together as the page is resized. You can see it
[URL=http://www.alliancemusic.org]here.[/URL]

You could do a similar thing if you had practical and the reticule on one side and Airsoft on the right and the mid-part of the horizontal line as a background with an x-repeat that would stretch with resizing.

SNIP

A couple of things confuse me. In the site DC mentions (Alliance Music), I cannot figure out, having seen the HTML and CSS source, how the graphics in the foreground overlap, without becoming messed up, i.e., there aren't any Z level instructions, so how the heck does the left foreground image slide so nicely over the right side graphic in lower sized screens?

Secondly, DC mentions (in relation to the final image we devised for the new look to my own site, thread link at the top of this post) that a similar effect can be attained on my own site, using css layering and positioning. Now, the problem that most immediately springs to mind is the background of the image, which is on two layers in the source Fireworks PNG file.

The source file can be exported into different layers easily enough - fireworks allows layers to be constructed, so 'hiding' layers on export will allow easy image generation from source.

The layers in the image, by the way, are (topmost first):
#1 Vector lines
#2 Lettering
#3 Moss background
#4 Contour background

Layers 1 and 2 can easily be adjusted to suite; however, given that layers 3 and 4 fade into each other, is it possible to have the same effect as the foreground 'sliding', in a background, and is the principle and execution in CSS layering the same?

TAI!

Confusedley,

[animgirl]

there aren't any Z level instructions, so how the heck does the left foreground image slide so nicely over the right side graphic in lower sized screens?

The Z-index values are declared in the external CSS that the site is linked to.

However, I understand what you are saying about your logo, and being confused about how it would work.
It looks to me that you could repeat the moss-background easily, and have the fading other part on the right side.

Seeing that you have a glow around your letters would complicate this a bit though, because it would need to be saved as a .gif with a matte...

So, your layers could be something like this:
1. Main logo (text & reticule) (saved as a .gif)
2. the fading part on the far right in the background of the logo
and then in the background, you could have the moss, which would be told to repeat in the code as the background for your header.

All this kinda depends on how you want your logo to act with the page also, whether you want the line to go all the way across, if so, you'd have to have a repeating layer for that also.

[Redcap]

Originally posted by animgirl

The Z-index values are declared in the external CSS that the site is linked to.

OK, if you can talk me through this, I'd appreciate it!

Here's your HTML of the page masthead area:

<div id="header">
<!-- -->

<div style="display:block;position:absolute; padding:none;margin:none;border:none;left:0; width:325px;">
<img src="headerleft.jpg" width="325" height="120" alt="headerleft.jpg - 20kb" border="0" />
</div>

<div style="display:block;position:absolute; left:auto; right:0; top:0;padding:none;margin:none;border:none; width:320px;">
<img src="headerright.jpg" width="320" height="120" alt="headerright.jpg - 27kb" border="0" />
</div>
</div>

And here's your CSS that I think covers it...

#header {
display:block;
position:static;
width:100%;
height : 120px;
border: none;
padding:0;
margin: 0;
font-size: smaller;
background: transparent url(headerbackground.jpg) repeat-x ;
color: ivory;
text-align: center;
overflow:visible;
}

SNIP

All this kinda depends on how you want your logo to act with the page also, whether you want the line to go all the way across, if so, you'd have to have a repeating layer for that also.

OK, that bit I understand, and have been thinking along; the bit that I'm confused about is mentioned above, though

TIA!

[DCElliott]

z-indexes are assigned by default in the order that elements appear. Later elements in the HTML have a higher z-index. Elements can also be assigned a z-index in the CSS. Animgirl's site uses both methods, thats why you don't see explicit z-index properties on everything.

I'm gonna sit back and watch how Animgirl walks you through this.

[Redcap]

Dave (hiya, mate) -

OK on assignment by order: makes sense. As to the z-index appearing in the CSS, I must be going blind, as I couldn't see any such calls. I'll have another look. Thanks for the info, by the way.

I'm off to see the first ep of '24' (series 2) on BBC2 (UK TV channel) now, and will be off to bed thereafter, so I'll catch up on this in the morning, before nipping off to work. Have a good evening, and a better week, all!

[animgirl]

You're not blind, it's kinda hard to find it if you didn't build the site!

This is the .div that contains the header. The following is located in the external CSS:

#header {
	display:block;
	position:static;
	width:100%;
	height: 120px;
	border: none;
	padding:0;
	font-size: smaller;
	background: transparent url(/header_footer/mauvebackground.gif) repeat-x ;
	color: #FFFFF0 ;
	text-align: center;
	overflow:visible;
	color:inherit;
	background-color:inherit;
}

These are the img id's that go inside the header.div in the html, the separate pictures.

#alliancetitle1 {
	display:block;
	border:0;margin:0;padding:0;
	position:absolute;
	left:2%; /* adjust to taste ;-) */
	top:0;
	z-index:3;
}
#headerpicture {
	display:block;
	border:0;margin:0;padding:0;
	position:absolute;
	left:auto;
	top:0;
	right:5%;
	z-index:2;
}
#alliancetitle2 {
	display:block;
	border:0;margin:0;padding:0;
	position:absolute;
	left:2%;
	top:0;
	z-index:1;
}

alliancetitle1 looks like this:


headerpicture looks like this:

alliancetitle2 looks like this:

and this is the mauve background that repeats in the background:

The reason we had an alliancetitle1 and 2, is that alliancetitle 2 had a glow around it, which would not work well for the .gif format with that background, so we put alliancetitle1 over it, and sandwiched the group picture in between the two, so that the glow is behind, but the words is still on top.

I thought it might help if you could actually see the layers separate.

Then, this is the html

<div id="header">
      <img id="alliancetitle1" height="120" alt="alliancetitle1.gif -
4kb" src="/header_footer/alliancetitle1.gif" width="325" border="0" />
<img id="headerpicture" height="120" alt="headerpicture.gif
19kb" src= 
      "/header_footer/headerpicture.gif" width="320" border="0" />
<img id="alliancetitle2" height="120" alt="alliancetitle2.gif -
33kb" src="/header_footer/alliancetitle2.gif" width="325" border="0" />
    </div>

I hope this helps. It's a lot to digest

What I meant in the above, was that we need to establish a layout technique before we tackle trying to do it! Like, do you want the green line to extend with the window size? Do you want all the words to stay to the left?

animgirl

[Redcap]

Ok, then. The files I examined were in the zip file contained in [url=http://developers.evrsoft.com/forum/showthread.php?s=&threadid=1046]this thread, entitled "Tables with CSS?".[/url]

Obviously, since that was posted, things moved on a bit, explaining my confusion, lol

OK. I need to think (when less tired) on how I want to implement the new site layout; initial thoughts are similar to yours: The line should dynamically re-size to each screen width; the background should do likewise, the red-dot & Reticule and 'bb' should remain in relative positions to the line, and the lettering likewise.

Damn, this is gonna require some heavy brainstorming.

Oh, well. I always did have a tendency to try damn difficult projects! ;p

[animgirl]

Obviously, since that was posted, things moved on a bit, explaining my confusion, lol

Oh yeah, I totally forgot about that thread.

OK. I need to think (when less tired) on how I want to implement the new site layout; initial thoughts are similar to yours: The line should dynamically re-size to each screen width; the background should do likewise, the red-dot & Reticule and 'bb' should remain in relative positions to the line, and the lettering likewise.

Hey, sounds like a good plan.

this is gonna require some heavy brainstorming.

Don't worry, you can ask anything, and if I don't know it, DC will chime in

Well, if that's the layout you would like to try, you need to break your logo apart a bit (but keep the original.)
For now, you'd need to save the logo as a .gif with a transparent background, but before you go doing that, you'll want to remove the teardrop thingie (what's it actually called?) from the end and save it as a .gif, and then save the teardrop thingie as a separate transparent .gif.
2 .gifs so far.

the logo.gif will be positioned on the left of the page, and the tear drop thingie will be to the far right (if that's how you want it).

Okay, I won't say anymore until you get your thoughts together

[Redcap]

Originally posted by animgirl
Oh yeah, I totally forgot about that thread.

LOL

Don't worry, you can ask anything, and if I don't know it, DC will chime in

Again, LOL

Well, if that's the layout you would like to try, you need to break your logo apart a bit (but keep the original.)

For now, you'd need to save the logo as a .gif with a transparent background, but before you go doing that, you'll want to remove the teardrop thingie (what's it actually called?) from the end and save it as a .gif, and then save the teardrop thingie as a separate transparent .gif. 2 .gifs so far.

Gotcha - oh, and it's called a 'bb' (NOT a Ball Bearing, but in this case, a Ball Bullet, so the Japanese inventors of the game tell us). In addition to the inert polymer 6mm pellets used in the Airsoft game, there are 'tracer rounds', containing a luminous substance, that glows brightly for a short period (three or so seconds) when subjected to very bright light. Clip-on lamp units called 'tracer adaptors', attached to the muzzles of the Airsoft guns, illuminate the rounds as they are fired. The 'teardrop thingie' is my attempt at simulating a tracer round in the masthead graphic. Kinda makes you wish you never asked, eh?

The logo.gif will be positioned on the left of the page, and the tear drop thingie will be to the far right (if that's how you want it).

I'll have to add a gradient line (brighening from left to right, to match the two shades of green in the current graphic) between the two, I suspect, as a third transparent gif.

Okay, I won't say anymore until you get your thoughts together

Hopefully the above is a good start. This still leaves the problem of the self-resizing background, which will probably have to be two transparent gifs on a dark green background, so that they fade together gracefully in smaller screen sizes.

Ye gods, this is gonna have at least FIVE damn layers in the CSS!

AAAAAAGH! What have I gotten myself into?!

[animgirl]

--------------------------------------------------------------------------------
Don't worry, you can ask anything, and if I don't know it, DC will chime in
--------------------------------------------------------------------------------
Again, LOL

Well, you usually seem to be edging near insanity, so I have to say something!!

Kinda makes you wish you never asked, eh?

Ok, now it's my turn to use the smilie:

I'll have to add a gradient line (brighening from left to right, to match the two shades of green in the current graphic)

Crap. I didn't realize there was a gradient there. Or notice. I guess I need to look at the logo again to get some thoughts on that one.

This still leaves the problem of the self-resizing background, which will probably have to be two transparent gifs on a dark green background, so that they fade together gracefully in smaller screen sizes.

Yeah I have some thoughts on that.
You don't want any blank space at larger res.'s.
So, you could try taking some of that moss background and making it repeatable. Then, it could repeat seamlessly behind the background, the whole length of the header.
Then I was thinking you could take that mappy looking section tat the far right of the original logo, and saving that as a separate .gif, which could go behind the bb, and would not repeat.

So, right now let's see:

1. The main logo with a transparent background, to the left.
2. the bb with a transparent background that will go to the right.
3. that darn line, which I gotta think about
4. the mappy looking section, which will be to the far right, with the bb.
(this one will actually be declared in the CSS:
5. the tiled mossy background (assuming that could be done easily)


'Course, as these pieces go together we could see different ways of comibining things. Do you have a test site that this can begin to be tested on?

Ye gods, this is gonna have at least FIVE damn layers in the CSS! AAAAAAGH! What have I gotten myself into?!

Like I said above...

[DCElliott]

I'll have to add a gradient line (brighening from left to right, to match the two shades of green in the current graphic)

No - the gradient may be at the start and finish of the line, but the line background should be based on a 1px wide slice from the middle that is then x-repeated across the masthead as layer 1 or 2.

My suggestion for the interleaving moss and contour layers. To create a graduated transparency effect you need to do a gradient with denser and denser transparency on the top layer*. since this is a gif, that basically means punching denser and denser holes. Its bloody hard to explain! Also, it may be possible to let that layer handle the background horizontal line without needing another layer. I'll try to post something tonight.

Incidently, I'd tile the contours rather than the moss and design the moss so the midpoint of the fade gradient was about 450 to 500px of the way in to balance it for 1024x768 resolution, currently the most common. Interestingly, the moss will withstand a fair bit of horizontal stretch without degrading, What this means is that you could design for that resolution and then have the image with a fixed height but a width of, say, 75 PERCENT so that the overlap would stay constant - it would be perfect at 1024, squish a fair bit for 640 but still not look bad, and expand without getting pixellated unless you got up to 1600 plus. but persons with 1600+ monitors brows in less than a full screen window anyway. And if they are rich enough to own one of those 1600+ monitor, we hate them anyway, so screw 'em I say.

This is hard stuff but I'm sure Rodger the bodger is up to it

DE

*The initial way I would try to tackle this would be to apply a gradient mask and then layer heavy monochromatic noise on top with the noise color being the transparency color of the gif. This will make the gif do a graduated fade simulating an alpha channel. For an example of simulated alpha, look at my [url=http://www3.ns.sympatico.ca/d.elliott/ghanja2.html]Ghanja Template[/url] which uses a chequerboard grid of black and transparent pixels as the nav backgroundso I am sure this will work.

[Redcap]

Hi, Dave!

Re. the gradient line: Hmm. I follow your line of thought here, Dave, but I'm not sure it'd work; the visible line of the tracer fade is intended to convey motion, hence the gradient. Having a rapid fade at each end would defeat the object of the gradient, wouldn't it?

I'm none too sure what you mean regarding the - for want of a better term - patch-hole grid*, so I'll wait to see what example you post.

On the background moss and contours: Yes, makes sense, and I like the work-around. As to people with more money that sense, and humongously large monitors, well, the Roger Stenning Benevolent Fund is open to donations of such equipment. Note: No accounts kept, no receipts given

This is hard stuff but I'm sure Rodger the bodger is up to it

Oh aye? There's no 'd' in my name matey

Oh, and yep - I'm up to this (I hope )

*The initial way I would try to tackle this would be to apply a gradient mask and then layer heavy monochromatic noise on top with the noise color being the transparency color of the gif. This will make the gif do a graduated fade simulating an alpha channel. For an example of simulated alpha, look at my [url=http://www3.ns.sympatico.ca/d.elliott/ghanja2.html]Ghanja Template[/url] which uses a chequerboard grid of black and transparent pixels as the nav backgroundso I am sure this will work.

*Eh? Do what? You be speaking Greek - oi spik Eeengleeesh!

[animgirl]

I don't want to get off topic here, but I just hunted your logo down to see what it looked like 'cause I kinda forgot and it's different than I remember.

It's quite long. At res.'s 800 x 600 and less there is horizontal scrolling, and that's even when it's smooching the edge of the page.

I didn't realize it was that size, there isn't much space to make in between in the background after all.

Here's an idea though: why couldn't the gradient fade the way it is now, and the neon-yellow section just continue on beyond that...

[Redcap]

I see what you mean about the size of the image. Makes sense.

Regarding the gradient - why the hell didn't I think of that?! It's so simple, it'd work!

Regarding the lettering: I've been thinking of making those attach to each graphic, i.e. the sights to "Practical", and the 'bb' and line to "AIRSOFT". This way, the image would be easily self-resizing, and would help reduce the number of CSS layers (to get back on topic, lol) that I'd need to worry about.

So, you'd get the two background layers, with the moss a fixed background, and the contours sliding over on the right, the next two layers above that being the reticule and "Practical", with the line and "AIRSOFT" as the topmost layer, which would then be able to slide over the lower levels. It'd take a fair bit of image editing and transparency, but I think it's doable.

My one major concern is browser compatibilty: Doesn't nutscrape have a problem with CSS z-layering?

Thoughts?

Edited for grammatical fubars

[animgirl]

Regarding the lettering: I've been thinking of making those attach to each graphic, i.e. the sights to "Practical", and the 'bb' and line to "AIRSOFT". This way, the image would be easily self-resizing, and would help reduce the number of CSS layers (to get back on topic, lol) that I'd need to worry about.

Try it!

I think what you mentioned above sounds about right. I remember DC saying that you could repeat the mappy background instead. So you could try either.

My one major concern is browser compatibilty: Doesn't nutscrape have a problem with CSS z-layering?

That would be quite a limitation, I haven't had had any problems of that sort (unless DC refreshes my memory .)

nutscrape, what a gentlemany thing to say

[Redcap]

That would be quite a limitation, I haven't had had any problems of that sort (unless DC refreshes my memory .)

Well, hopefully, he'll be able to tell us. It's just a vague reccollection, and I cannot find where I saw it, so hopefully I'm wrong.

nutscrape, what a gentlemany thing to say

LOL - Who told you I was a gentleman?!

[Redcap]

OK, here are the images for the masthead, split up as we talked about. HTML and CSS to follow within the next day or two, now that I'm off from the day job until Wednesday (dontcha just love shiftwork?).


This is the full-length background.


This is a sliced, x-repeatable version, in case that idea works...!


The right-hand graphic (transparent background). Note that I know that there's visible banding in the gradient of the line; it's a beta, and to safe download time, I reduced the pallette to 64 colours. I'll try dithering it later...


The left-hand graphic (transparent background).


And the x-repeatable tracer line that DC suggested (transparent background).

Comments?

[Redcap]

Awright; [url=http://www.practicalairsoft.co.uk/beta/index.html]first attempt,[/url] and it's stuffed up beyond all recognition.

As you will see upon visiting the beta site, for some reason, the background does not extend to 100% of the screen width (designed with 1024x768 here). I don't understand why, either.

The logo, which should all be on one horizontal plane, has stuffed itself into two levels, and separated itself over two x-planes. I don't understand why that's happend, either.

In short, I'm completely confused. HELP!

Oh, and there's a link to the CSS file on the page, just in case you want to se that, too.

[animgirl]

In your html you had this:

<div id="header">
    <img id="reticule-and-practical"
src="images/reticule-and practical.gif"height="100"
width="377" border="0"/>
    <img id="headerpicture" src="images/tracer-spacer.gif" height="100" width="1" border="0" />
    <img id="alliancetitle2" src="images/contours-and-tracer.gif"
height="100" width="400" border="0" />
</div>

You forgot to change the names of those to match the id's you made for them in the CSS.

#contours-and-tracer {
	display:block;
	border:0;margin:0;padding:0;
	position:absolute;
	#contours-and-tracer {
	display:block;
	border:0;margin:0;padding:0;
	position:absolute;
	left:2%;
	top:0;
	z-index:1;
}

This was the section that was supposed to be on the right, not the left, so that's changed to "right".

#header {
	display:block;
	position:static;

The position had to be changed from static to absolute to work correctly in the .div.

I added this to the CSS:

}
#tracer-spacer {
	display:block;
	position:absolute;
	border:0;margin:0;padding:0;
	width: 55%;
	left: 100px;
	right: 0%;
	z-index:0;
}

Oh, I and I put your text in a .div.
------------------------------------------------------------------
On the HTML replace the following sections in your html with these instead:

<div id="header">
    <img id="reticule-and-practical"
src="images/reticule-and-practical.gif" height="100"  width="377" border="0" />
    <img id="contours-and-tracer"
src="images/contours-and tracer.gif"
height="100" width="400" border="0" />
 <img id="tracer-spacer" src="images/tracer-spacer.gif" height="100" width="1" border="0" />
</div>

<div id="text">
<p>Awright; first attempt, and it's stuffed up beyond all recognition.
As you can see, for some reason, the background does not extend to 100% of the screen width.
The logo, which should all be on one horizontal
plane, has stuffed itself into two levels, and
separated itself over two x-planes. I'm completely confused. HELP!</p>

<a href="style-sheets/beta.css">Here's the CSS (right click and save as, it's a css file!)</a>
</div>

And replace the CSS with this:

BODY {
	color: #CCCC99;
	background-color: #006600;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: medium;
	text-align: justify;
}

A {
	color: #CC9966;
	text-decoration: none;
}

A:HOVER {
	color: Yellow;
	text-decoration: none;
}
#header {
	display:block;
	position: absolute;
	width:100%;
	height: 100px;
	border: none;
	padding:0;
	font-size: smaller;
	background: transparent url(images/moss-background.jpg) repeat-x;
	color: #inherit;
	text-align: center;
	overflow:visible;
	color:inherit;
	background-color:inherit;
}
#reticule-and-practical {
	display:block;
	border:0;margin:0;padding:0;
	position:absolute;
	left:0%;
	top:0;
	z-index:3;
}
#tracer-spacer {
	display:block;
	position:absolute;
	border:0;margin:0;padding:0;
	width: 55%;
	left: 100px;
	right: 0%;
	z-index:0;
}
#contours-and-tracer {
	display:block;
	border:0;margin:0;padding:0;
	position:absolute;
	top:0;
	right:0;
	z-index:1;
}
#text {
	display:block;
	position:absolute;
	width:100%;
	height: 100px;
	border: none;
	top: 150px;
	font-size: smaller;
	background: transparent;
	color: #CCCC99;
	text-align: center;
	overflow:visible;
	color:inherit;
	background-color:inherit;
	font-size: medium;
	text-align: justify;
}

Sorry, I didn't want to zip this stuff. I'm lazy today...
Whaddya think, DC?
animgirl

[Redcap]

Animgirl -

Damn, that was fast work!

Thanks: I follow the explanations fully, and have changed the HTML and CSS to match, with one variation, as follows:

#header {
	display:block;
	position: absolute;
	width:100%;
	height: 100px;
	border: none;
	padding:0;
	font-size: smaller;
	background: transparent url(../images/moss-background.jpg) repeat-x;
	color: #inherit;
	text-align: center;
	overflow:visible;
	color:inherit;
	background-color:inherit;

I had to do this, as the CSS is contained in a seperate folder, and the browser would have to back up one folder level, then go into the images folder, to find the moss background.

Sorry, I didn't want to zip this stuff. I'm lazy today...

Whaddya think, DC?

Nice smilie!

Next up, tidying up those damned images, which are not displying full transparency. Hints?