few sites i've found that could help any budding programmers / developers / web designers out there

Coding Forums All manor of coding stuff, biased towards internet development, coving javascript etc all.
W3C School Near definitive collection of internet resources, from the basics of xhtml through cascading style sheets and a good range of other tutorials as well.
VB Forums All things visual Basic, and other microsoft develpment languages, definate windows bias but still pretty good.

if you know of other useful links.. post em!

I like CodingForums...

...but nobody there can give me a straifght answer to my CSS image centering problem Fancy taking a shot at it claire? (pretty please? It really is frustrating me now, and it's one of very few things left to do on the page.)

http://minervapendragon.com/css/templatefixed.htm

http://minervapendragon.com/css/menu/pagestyle.css

All paths are absolute. Just save the source and css to the same folder and edit the relevant css link line down to "pagestyle.css". If you could help me, I'll owe you my sanity!

whats meant to be centered that isn't?

mind you theres only two images on it that i can see.

i must say it looks good to me

if you let me know whats not working i can give it a go, i'm no css wizard but i do play with this stuff

whats it *meant* to look like?

btw. is the CSS meant to be embedded in the page directly? i'd link to it as a seperate file.

It's the banner up top - it's supposed to replace the title text (the title text lies underneath it, so text based browsers and spiders can see it). In IE, it centers fine. IE 6 seems to center the banner image and aligns the left of the test to the left of the image.

Firefox however, aligns the text to the center, and then aligns the left of the image with the left of the text. The result is that the image is placed off-center, about 70 px to the right of where it should be.

(PS, as far as I'm aware, the css is linked as a seperate file? I know there's a little bit with the w3c logo's, but that's nothing important really.)

Truth be known, I couldn't care less about the text - it's the banner I want, and properly centered in all browsers and 10 px down from the top of the page.

If you could have a go, I'll love you forever hun! lol

got 'http://minervapendragon.com/css/templatefixed.htm' loaded, i see the text title 'Welcome to some random text' centered in the green shaded box at the top. i don't see a graphic in there with it.

not too sure, but i'd go with a single 'div' at the page header, with two seperate 'div' tags inside it, one for th ebanner, one for the text. they can be formatted totally seperatly, it sounds like the formatting for the banner is bleading into the text.

btw firefox probably has it right, i'd code for firefox *first* then fix it for msie afterwards.

the css is copied directly into your template, not as a seperate file, no worries cus it works, but makes changing it harder.

if i'm right what your after is a centred banner with centred text under it.. while i'd go with the div's it should be possible to put

< align="center"><img src="blah" /><br />some text</p>

which *should* work

congrats for deciding to make the page work with text only browsers..

Oops! I gave the wrong page!!!!

I've advanced a little more than that. The page I should have given is www.minervapendragon.com/css/templatefixed1.htm

That "1" is all important! lol

Ok, the css file is just as I mentioned.

when I say text underneath the banner, I'm talking in terms of layers, not layout. essentially, when images are turned on, the banner obscures the text when all goes to plan.

You are quite correct, Firefox has the banner correctly positioned - I was acctually coding for firefox It's just coincidence that it works for IE.

Anyways, could you please load up the html I've given in THIS post, and the CSS i've given in my first post - first in IE to see how it SHOULD look, and then in firefox to see what's acctually happening.

The page has some interesting quirks in the coding, namely the way the left bar blends with the top bar, via the corner piece.

I'm fairly sure though that the site won't look the same in a text only browser, but all the info will be there

Hi Girls,

I see it is 'the usual suspects' talking tech again

Thanks for those links Clair. A place I can be found lurking (besides TW) would be:

http://www.daniweb.com/

It is an IT discussion community and is impressivly diverse and yet comprehensive in its coverage of, well, pretty much everything 'IT'. It has Forums, Blogs, Code Samples, Tutorials, IRC and Link directorys. The Forums are obviously the biggest side of the site. The development forums are as follows:

Software Development:
C
C++
Java
C#
Python
VB
VB.NET
Generic .NET
Shell Scripting
Perl
Pascal
BASIC
Delphi
Assembly

Web Development:
PHP
ASP.NET
ColdFusion
ASP
JSP
XML
SOAP
HTML
CSS
JavaScript

and far more other forums and subjects than I care to list. I would recommend DaniWeb as one of the best all round 'one stop shops'

I am usually found in the Java/Unix and Oracle forums

Hugs,

Katherine

i think you've been a victim of the screwed up 'box' model in MSIE... i've got it sorted but its one of them 'don't ask how' moments.

step one.. turn off the graphic so i can see the text.

step two.. make the header have a border round it, to make it possible to see it correctly. this showed two things, firstly both MSIE & Fire fox put the text in the same place & neither of them have it centred correctly. but since its in a fixed width box and nothing tells it to centre text *within* the box this is to be expected.

now i put the graphic back in...

it worked... all i've added is a border round the header.. taking this *out* corrupts things as before.. bizzare since the border is a visual element only, but it does work. unfortunatly setting the border to 0px brings the problem back.

but as a quick & dirty 'hack' (shudders at the very word) you can sort this out by adding *one* line to the CSS file.

replace:

h1.ir {

  position:relative;

  width:437px;

  height:69px;

  margin-left:auto; margin-right:auto; margin-top:10px; margin-bottom:auto;

  padding: 0 ;

  overflow:hidden;

  }

with

h1.ir {

  border: 1px solid #007788;

  position:relative;

  width:437px;

  height:69px;

  margin-left:auto; margin-right:auto; margin-top:10px; margin-bottom:auto;

  padding: 0 ;

  overflow:hidden;

  }

the added line is the first one, the 'border' tag, you can set the colour to be anything naturally.

still not sure why this works, but at a guess its forcing something internally to make a calculation.

its worth noting that trying the centre the text within its box brings the problem back, so its something to do with working out the start point, hence my finger pointing at the box model.

this is a clever way of forcing the graphic over the text, never thought of this

let me know if this works..

the only problem is the text under the graphic not being centred exactly, but frankly i can't see this mattering

btw.. it is possible to have menus like that *without* javascript, CSS can do that kind of effect on its own. but you don't get the nice fade ins..

Claire!!! You Are an absolute STAR!!!! I could give you such a HUGE hug for this!!! It works like a charm! Do you have an account on Coding Forums so that I can credit you with the fix? (I plan on posting back to my thread - which nobody has offered a real solution to, to offer the fix.) If so, what's your username there? (fixed page - http://www.minervapendrag[...]ed2.htm -css at http://www.minervapendrag[...]le1.css)

In terms of the dynamics of this, surely the extra CSS line is not a "hack" as such because it acctually causes it to display correctly in firefox, and not in IE. Does this not mean that it's acctually standard coding instead of hacked coding? As a result, the IE box model would acctually have been working in my favour (for a change), causing it to display as I wanted it.

It certainly seems to be a rather odd to me anyways, and I'd have never have worked that out myself - you clever clever person

As for shuddering at the word "hack" - I know, but I've already added one or two to my code, it was unavoidable. Namely, the Holly hack and the HAs Layout hack. It's just a nessesity unforyunately because M$ are controlling the market by trying to force everybody down to the lowest common denominator

As for the menus, your advice is brilliantly shining in my eyes like some sort of holy grail - it has me thinking. lol

It seems to me that it should be entirely possible to have the menu display as it is for JS enabled browsers, but have a CSS/xhtml pure menu display for non JS browsers. This, at first glance seems to be a little beyond my ability (re-writing that menu for css/xhtml pure!?!?, and then to have it display only for non JS browsers without the use of the "NOSCRIPT -LINK / - /NOSCRIPT" tags in the head (trying to maintain standards here. lol)). This sounds difficult. Detecting JS capability is easy. it's the rest that seems the problem.


Anyways, to add my contribution to this list of techie forums....

For plain old computer help - http://www.techspot.com/vb/ - fairly comprehensive and an excellent IT community.

For another CSS forum - http://www.csscreator.com

Katherine - that website sound excellent!!! I'll be sure to take a look!

happy to help

coding forums username: claire rand

not got on there much lateley, normally hunt it at work when i needs something. tis good.

have a look online for CSS menus theres loads of ways of doing it. if only M$ enable the :hover property on things other than <a> tags it be magic, as it is msie can be made to work, but tis messy