struggling with column height

cant you make a directory called "test" and put the test site there?? if I can see what you are doing, i can help you easier. vinh

OK, I have put the draft css stylesheet, images and homepage up on my webspace. None of the links will be working because I haven't set them up yet, but you can see the basic layout I hope. There's more to go in the left-hand column and obviously I haven't started the middle column yet - it will be only this column that changes from page to page (to make things simpler really). But I thought I ought to get the layout working before I set up the content.

The files are here.

Cheers

Genny

A complete doctype and valid code would be a start

valid doctype and css, hurry before they kill you!

I am guessing that you want your left col and right column to be at equal heights at all times right?? I am guessing, because you didnt really say what you wanted...

But here...

The logic of your codes goes like this:

Right Col Floated right.

Left Col (floated left) + Center Col (floated right) wrapped in floatwrapper floated left.

too much floating.... and no height declarations, so you cant expect the heights to become equal...

I recommend a layout like this:

http://www.pmob.co.uk/temp/3colfixedtest_3.htm

the logic much simpler...

Left Col floated LEFT
Right Col floated RIGHT
Middle Col not floated, but has margins to keep it from bumping into the Left and Right Col

Ha! All that invalid code comes from copying and pasting stuff without really understanding it. Obviously it's something I need to know, although I read the links but wasn't much the wiser about which doctype I should use - so much choice - how do I decide? - and as for validating the code... not much point validating something which I may have to start again from scratch with, eh?

So looks like I've wasted a day trying to make a layout work which is unworkable for what I want. huh! I did have some height declarations in the code at one point today, but they seemed to stop the column stretching to fit so I took them out again.

Have looked at the pmob suggestion for a 3 column layout, and I can see what it's suggesting should be done, but not sure I have the coding ability to make it work. I'm not great with negative numbers! (((

Isn't there a simple dreamweaver template that would do the job for me?

Use a strict doctype for a new page. Either HTML 4.01 strict or xhtml 1.0 strict will do nicely. The first is ever so slightly easier to learn. The important part is to use a strict doctype and then write your html before you think about your CSS. HTML is meant to be used to mark up the meaning of your content, not it's presentation or layout. Mark up for meaning, that is semantically, and then validate before you do anything else.

Then when you've got a semantically marked up, valid html or xhtml page in a strict doctype, start writing your CSS to style it's presentation. CSS should be the only thing you use to define how your page is going to look, Nothing about your html or xhtml should say anything about how it will look, only about what it means.

Once you start developing the presentation and layout in CSS you might find a need to go back to the html and insert a very few grouping elements (DIVs and SPANs) to provide specific hooks for your CSS rules where necessary. Often you don't need any extra elements, depending on your layout.

The main mistake to avoid is that of marking up your content with a particular presentation or layout in mind. That's a guaranteed way to get into a big mess, as you've found I think. Forget about layout or presentation until you've gotten your markup done, and validated your html.

Thanks all for your helpful comments.

Vinh - Maybe I'll have a go at that layout when my eyes have recovered from yesterday's over-use. Ta.

Ed - I don't quite see how I can separate the html from the css so easily. All that page, bar the middle column, is visual stuff - buttons and picture links which will direct to other parts of the site. If I write all that and then think about layout, surely I'm going to be in even more of a muddle if I then decide to set it out quite differently? All the main content will go in the middle column of each page, but I don't want to spend too much time on that without a page for it to go in!

And with things like the buttons, I read a tutorial about making each one individually in photoshop, but then found a button-maker on the web, which seemed to do the job very nicely except that it generated a load of javascript which I then had to decide what to do with... and quite possibly did the wrong thing.

Back to the drawing board, I guess.

None of those things are presentational elements, they are content that you mark up according to their meaning - buttons will be part of a form, links are just links. A menu is generally just a list of links and should be marked up as a list because that's it's meaning. Then you use CSS to make it look however you want to look. Check out the listamatic site to see what can be done with simple lists and CSS.

I won't quote the rest of what you've said here other than to say it seems to me to be fallacious and to indicate that you don't get the idea of the separation of markup and presentation and why it is such a good idea. There are lots of articles on the web that explain this better than I can and many of those articles are right here on this website. Start by reading through the "how to" board.

and the fact that i don't understand how it all works goes without saying. )

i'll go back and start with how to pages.

OK, so I've gone all the way back, made a page with just (what I hope is) simple markup of content, no design or layout. http://www.genny.force9.co.uk/new3col/

There are other pages to go with this one, all of which will have very similar content except for one section which will change from page to page.

So can I go ahead and start work on the css again now? From scratch? Presumably I'll have to go back to the html and add instructions to link it with the stylesheet, won't I? And should I keep revalidating the page to check it's all still ok?

Another question - is there any way of putting this (the content which will appear on every page) in one place so it can be read by each of the website pages? It occurs to me that it's going to be awkward if I decide to change one link in this main content, because I'll have to go through and change it on every page, whereas if it was in one place and just imported from there by each page, I'd only have to change it once... same way as with css stylesheet I suppose. Is this possible? I haven't managed to find any info about it anywhere...

Dang! You went and called my bluff and now I guess I havta help ya!

The html is valid and the text stuff is in paragraphs, the menus are in lists, so far so good. But as is the page doesn't really have any focus and the main text is a long way down. Not to worry though, we can fix that up with some CSS, I hope.

First though, perhaps you could take a look at your use of h1 to h6 tags. First thing I notice is no h1 tag. Why? There should be one heading on your page that summarizes it and says what it is about and it should be in an h1 tag. So think about that and come up with one and put it first in your source code. Probably it should be "Wrexham Peace and Justice Forum" just like your first graphic. So I'd take that graphic out of your html and replace it with the H1 tag and title. Don't worry though, we aren't going to get rid of the graphic, we are going to use it differently.

Given your content we probably want to use the H1 combined with your image as a full width header, replacing the text with the graphic in compliant browsers. So we can use an image replacement technique. But to do that you will need to know the exact background color of the main part of your image. Do you know that?

Then your remaining header tags should tell us about the importance of each level of header. Maybe they already do that but it isn't clear to me that they do.

Also those graphics that are set up as links. I'm a little worried about them - do they really need to be graphic links? Since their point is to be a link perhaps an image replacement technique would be best for them as well.

Your page also smacks of perhaps trying to put rather too much on one web page. Maybe you should think of how we could split it up usefully. Maybe we can't, but let's think about it.

Anyway, that's my perhaps feeble way of thinking about your page based on your content. It's nice to have something in place on the page to give us something to think about. Maybe you could tell me how you react to my idea for a header before I go any further.

After playing around with your content a bit, a couple of other things strike me. You are selling a viewpoint. Nothing wrong with that and I happen to share some of that viewpoint, but you must give it some focus. Your home page should have a lot less content, particularly links, and you should focus much more on telling your story and what your site is about concisely.

You have about five seconds to sell your site to any new viewer, and in that time the first time viewer should know what your site is about. You just have way to much there to comprenend. Even your first menu has too many items. Pare it down to about six items, these six or so being the main divisions of your site. One of these items can be "links" which is where the rest of your links should go.

Now I see I harassed you into putting up your content and now I'm complaining there's too much there! The point is to divide it up logically so that people can get to it easily. Too much content on a page is worse than no content in some ways, and particularly on a home page.

Hope this isn't too vague...

I don't want you to feel obliged to help me , but I do appreciate it - ta.

To reply to some of your questions/suggestions...

Yeah, I was stuck with the headers. My initial intention was not to give any of them sizes at this stage (I've been told there must be a hierarchy through from h1 to h6) but I couldn't work out how to make it clear they are headers without giving them h numbers. The reason I didn't use h1 was because I thought this would be the biggest header and the ones I wanted were quite small - not much bigger than the main text - but I think it's fine to use h1 as text replacement or whatever it's called behind the header image. Text would be fine behind all the other images too, I expect, as they're links.

The header image I made 750 wide to fit small monitors. The colour of the blue background is somewhere on my desk... #2d2fa8. I didn't know how to make a stretchy image, so I just pasted it onto the blue background last time - works ok until you view it in a window less than 750px wide, but I didn't think that was a huge problem - might encourage people to enlarge their viewing window, I thought!

I agree that the main content of the home page could be more about the group - who we are and what we do etc. I suppose I was thinking of people who already know us coming to look for dates of events, but this isn't necessarily the case, is it? I'll think about that. Maybe a very short list of diary dates and nothing else with "click here for more info" going to diary page or summat, and some more general information about us below that.

Although my content is a long way down the page in the html, when it's set out I imagined it being slap bang in the middle, in the centre column. Everything that's not in the centre column will stay the same on every page, so that no-one gets lost in complicated navigation around the site.
I'm keen to keep the links (this isn't all of them - just a selection) on each page to encourage people to go and read more stuff, and the flickr badge is just an easy way to display some of our photos.

With most of the content repeated on every page, I was wondering if this could somehow be loaded centrally, to make updating easier. If I want to change one link or replace a picture once the layout has been set, then it's going to take hours, innit?

The way I'd envisaged it being laid out (as per my previous attempt at 3 cols) is that there's a pale background behind everything, which is same colour as centre column: #f3f7eo. Then there's the masthead along the top, and all the buttons underneath this(we have content to go in all of those pages, so I'm not keen to drop any of the buttons - but maybe this is possible - see below). Navigation bar colour #7b154d, although in my last attempt I made the buttons #cccc99 I think, with writing in the navbar background colour and hover turning the writing red. Is all this useless now or might I still be able to paste it in somewhere?

Under that would be narrow columns left and right #cccc99, with some of the links enticingly repeated as picture links (taking people off to our newsletters, our blog, cartoons, poetry and... possibly... diary dates, although that one was only an excuse to put in a picture of our banner - and it needs a new pic really - so people can see where our weird colour scheme has come from).

So I suppose we could drop four of the links from the navigation bar (blog, newsletters, cartoons, poems) and just have them as picture links at the top of the left and right columns (assuming I'm ever going to be able to work out how to do a 3-col layout). The banner picture could be just a picture in the centre column, in amongst the text about who we are.

The other thing which I think is important, but don't know how to go about, is making sure that there's a way of viewing the text larger to make the site more accessible. Is that easy?

OK, enough answers and more questions. I'll go away and think about possible text for the front page now - although I guess I can easily change that at any time, eh?

Thanks again

Genny

I've changed the content of the home page a bit now - at same address: http://www.genny.force9.co.uk/new3col/ and I've also posted my idea of how the site might look with the content laid out properly:
http://www.genny.force9.co.uk/new3col/images/wpjf%20plan.jpg

This way, when a visitor comes to the site, the first screen they see should show all the links to other pages (on the navigation bar and the picture links), plus "who are we?" and "what do we do?", with more information available by scrolling down the page.

Not sure about the idea of diary dates scrolling along the top of the centre column, but it would be a way of advertising upcoming events without using much space - presumably people would know to click the "diary" link to get more info.

You are missing the point of semantic coding. You shouldn't even be thinking of how your content will look when you are marking it up with html, only it's meaning. Use H1 through H6 to define the levels of your headings, nothing else. It's dead easy to change their sizes to anything you want with CSS. That's a presentational thing, though, and should be irrelevant to your html.

Remember, html for meaning, CSS for looks.

Still more presentational thinking while doing your mark-up! It's a hard habit to get out of, but you should try really hard to get out of it. It's dead easy to move stuff around with CSS. Forget about that until you've got your html finished.

Well it won't do that, it will do rather the opposite because that's how people behave when they view web sites.

You have to make up your mind. Is this a web site for you, or for some real or concieved audience?

If the former then go ahead and do it any way you want and I won't criticise at all, it's for you! Do whatever you like.

But if it is for an audience other than you then you have to make the site work for them, not you. You have to give them what they need and want, not what you fancy they should need or want.

If people want to see a lot of links then you give them a links page and they will go to that and be happy because that's what you are looking for. But if you clutter up a home page with links you'll just confuse them and drive them away.

The only graphic images that should be in your html are images that are actually an essential part of the meaning of your page. Anything else is just decoration and you decorate with CSS, not with html.

A graphic link is an abomination that especially confuses people when interspersed among text links. The only thing a graphic should link to is a bigger more detailed version of the graphic so folks can see it better!

I'm not saying no graphics on your home page, I'm saying no graphics in your html unless they are meaningful content and part of what you want to say.

Once again, to repeat, html or xhtml is for marking up meaning, and CSS is for presentation and layout. Keep the two concerns separated.

You shouldn't be thinking about that at all yet. How often must I repeat myself?

Sloppy thinking, as I tried to explain earlier. That said your new markup is an improvement. Your first set of links is much more concise and will be easier to style.

Your introductory text is much improved but still needs to be a whole lot shorter.

!!!!!!!!!!Stop thinking presentation!!!!!!!!!

Your page is not ready for that yet. Thinking presentation at this stage is only going to make it harder to come up with a good design.

My advice is still, cut out all the links except the first set, especially out with the graphic links. Shorten your introductory language and make it fit in a couple or three paragraphs. Attract the visitor to want to see more. Trying to put it all on the first page will just drive them away.

And just a final point for tonight - I'm being rather dogmatic with you because I think you desparately need it at this point. Once you understand the rules and why and how to use them you'll be able to use them and break them when necessary. But at this point I think you need to learn the rules of a good design process so, as I said, I'm being purposely dogmatic, perhaps overly so.

Just a bit, eh?

Here are my latest thoughts...

You said:

"The only graphic images that should be in your html are images that are actually an essential part of the meaning of your page. Anything else is just decoration and you decorate with CSS, not with html.

"A graphic link is an abomination that especially confuses people when interspersed among text links. The only thing a graphic should link to is a bigger more detailed version of the graphic so folks can see it better!

"I'm not saying no graphics on your home page, I'm saying no graphics in your html unless they are meaningful content and part of what you want to say."

There is nothing that puts me off a website more than a load of ordinary text links with no graphics! Surely I can't be alone? To me, a visual link like a cartoon directing to cartoons page is a bonus. I'm happy to have the heading above it as a link too, and maybe just the picture as a picture, but not everyone is turned on by text, or understands it easily. That's my view, anyway.

I also particularly want to have direct links to all the main pages from the home page (and indeed from all the other pages), because otherwise navigation gets complicated for people who aren't used to navigating their way round sites.

So, I'm happy with sequences like home - links index - link categories (branching off to the four different link categories), and home - photo gallery index - photo galleries (branching off to all the various galleries). What I wouldn't be happy with is home - creative stuff (or similar group heading) - poetry/cartoons/newsletters (branching off into completely different sub-categories), which is the sort of thing which would have to happen if the links are cut down to six from main page.

But I do take your point about getting the html sorted before laying it out. I've started work on some more pages, now linked from the home page. I've only put the bare content in these pages - the stuff that I imagine will change from page to page, not the bits that will stay the same. So, there's now a diary page with a few entries; a gallery page (as this leads off to photo galleries, I want it to have graphic links - sorry ); and a links index page with one of the links sub-pages done - alternative news.

Maybe I've got the coding totally wrong but hopefully the important stuff is in there.

... but you could be right. Please don't shout at me if you are.

Genny

Sorry I don't have much time tonight so must keep my reply short. Again you've missed my point, I think. I didn't say "graphics in links are bad" I said "graphic links in html are bad unless it is a link to a bigger version of the graphic" and they are not the same thing at all.

But I stand by my remark about your kind of graphic link. We want all links to look essentially the same so as not to confuse the user. We want them not to take up too much space on the page so as not to get in the way of the content.

Your links in the html should be text links. We can put graphics in a link with CSS. Only real content should go into the html. Decoration, presentation, layout are matters for CSS, not html. Separation of concerns ... repeat that 10,000 times please, or until you get it.

This isn't a bad approach and I encourage you to keep working on putting your content, marked up semantically, into html. Later! Gotta go!

Well, I'm stumped because I only understand how css can change the look of text and the way a site is laid out, not how it can insert images as required. So I'll have to take your word for it.

For now, I've left the graphic links where they are... mainly so I don't lose them! I'd get into a discussion about the possibility of making all text links look the same but having graphics under some of them, but you'll go on about content not presentation again, so I won't.

I'm pressing on with content:

Pared down the home (index) page.

Moved some of it into a "support us" page (replacing "donate" page)

Made a "contact us" page.

Updated "diary" page.

There is now something in all the pages for the six navbar links (although some need more work and there are three more links pages to make - I'm putting this off until you tell me I'm along the right lines with the links, as there are loads of them and I don't want to waste time repeating mistakes).

Still have to create the cartoons page but not sure how to code it with only content in mind.
It's a series of thumbnails with titles above/below opening into bigger pictures - what format of code should I use for this?

Likewise the newsletters page/s
(I'd like this to be thumbnails of each front page with issue number above/below opening into the pdfs (which will also include the front page of course!) or... a list of links with the relevant front page appearing somewhere as you hover over the links - I know - that's presentation!) But what should I put there for now?

Also the photos page... (gallery.html)

Poetry page - which is links at the top of the page sending you to the beginning of the relevant poem further down the page (links with each poem back to top), or it could be a set of links with each poem opening into a new window.

I'm not trying to be awkward (honest!) but what I really don't understand, especially in relation to the last three pages above, is what I need to put in the html basics which will allow us to decide later how it's actually presented - surely the html required will differ depending on these later decisions - if each poem is going to open into a new window f'rinstance, then I'll need to make a separate html file for each one, won't I?

So, I'll just carry on making the bits of the pages I know I can do uncontroversially, and will wait for some feedback before I tackle the rest. At least I know how to get a page validated now!

Cheers

Genny

Yes, but that's behaviour, which is a third kettle of fish.

What we're trying to suggest is you don't think "right, I want this title to be big and pink, and my links at the bottom, and a picture there, and a border here, and my contact info there, which will be blue and small".

Ta, TPH. Yeah, I do understand the basic principle now - that doesn't mean I can easily put my design ideas out of my mind, but I am trying (very!) to do it the right way and to set out the html for meaning alone.

What I'm asking for at the moment is practical advice about how to set out the content (and in particular cartoons, photo galleries, poems, newsletter index) in html so it doesn't make extra work later on. Is this the right place to ask for this advice or should I be finding it myself elsewhere?

For instance, I've started making a photo gallery page, with thumbnails which will link to the various photo sets in flickr. Should I just be marking these up as straight a href links to the relevant sets for now and saving the images in another file for possible use later on, or should I be doing it another way?

As far as the third kettle of "behaviour" is concerned, I am now totally confused.

Cheers

Genny

It's a part of the specification and you can look it up. Basically any block element can use a graphic image as it's background. All you really have to know for now is that this is a fact. The syntax you can learn when you come to do your styling with CSS, but for example if I wanted a block element to have a background based on my picture "sky.jpg" the rule might look something like this:

background: #ccf url(sky.jpg) no-repeat;

which says "use a background color with the hex code #ccf (a blue color) and a background image named "sky.jpg" but don't repeat the background graphic." There are many other things you can do for backgrounds with CSS and it is much much more flexible in this regard than the img tag in html.

Use a graphic directly in your html when it represents a part of the actual content of the page. If it doesn't, but is meant as decoration for something, put it in your CSS.

Once again I remind you that when you are coding your html you should forget all about how it will look and concentrate only on what your content actually means. Yes, we might have later to add some few grouping elements to that html, but get it coded semantically first and worry about that later.

That doesn't make any sense because merely removing the html tag that points to them will not affect the image itself in any way, as it is just another file on a disk. If you want to be sure not to lose them back them up to another disk or a tape or a jump drive. You should be doing that anyway with everything.

You make extra work for yourself later (and a whole lot of it) when you mix html with presentation.

Well on a gallery page the content is the pictures, so of course then the pictures go in the actual html because they are part of the meaningful content of the page. Best actually would be to put links to small versions (thumnails) of the pictures on your page in an unordered list and make each thumnail a link to another htm pages that display the large image. That's a perfectly appropriate use of images in html.

The rule is straightforward: Anything that is part of the meaningful content of the page goes in the html, anything that is merely decoration goes in the CSS.

Thanks for that.

The reason I was asking about the photo gallery page is that although the content IS the pictures, the pictures are all contained in a number of flickr sets. There are way too many to want to put them on the website, but we do want people to be able to go and look at them from the website and see what galleries there are etc. I just made a thumbnail to represent each set.

So how do I do links to thumbnails that also link to the photo sets? People won't have to click twice to get there, will they?

What I did was this:

WPJF in Wrexham 2007

But I'm sure that's not what you mean, even apart from the fact that it's not in an unordered list.

Think I've got nearly all the html marked up now - time to go and learn about css.