[animgirl]

Oh, about the above part... sorry about that. Had to change it for me, than forgot!!
Glad you caught it though .

Well, on the right "airsoft" part of the logo, where the *mappy* section is, I would actually leave part of the moss background on it, if you could and it would look okay. Then it could appear to be fading into the mossy background.

DC might have some suggestions also

[Redcap]

I also just caught the following in the CSS - compare it with the original:

Original CSS:

#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;
}

Replcement CSS:

#text {
	display:block;
	position:absolute;
	width:100%;
	height: 100px;
	border: none;
	top: 150px;
	font-size: 12pt;
	background: transparent;
	color: #CCCC99;
	overflow:visible;
	text-align: justify;
}

There was some repetition of font sizes, font colour, and background colour, which I've now removed. I also changed for font size to 12 point (I'll be looking at pixel font sizes instead, next, given what's been said on webmonkey recently, lol). Now, if the repetirion was required for, say, Opera, then fine, I'll put it back, but I honestly couldn't see why the repetition was there!

This should be up on-line on the beta site by the time you read it!

Onto the graphics:

Damned good idea - I'll do that when I get back from my Sister's place this evening (she does a damn good roast beef!).

Should be interesting to see what David's got to say - I'm waiting with great interest!

[animgirl]

HA! And there were 2 text-aligns also

Seriously though, I'm tired and am gripping for stamina today.

So yeah, they were silly mistakes, but I'm glad you found them.

[Redcap]

I'm glad I found them, too

Might be an idea to get a good early nights' sleep, then; sounds like you need it (or lots of coffee instead). Take it easy - working yourself to the bone is exceedingly counter-rpoductive - trust me: I drive for a living

[Redcap]

OK, having just spent a very unproductive two hours in Fireworks 3, I'm practically at my wits end with these damned graphics.

To recap somewhat:

This page uses the HTML 4.01 transitional W3C standard, coupled with the extensive use of CSS2 positioning; the graphic above was split up from a Fireworks 3 layered graphic, and is set up on this page in three layers, excluding the background, which is at the background layer.

Thus, the Layers in the image above are as follows:

Background - Background moss and 'contour lines';
Layer 0 - tracer spacer (joins layers 1 and 2 together at wide screen resolutions);
Layer 1 - Ring sight and dot, horizontal tracer line (left half), and the word 'Practical';
Layer 2 - Right half of the tracer line (with rising colour gradient), 'bb', ad the word 'AIRSOFT'

Here's the problem: The transparency of the ring sight and dot, horizontal tracer line, 'bb' tracer, and text, is not what it should be. And I'm damned if I can fix it.

All files petaining to the development thus far can be found through [url=http://www.practicalairsoft.co.uk/beta/index.html]the beta site[/url].

If you can help, I'd appreciate it; as you will see on the beta template page (and afterwards, when it all goes 'live', on the eventual 'about this site' page), all help is, and will be, properly credited - I have at least that much honour and respect for my betters

Thanks in advance!

[DCElliott]

Roger

I was away all weekend and away from my graphics toys so I couldn't help. Sorry. (And Animgirl was beating on me besides )

DE

[Redcap]

I know, and hope your weekend was nice and easy!

As to this apparent S&M thing you have going with Animgirl... well, I'm not even about to comment on that

Oh, yeah, while I have your attention (once you've picked yourself up offa the floor, that is ), I tried making a footer div ID, but the damn thing kept posting itself over the top of the header graphics; how the heck do I get it to appear at the foot of the page - I cannot find any positioning declaration in CSS2 that sets something at the bottom of a page, even if the div in question is at the bottom of the html body?!

I've had to go, for the moment, with a class, which kind of misses the point somewhat!

[Redcap]

Righty-ho, then...

State of play update:

While still waiting to see if anyone can help on the masthead Fireworks side of things, I've added a few things:

• A new favicon has been generated, based upon the ring sight and dot, and is in place and functional (YAY!)
• The page has been split into three topics:
  * Project schedule,
  * Current problem(s), and
  * Credits and thanks.
• A menubar, placed below the mashead, has been added - note that none of the links off it work yet, as the pages they relate to are NOT in place yet - that will come MUCH later!
  I could use some help on the CSS and HTML involved in getting this to be flush under the masthead, of course!

To remind you, the beta site is at [url]http://www.practicalairsoft.co.uk/beta/index.html[/url]

That's it, so far - enjoy!

[animgirl]

Hey,

Looks like you've been pluggin' in a bunch-o crap on that site!
It's lookin' pretty good. I see you had a question above, but it looks like you figured it out!

I was at church last night and after that I went to sleep. I had a couple night's sleep debt to repay.
animgirl

[Redcap]

Hiya, glad to see you're your normal chipper self again - told you that you needed the sleep!

I haven't got it (the DIV at the bottom) figured out yet; I side-stepped it for the time being, using a class (.footer) instead, damn it, so I still need help on that: Specifically, how to get a div box to reside at the bottom of the page, and not right over everything at the top of the page, lol!

And yeah, I've filed the page with a load of stuff; helps me see where I'm going wrong, LOL!

[animgirl]

Try making the p class footer a div footer, declared in the CSS.
Is there a link to your css somehwere, so that I can see more in depth and help more?

[Redcap]

I tried making it a div ID, with the result described above, darn it. All files relating to the site, imagery, source, et al (including a link to the css file) is on the beta page, two-thirds the way down the page or so, at [url]http://www.practicalairsoft.co.uk/beta/index.html[/url]

Thanks in advance again!

[DCElliott]

Just suggestion - if you are creating CSS for unique page elements - header, footer, etc., use an id rather than a class. like:
#header {...
#content {... etc.

IDs take precedence over classes in the style cascade so you are less likely to have an id based style "over-ruled" by later CSS. I tend to put my ids at the beginning of my CSS because they genearally lay out my page structural elements. It is sort of like laying down a skeleton on which you build everything else. You can then also lay down your contextual selectors afterward.

#content p {. . . would set styles for all <p>s in the content section.

It is elegant and timesaving - a real winner in my books.

DE

[Redcap]

Hi, David -

I as thinking along the ID vs Class lines when I firsdt tried to get the footer ID sorted, then things went fubar...

I understand that IDs take precedence, and thanks for the confirmation. never the less, it still doesn't explain why the damn footer div box wound up at the top of the page, rather than the bottom, and over the masthead graphics, instead of at the same level and clear of all preceding material.

Confused? I certainly am!

What I was trying to get was a div box that was at the very bottom of the page, with the mossy background, etc. What I got was almost the exact opposite, darn it.

Also - how do I get a div box to contain the menubar, flush with the masthead (no white space or gaps, etc., between the two)? I can do it in tables, but there has to be a way to do it in CSS-P, surely? Can it be added with a new declaration within the masthead div, or must it be done differently?

[DCElliott]

Make sure that any bounding div has:

{display:block;
margin:0;
border:0;
padding:0;
. . .
}

and your div should behave.

Also be aware that a non-strict DOCTYPE may add unexpected padding to simulate the behaviour of older "quirky" browsers

[Redcap]

I take it all other elements remain the same, thus producing something like:

#footer {
	display:block;
	margin:0;
	border:0;
	padding:0;
	position: absolute;
	width:100%;
	height: 20px;
	background: transparent url(../images/moss-background.jpg) repeat-x;
	text-align: center;
	overflow:visible;
	font-size: 10pt;
	color : #ffff00;
	background-color : transparent;
}

Have I got this right?

[DCElliott]

You got it.

Just one additional point:

{. . .
background: transparent url(../images/moss-background.jpg) repeat-x;
. . .
background-color : transparent;
. . .}

background-color is redundant because it is already specified as "transparent " in the background CSS shorthand above it.

DE

[Redcap]

Gotcha.

OK, now I'm probably wrong here, but this goes AFTER all the previous header and content div declarations in the CSS, right?

Also, I put the div for the footer where one would normally expect a similar table to be, i.e. after the contents on the html page, like:

Everything before, headers, content, etc...

<div id="footer">
<p>This entire beta site, including graphics and downloadable
files (excluding true type font files) is &copy; 2003, Practical
Airsoft, all rights reserved.<br>
Please see the <a href="../index.html">main site</a>
for more details.</p>
</div>

That right, or am I once again horribly confused?

EDIT: [wibble mode] Aw, darnit - it's done it again. My dummy is about ready to go low earth orbit on this. The teddy from the pram won't be too darn far behind, either. [/wibble mode]

I've posted the stuffed up page and css on the beta site, so you can see what's happened, figure out why, and suggest a course of corrective action.

[DCElliott]

Thanks to Beev, we know what a "stuffed up" page is. I have a good friend who races Formula 1600s who is from England - her hubby used to be a Norton works driver. When she goes on one of her off-track grass-cutting expeditions she comes back in the pits and announces "Well, bloody 'ell, oi stuffed 'er again!" and a few more colourful things as well. (I've suggested she would do better on a riding mower and nearly caught a spanner in the teeth. Are all English girls that excitable?)

I think you have the HTML equivalent of an off track excursion . . .

The fly in the ointment is the position: absolute; - that puts the div, in the absence of any other directives, at point (0,0) on the page. If you want to have the div at the end of your content, just drop the position:absolute and the div will rejoin the document flow. Remember this: position: absolute; takes the element out of the normal document flow - very useful for positioning, but it buggers up when you want something to be part of the flow.

DE

[Redcap]

Are all English girls that excitable?

Oh, yeah. Very. And forthright (often brutally so to those with thin skins), as well, the good ones are, too.

Only a spanner? Damn, you got off lightly!

I think you have the HTML equivalent of an off track excursion . . .

I can hear it now: "OI! Gerrorffmoilorn!"

The fly in the ointment is the position: absolute; - that puts the div, in the absence of any other directives, at point (0,0) on the page. If you want to have the div at the end of your content, just drop the position:absolute and the div will rejoin the document flow. Remember this: position: absolute; takes the element out of the normal document flow - very useful for positioning, but it buggers up when you want something to be part of the flow.

AHA! NOW it becomes clear - many thanks!

Now, as to the menubar. Can I take it as read that a div right below the masthead div (without the absolute positioning, of course!) will be flush, with no 'white space'?