I was thinking about redoing my website again (you may have noticed my signature states that my site is under construction) but I'm not convinced that HTML, frames and tables is that best way to go about it. I will probably use some flash elements if there is a call for them but other than that I'd prefer not to have stuff embedded in the page.

What do you suggest for a fast, functional, dynamic website? It doesn't need to be super-dynamic, just load pages in sections I specify, etc.

I'd avoid tables and frames.

Go for XHTML and style it using CSS, keeping content separate from style. Fast, clean and reliable, plus it will be accessible and easy to update.

Regarding the dynamic side of things I'd personally use PHP, but it depends on which languages you know.

I'd avoid tables and frames.

Go for XHTML and style it using CSS, keeping content separate from style. Fast, clean and reliable, plus it will be accessible and easy to update.

Regarding the dynamic side of things I'd personally use PHP, but it depends on which languages you know.

I definitely want fast, clean and reliable. That's why my current site is so basic :P

I am fairly well versed in ActionScripting and I've dipped my toe into the waters of JavaScript but other than that I've no experience. I remember using CSS many moons ago but I can imagine it's evolved a fair bit since then.

Do you know of any good tutorial type sites I could learn from? I'm sure I could find a hundred on Google but being pointed in the right direction would be much appreciated :)

Oh, and Flash isn't just annoying.

Do you know of any good tutorial type sites I could learn from?
XHTML & CSS sites? If so I've got a few helpful ones bookmarked.

XHTML & CSS sites? If so I've got a few helpful ones bookmarked.

If you'd be so kind, that'd be great. :)

http://www.w3schools.com/xhtml/
http://www.w3schools.com/css/
There are always the W3School tutorials to get started, I found these very helpful when learning the ropes.

http://www.alistapart.com/
Variety of articles surrounding web standards. Loads of good topics on XHTML and CSS here

http://www.albinoblacksheep.com/livedesign/
Goes through the live process of styling a site using CSS, layout without the use of tables

http://www.barelyfitz.com/screencast/html-training/css/positioning/
Explains the different layout properties in CSS

http://www.timvansas.nl/bookmarks/
Whole load of CSS & XHTML bookmarks broken down into categories.

I'd also recommend reading 'Designing with Web Standards' by Jeffrey Zeldman.

Hope these help! :)

EDIT:
Check out http://www.csszengarden.com/ too. It shows the power of CSS. Each design uses the same HTML file and is styled in thousands of different ways using CSS.

I'd avoid tables and frames.

Go for XHTML and style it using CSS, keeping content separate from style. Fast, clean and reliable, plus it will be accessible and easy to update.

Regarding the dynamic side of things I'd personally use PHP, but it depends on which languages you know.Yeah I agree with Sel. XHTML isn't too different from HTML, so you shouldn't have problems if you start using that. Converting HTML to XHTML might be more work though.

And CSS is a must for formatting, specially big websites. I never got the hang of using it to replace tables though, so I still use those.

And I love PHP, it's the most user-friendly language I've ever seen, and it makes dynamic websites sooooo easy to make. :)

So, what's the best way to apply this knowledge?

I've always made my websites in Notepad by typing everything manually. I found that things like Frontpage and Dreamweaver fill the source with unnecessary rubbish, although I'm not sure what impact that has on the end-user's experience.

Is it a good idea to do it all in Notepad?

Thanks very much for all the help, guys (especially Sel).

I'll have a play about with it all and see what I can come up with.

Expect to see this thread bumped in a couple of weeks (read: months). ;)

I've found HTML very awkward over the years, which is why I've been trying to learn PHP.

To create a HTML website I have to tpe in all the code. With PHP I could make something that does part of it for me. While the initial process would take longer, time would be saved overall. Also, PHP includes/inserts whatever they are are extremely helpful. If I change the design on a site I only have to change 1 file whereas with HTML I'd have to change every single one, which is annoying.

I know some css, it's just most of the time I can't remember it. It doesn't take long though for a quick search on google to add what you want. I'm not familiar enough with css though to use it fluently.

If I change the design on a site I only have to change 1 file whereas with HTML I'd have to change every single one, which is annoying.

CSS can do that, too, right? As I understand it, PHP requires a PHP enabled server and stuff which I can't guarantee I'll always have.

I'm going to look into XHTML and CSS and see if I can do what I need with that, then take it from there if I can't. If I need to learn PHP I will but if I can avoid it for now it will make XHTML and CSS all the easier to learn.

CSS can do that, too, right? As I understand it, PHP requires a PHP enabled server and stuff which I can't guarantee I'll always have.Oh, yes. But correct me if I'm wrong, it can do it in a different way.

With PHP you can link to a text file to include that where the tag is. So for example, the header part of your website. Then you may add a new section to your site and need a new link under the header. With normal HTML you'd have to edit all the files but with PHP you can just edit that text file. I think with css you can change the design by changing the image links iin the file, among other things but I think you'd be hard pushed to change it in the same way as above (again, correct me if I'm wrong as I don't know all that much about this).

I think you've confused me but I could be wrong. :p

My understanding is that the CSS file holds the information on layout, colour schemes, images, text settings, that sort of thing. What you've described seems to be the ability to update the menu on every page of the site from one file.

Can both do both?

On the old Concentration Camp website I used a flash file for the menu so I'd only have to update one file each time. If I can do that with script instead that'd be awesome.

I think you've confused me but I could be wrong. :p

My understanding is that the CSS file holds the information on layout, colour schemes, images, text settings, that sort of thing. What you've described seems to be the ability to update the menu on every page of the site from one file.

Can both do both?No I was talking about PHP then, I meant I don't think css can change the site in that (#2) way but the way it can change the site is as you said in the (#1) way.

I'm confused now:confused::p

*brain asplodes*

This forum pretends to be written in XHTML 1.0 but it does not validate against the XHTML 1.0 schema (http://www.w3.org/TR/xhtml1/).
Is vBulletin that badly coded or are these modifications made by someone?

Does it really matter? I mean you can make a site not "valid" XHTML by something as insignificant as missing out an ALT tag or using a character instead of an HTML entity. No browser in the world will complain, it will render perfectly, and nobody will notice unless they specifically check for it. Making it "compliant" is nothing more than an exercise in showing off how clever you are.

I see compliance as an exercise in self-discipline.

From what I've read so far, XHTML is almost identical to the way I write HTML. I always use lowercase tags and nest properly, for example. It's just a few syntax changes from what I can see.

I must admit, at this stage I'm not certain of the benefits of XHTML over HTML other than its apparent desire to encourage web designers to tidy up their script a bit. No harm done.

No, I do like XHTML. But I don't like people saying things like "YOU'RE NOT COMPLIANT THEREFORE YOU'RE A BAD WEB DESIGNER" if I capitalise a tag. It just seems a little... petty. Whatever happened to making languages flexible?

Like Spanglish? ;)

So, I think I'm as good at XHTML as I am at HTML, now. The only thing I'm not sure that I'm understanding is the DTD stuff.

If I use CSS it's strict.
If not I use transitional.
If I'm using frames I use frameset.

Is that it?

Or, it's IE. I was pretty sure IE didn't follow the standards properly for HTML.

*sigh*

All browsers know how to deal with correct HTML. However, if it is incorrect, the browser has to repair the document, and since not all browsers repair documents in the same way, this introduces differences, so that your document may look and work differently on different browsers.
No, I appreciate that. I'm not talking about overlapping tags or not closing links or using tags that just plan don't exist. I'm talking about using an em dash rather than an HTML entity or not capitalising a tag, or leaving out a tag so useless it was optional until XHTML. There isn't a browser in the world that couldn't handle those things, not least because most of them are correct in every other version of HTML. Things like that are not a problem for any competently written browser and I can't help feel it's just some guy in the W3C who prefers it that way enforcing it. I mean, C doesn't care if you add in or remove some whitespace here and there. PHP lets you get away with blue murder and still runs with no problems. So why should XHTML dictate how I format my code to me?

You never heard of blind people browsing the web, did you?
Do blind people need to know "here is an image that does nothing but spaces out the page" or "here is an image that makes the menu look a little nicer without signifiying anything"?

Using images as a spacer should be forbidden by law. It´s very bad style. Don´t trust 'webdesigners' who do that.
Oh, I quite agree. But you know what I mean -- some images really don't need captioning like that.

The problem is that if you set your DTD to be XHTML and then use formatting that is HTML, the browser might treat it correctly, but as its not trying to read HTML it may well not. Its like saying to someone that is spanish but speak fluent english 'I'm going to speak to you in spanish' but then not doing so. If you leave the DTD out entirely then your just going to send the browser into quirks mode which is even worce. But if you say you going to stick to a standard I think its important you do stick to it. If your going to leave stuff out you may as well label them all as HTML transitional. It gets the job done.

Like Spanglish? ;)

Andrew, it's worth following the spec anally just to get into the habit of doing things correctly for those few occasions when they do actually mess up the page. You have to keep in mind that specifications exist for a reason. Who's to say XHTML 2.0 won't define a new meaning for tags that use uppercase for example? If you follow the spec exactly now, you can guarantee that your pages will still work in the future.

Also, browsers that can properly identify and display XHTML as XHTML such as firefox no longer try and fix your errors for you. If you miss out an alt tag, the page simply won't display and gives you an XML parse error instead, like browsers always should have done.

Vader, here's an example of what StarWorms was trying to explain:
http://katbox.iconrate.com/includeexample/
I've attached the files so you can see how the header and footer are defined in seperate files, and each of the content pages simply includes these at the top and bottom.

This means that, firstly, you don't have to copy and paste the same chunk of code into the start and end of each page you create, just the 3-line include statement. Secondly, your content pages are much easier to read and code as they only actually contain the middle content of each page. Thirdly (and most importantly), if i decided to add a 4th page, i would simply have to edit the header file once to add the link to the menu, rather than having to edit every page i'd made so far.

Conversely you can do it the opposite way round, having one "index.php" file that contains your basic page template and including each content page seperately using menu links such as "index.php?page=1" and "index.php?page=2". Just make sure you aren't arbitrarily including whatever address is tagged onto the end of the url, as it is a huge security flaw.

I've made some quite complex pages using this second method, in which multiple parts of the page load different content depending upon what link is clicked or what elements of a form are selected.

Andrew, it's worth following the spec anally just to get into the habit of doing things correctly for those few occasions when they do actually mess up the page. You have to keep in mind that specifications exist for a reason. Who's to say XHTML 2.0 won't define a new meaning for tags that use uppercase for example? If you follow the spec exactly now, you can guarantee that your pages will still work in the future.
Well, that's true, but it seems like it's not inkeeping with the philosophy of the internet. The best thing about the internet, indeed, the whole point of the internet, is that anyone can put anything they like on it (within the law), and HTML was always a flexible enough language to allow for that. Then we got PHP and MySQL, which were again both fairly forgiving and simple languages and ideal for people to knock up pages in fairly quickly, and yet all three languages had a strong structural backbone you could stick rigidly to if you wanted to do something advanced and make damn sure no browser could mess it up. (Although Microsoft dealt a sharp blow to that idea by writing a browser that would, by design, mess it up regardless.)

Now this strict XHTML markup language is coming into favour and it seems to me that throwing up a parse error if you make the slightest mistake is going to take web publishing out of the hands of the masses and give it exclusively back to the nerds. I realise old-style HTML is still supported by browsers, but it still feels like a step inthe wrong direction to me.

Also, browsers that can properly identify and display XHTML as XHTML such as firefox no longer try and fix your errors for you. If you miss out an alt tag, the page simply won't display and gives you an XML parse error instead, like browsers always should have done.
I dispute that too, much more strongly, for much the same reasons -- if browsers had done this from the start then many people simply wouldn't be -- wouldn't ever have been -- able to make webpages, and that would have made the internet a far poorer place.

The word Internet is a proper noun and should be capitalised in all instances.

Adhering to one standard minimises the risk of confusion.

Furthermore, one of the reasons I hate the Internet so much is that everyone and their grandmother is capable of building a webs(h)ite these days. Look at the quality of the sites made by idiots. It's horrible and should never have been allowed. XHTML is a very good thing in my eyes as it demands that you write your script properly. If you make one tiny mistake then it's easy to fix. If you made a whole bunch of mistakes then you need to learn how to script a website a bit better. Where's the beef?

Furthermore, one of the reasons I hate the Internet so much is that everyone and their grandmother is capable of building a webs(h)ite these days. Look at the quality of the sites made by idiots. It's horrible and should never have been allowed.
Well, now you're confusing the ability to write good content with the ability to write good code. There are people who can code like the very devil but can't write English to save their lives, and there are those who have loads of good writing talent but can't wrap their heads around source code of any kind. I quite agree that the Internet would be better off without most of the sites it has now, but those sites aren't always -- or even usually -- the ones with the most rigorous HTML code behind them.

Every month or so someone shows me that list. It's particularly annoying, because at least a dozen of those errors aren't mine -- they're Google's. And I'mnot going to fix it, simply because I'd much sooner redo the whole CMS, which is woefully out of date and underpowered compared to what I'd make now.

That HTML code which you just posted came from Google. Any mistakes in it were made by Google, and not me. Okay, so I didn't correct them either, but that is because I trusted Google to write correct code and because it worked, so I didn't think to check over it too thoroughly.

What part of that was not obvious?

I trusted Google to write correct code.

That's just lazy.

It may or may not harm your public's experience. That is almost a side issue. The fact is that you should write your webpages properly, just like you would with a book. You'd not start omitting words or erroneously capitalising them to save time, would you?

What you're saying seems to be akin to saying that "txtspk" is fine because the recipient will probably be able to work it out anyway.

Now, if you please, I'd like this thread to be helpful to my learning process as opposed to spammed up with a debate over whether or not you should write webpages properly. I believe you should and have since I began writing HTML in Notepad many moons ago. XHTML is a good idea. If you don't like it that's fine, but please stopping littering the thread with arguement.

Now, keeping on-topic (and yes I realise the topic sparks debate over whether HTML is inferior, whether people should adhere to XHTML , etc), you may like to know that I think I understand what a div is. And I don't mean Andrew. ;)

What you're saying seems to be akin to saying that "txtspk" is fine because the recipient will probably be able to work it out anyway.
To a point, yes. Txtspk is OK in text messages. Spelling mistakes are OK in quick memos or things written by dyslexic people. A professional author shouldn't do these things, but if the general populus do from time to time we shouldn't get angry; we should just read it as best we can and point out the error (if there is one) so they can learn from it. I'm not saying we should write bad code and think it's OK. I'm saying we shouldn't start some kind of zero-tolerance policy towards mistakes. I mean, mistakes are inevitable... If you write an HTML page and it has an error in, that's easy to spot and easy to fix and that's not a major problem, but if my Dad did that he might never find it, and that's a lost webpage. Or, if you wrote a vast, complex PHP site and it could throw up some invalid HTML but almost always didn't, it could be a year before you realise that there is an error, and another month before you can fix it.

Seems to me that the best way would be for the browser to flag that there is an error, like they (mostly) do for Javascript, but nonetheless display the page as best it can. I'm sure some people would be lazy about it, but their pages would have little yellow exclaimation marks at the bottom and they'd get fired if that happened to much because it presents a poor image and indicates shoddy work.

If you write an HTML page and it has an error in, that's easy to spot and easy to fix and that's not a major problem, but if my Dad did that he might never find it, and that's a lost webpage

If your dad used an XHTML validator then the error would be easy to fix. The validator would pinpoint the exact location of the problem before it went live.

Besides which, I am taking a professional approach to this project. It isn't commercial but I feel it is important to design websites to a professional level. It comes back to the self-discipline thing I mention a while ago.

I don't want errors in my wepages, so using a language which disallows them is fine by me.

Oh, and for the record, txtspk is never OK. You can easily fit a good paragraph in an SMS and predictive text makes this faster than fumbling around with acronyms and abbreviations.

Don´t you think it is helpful for you to understand how (X)HTML works, if we discuss this way?

I understand how it works just fine. I agree with you, evilworm, that it's a good idea well implemented. All this bickering over whether it's worth it or not is just tedious. I guess it's interesting to see how webdesigners disagree on things, though. I say "I guess" because I don't actually think it's any more interesting than 2 mechanics arguing over who makes the better torque wrenches.

Andrew, you are giving no useful input to this thread. If you'd be so kind as to refrain from whinging about XHTML in this thread I'd be most appreciative. We've heard you opinion and disagree - isn't that enough?

The ironic thing, Andrew, is that your apathy website is riddled with lazy scripting, yet you're so forcefully adamant that your opinion is correct.

Please either:
a.) Split this thread into one about XHTML being overly fragile and one about how I can learn to write XHTML, CSS and eventually PHP, or

b.) Just shut up!

Oh, and for the record, txtspk is never OK. You can easily fit a good paragraph in an SMS and predictive text makes this faster than fumbling around with acronyms and abbreviations.
I know you want this debate to end, but I'd like to point out out few people seem to complain about the shortened sentances of the telegram / graph era. Text message is only a modern version of that after all, trying to type a proper sentance with only one key for puncuation is very tricky indeed. I for one can't get my head around 'predictive text'.

Andrew, you are giving no useful input to this thread. If you'd be so kind as to refrain from whinging about XHTML in this thread I'd be most appreciative. We've heard you opinion and disagree - isn't that enough?
Hey, you've been giving as good as you've got. If you don't want me to argue with you then don't you argue with me. Don't sit there bickering and then suddenly burst into rage half a post later. It makes you look a little unstable.

Well it was fine up to a point.

I gave my final thoughts on the matter and asked you to join me in not arguing about it. It's not instability, it's train of thought.

You don't think webdesigners should be pedantic about how they write their script, I do. That's all that needs to be said on the matter so, again, can we please drop it?

Now, let's get back on topic, shall we?

I'm progressing reasonably well. I've manage to create a layout with CSS and I have to say it's remarkably simple to do. Many thanks to Sel for pointing me in the right direction. :)

Now, though, I can see where PHP will come in handy. I'm going to stick with this for now until I've got everything just right but after that I'll be dabbling in PHP to make the site more dynamic.

Hopefully I can realise my goal of making my website a worthy contribution to the community. :)

Update!

I've got 2 styles laid out now. The second is a very similar layout to the first - a few tweaks and changes here and there. It's more of a variation. Anyway, have a goosey:

Style 1 (http://vader.wurmz.net)
Style 2 (http://vader.wurmz.net/indexb.html)

Both are work in progress. The first will eventually end up looking a bit like Concentration Camp did. :D

Fine, I am double posting.

I can't see why my site looks all of teh sexeh in FireFox but totally gashmotron in IE.

It's clearly the CSS, but WHY?

http://vader.wurmz.net/ccstyle.css

My brain hurts today.

I think they would both look better if all the background moved when you scrolled, it looks a bit odd the way it is now.

How do you mean?

What res are you using?

Which background? The waves or the seabed?

Start off here:
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fvader.wurmz.net%2Fccsty le.css&usermedium=all

You want "font-weight: lighter;" not "font-weight: light;", and "font-size" rather than "text-size".
The warning are only warnings, fix them if you want but there is really no need to.

You also have a few XHTML errors, but they are quite easy to fix, apart from the fact the <embed> tag isn't valid XHTML, and isn't understood by all browsers. There's no real way around this if you wish to have Flash content in your pages (i've managed to get it to validate using Javascript to load the Flash up into the DOM, but it's kinda cheating). What i would say is that the <object> tag is the valid way to do it, but IE doesn't understand it, so generally use both and you have all the browsers covered, but it still won't validate. This is one of the few situations in which you can't write valid code without sacrificing useability. Personally, i'd just use an animated GIF as the Flash is basically just that anyway.

For the other XHTML errors:
Put a slash before the closing tag of your content-type meta, ie <meta ..... />.
Make "focus" a class rather than an ID, ID's are meant to be used once, and refer to a specific element on the page.
Your email link wants to be "mailto:vader@wurmz.net?subject=I+have+found+abug+o r+have+a+suggestion!" or "mailto:vader@wurmz.net?subject=I%20have%20found%20 abug%20or%20have%20a%20suggestion!"

Heh! Not too bad considering I hardly used any references and did it all in Notepad :)

So, it's "font" for the actually font properties and "text" for formatting of the copy itself? I must have just been tired or something, anyway, because there's one instances of that and a few instances of getting it right.

As for the Flash content, it's almost the site's signature. It's how Ccamp was so it has to stay. I'll have a look at the <object> tag, though. I didn't know it existed so I've not used it before!

Now, I tried using p.focus to define a class but that side of things didn't really sink in too well and I can't figure out how to use it to make the nice borders on the content panels.

Anyway, the CSS is now valid for ccstyle and apart from the focus issue and embed stuff the XHTML seems valid. So, once I figure those out I'll be cookin' on gas! :D

Edit:
With regards to using a gif instead of the Flash, can I get a gif to tile across the top of the screen? This is all a bit much for my weary brain today but I am determined!

Edit:
With regards to using a gif instead of the Flash, can I get a gif to tile across the top of the screen? This is all a bit much for my weary brain today but I am determined!

Yes, you can.

The background properties in CSS are useful for things like that:

background-image: url(filename.gif);
Self explanitory.
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
You can tile an image in both directions (repeat; useful for tiled backgrounds), just one (repeat-x or repeat-y; useful for a fake sidebar or something without the common really-huge-image trick) or not at all (useful for a watermark or something).
background-position: [stuff];
This one's great. You can say "left", "right", "top", "bottom", "center", "left center", "top center", or whatever. I think you can even specify percentages, and it'll position it so that 0% is the left/top and 100% is the right/bottom. You'd want to use a reference, but these are the properties to play with.

Between those you can get almost any effect yo could ever want.

Have you seen my site or read my last post?

The site has animated waves at the top. I must use GIF of SWF for this, as far as I know. I am fully aware of how awesome PNG is.

apart from the focus issue and embed stuff the XHTML seems valid.

I know the XHTML is invalid. I'm looking at it now. If you read my post you'll see the trouble I'm having.

Stuff

Hmmm. As far as I'm aware, I can only apply the background-image stuff to div and body. If there's nothing in the div then there'll be no background, right?

So, what's the best way to apply this knowledge?

I've always made my websites in Notepad by typing everything manually. I found that things like Frontpage and Dreamweaver fill the source with unnecessary rubbish, although I'm not sure what impact that has on the end-user's experience.

Is it a good idea to do it all in Notepad?Dreamweaver will not fill the source with unnecessary rubbish if you don't tell it to. If you stick to the Code view it's a lovely editor with syntax-colouring, tag assistance, handy reference/validator, built-in FTP and a lot of other neat features. But you can still use Notepad, it's all down to personal preference.

Frontpage however... DO NOT EVER USE FRONTPAGE!!! I've seen work with Frontpage, and not only does it fill your code with unecessary rubbish, it uses a whole lot of Microsoft-specific tags which only work on IE and serve no good purpose whatsoever but to annoy you. I mean, Dreamweaver even comes with a feature to clean up crap code from Frontpage/Word/etc.
It may or may not harm your public's experience. That is almost a side issue. The fact is that you should write your webpages properly, just like you would with a book. You'd not start omitting words or erroneously capitalising them to save time, would you?Actually you'd be surprised how many books I've seen where the writer uses their own made-up words or no grammar whatsoever (no uppercases, no ?!., etc.) and passes it off as "their own writing style". But that's me just being off-topic :p
Hmmm. As far as I'm aware, I can only apply the background-image stuff to div and body. If there's nothing in the div then there'll be no background, right?Wrong. You can make a div have any size and position you want without needing to have any actual text in-between its tags, and the background will fit the div's properties. To make a div with the water waves, you'd just have to make it have the width of the page and positioned right on the top, and make the GIF its background.

Edit: Oh, and as for getting Flash content to validate, there's an article about it here: http://www.alistapart.com/articles/flashsatay/

Wrong. You can make a div have any size and position you want without needing to have any actual text in-between its tags, and the background will fit the div's properties. To make a div with the water waves, you'd just have to make it have the width of the page and positioned right on the top, and make the GIF its background.

Hmmm, I tried that:

div#waves {
width:100%;
height:80px;
background-images: url(waves.gif) repeat-x fixed top;
}

...sort of thing. Am I missing something?

If you're gonna put all the background properties into one, I think you have to use background:
And I usually have problems getting that to work so I'd split it like this:

background-image: url(waves.gif);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: top;

http://vader.wurmz.net

I can't get rid of the margins on the right :(

div#seabed {
background-image:url(seabed.png);
background-repeat:repeat-x;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
width:100%;
height:50px;
position:relative;
left:-10px;
bottom:-22px;
}

Edit: evilworm2, did you delete your posts? :P

Umm, why are you using negative values for left/bottom?

Umm, why are you using negative values for left/bottom?

To make the image line up with the edge of the screen. Negative values are fine for relative positioning, aren't they?

Hang on... is the due to margins in the body? Can I counteract that by adding margin properties in body? Hmmmm...

Edit: no.

Obviously.

Oh, right.

Erm, you were being helpful I just felt like you'd simply tried to validate the code for me and not actually looked at what I ws trying to do.

My apologies if I offended you. If you'd like to help then I'd very much appreciate it but I understand if you do feel offended. Please bear in mind that my head hurts today and I've been frustrating myself by fumbling madly with a keyboard in an attempt to write a valid website :p

If you want it to be positioned in the bottom left of the screen, you want absolute positioning. Set left and bottom to zero. The "margin" on the right is probably there because the width is 100% and it starts 10 pixels off the left.

Relative positioning is for things that are drawn inline, but offsett, say, for links that jump up when you hover over them or press down when they're clicked.

Hmmm, okay. That makes sense.

So, how do I get the image to span the entire width of the screen regardless of the resolution/window size people use? Can I use maths? For example 100%+10px? Hehe.

Edit:No, wait, I think I'm figuring it out.

You have no idea how much I wish that was possible. I end up using tables and feeling bad about it, but there's no other option for some things.

100% should do that, though, surely?

100% should do that, though, surely?

Yeah, it does. I had neglected to remove the margins from the body. It now works as it should. :)

Right. I just wanted to tell you that your code is still invalid.

Maybe it´s just me but i felt offended indeed. I accept your excuse.

That´s why i wanted to tell you, where in your code the errors are. To make it easier for you to fix them.

Don't get me wrong, I appreciate the help but I'm using validators as I go along anyway. I'm watching zombie films tonight (just taking a break) so there's no progress other than what I did this evening.

Again, I apologise and your help would be appreciated should you wish to offer it. :)

Hmmm, I tried that:div#waves {
width:100%;
height:80px;
background-images: url(waves.gif) repeat-x fixed top;
}...sort of thing. Am I missing something?http://vader.wurmz.net

I can't get rid of the margins on the right :(div#seabed {
background-image:url(seabed.png);
background-repeat:repeat-x;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
width:100%;
height:50px;
position:relative;
left:-10px;
bottom:-22px;
}Hey Vader, I can help you here.

You can remove the empty waves and seabed divs, by making the backgrounds part of the head and body tags themselves.

Also, you can have backgrounds fixed to part of a page. Add the following to your CSS...head {
display:block;
height:79px;
width:100%;
background:#2F397E url(waves.gif) repeat-x;

position:fixed;
z-index:20;
}

body {
padding-top:79px;
padding-bottom:50px;
background:#2F397E url(seabed.png) repeat-x bottom;
}

h1 {margin-top:0;}
li {z-index:10;}
I'll explain what some of the CSS means.

The head tag can be displayed on the screen with display:block, and the tag has been fixed to the top of the page, so the background is now fixed. Also, the z-index places it above the body in order of appearance, so content will travel below it.

The body tag uses padding-top to keep the content on the screen above the background, and padding-bottom to display the background at the bottom.

h1 has its top margin removed to keep it in the same spot, and the li's have a lower z-index than the head tag, to ensure that they don't appear above the background because they have been positioned.

CSS can be very useful, though it can also be time consuming to get it to work at times. Once you get used to it, CSS can give you a lot of flexibility and change how you think about designing pages.

One more thing, there's a free CSS editor called Topstyle Lite (http://www.bradsoft.com/topstyle/tslite/), which can help you learn CSS and gives you all the different options that CSS can use.

I decided to "fix" the problems in your index page and style sheet, as i figured you could look at the code and work out (with explanations) what the problems were better than with explanations alone.

Menu positioning
The menu was off because lists have a left padding by default, and the default bottom margin of the H1 title was pushing it down. I removed both of these, and with them the need for relative positioning.

"focus"
I made focus a class selector rather than an id selector in the CSS, and applied it to the relevant div's. You should be able to follow how i've done it by reading the code - classes just start with a period rather than a hash, and are used with the "class" attribute rather than the "id" in the HTML element. I also gave the <p> tag some margin to keep the contents from the edges of all borders of the box, and in line with the panel title.

CSS
I cleaned up your CSS file a bit, got rid of the validation warnings (althought it was fine with them there, i'm just picky..), and removed the element-specific parts of the selectors as they didn't really need to be there. To recap; id selectors start with a #, class selectors start with a period (.), and tag selectors are just the tag name.

HTML
I also cleaned this up a bit (just to make it a little more readable) and removed unnecessary <div>'s that were being used as style wrappers for a single element, where the style could just be applied to the element itself (title and menu). I removed some space above the title and below the menu as well, purely because i thought it looked better. If you disagree, just add top margin to the title and/or bottom margin to the menu.

If there's anything i've done that you can't figure out from the code, just ask. Also, it might be an idea to use PHP to include the same header and footer on every page rather than the copy/paste method, like in the example i posted earlier. If you need any of that explaining, grab me on ICQ some time, although it's fairly self explanitory ;). Oh, and if you want a proper news system in which you can submit items on a form and it adds/removes them to/from the page, it wouldn't take too long to do and i could explain the PHP code to you.

Ed Webb
Ed, i hadn't even considered styling the <head> before. That's genious!

Ed Webb
Ed, i hadn't even considered styling the <head> before. That's genious!

Found out how to do this a few years ago, the <html> tag can be styled as well. :)

In fact, IE doesn't display <head>, which I've just found out, but does display the contents of <html> with padding...
html {
padding-top: 79px;
background: #2F397E url(waves.gif) repeat-x;
}

body {
padding-bottom: 50px;
background: #2F397E url(seabed.png) repeat-x bottom;
}

... so while it doesn't fix the position of the waves, I personally think it looks better, and the CSS is a lot easier to maintain.

I like the cleaned up version of the html and css code, M3ntal. It is readable, and easy to make a template from for future designs.

The one thing I would change is the h1 in the html. Because it's the only one on the page, you can use <h1>...</h1>, though the id does give some flexibility if the title changes.

Apart from that, Vader's now got himself a webpage for the 21st century. ;)

Hmm.

I only just woke up and I'm yet to look over all of this. Well, I've skimmed over M3ntal's files and I must admit they are easier to read. The only thing I noticed wrong was the omission of the flipper class. I need that in there for the flags/graves/maps pages, I think.

Ed: Just going from what you've said (I haven't tried anything yet - I need coffee first ;)) it sounds like the site content will scroll but the waves and seabed will be static. The effect of this would be that text scrolls over the waves rather than with them. The way it looks and behaves at the moment (despite all the minor errors in the code - bear in mind this is my first XHTML and CSS project ever) is how I'd like it. If I can achieve that with cleaner, more efficient code then I'd like to. :)

M3ntal: I tried adding you to ICQ but my "Add" button in Trillian doesn't seem to do anything. I think I have you on there (it might be msn) but if not and you've not received a contact request then please send one to me. If I have you msn I'll just hassle you on there. Hehe.

Again, cheers guys. It's nice to have some support in learning this stuff!

I decided to try and revamp one of my sites. However I have tables within tables and even sites which have some useful information about doing tables in css make it confusing.

Is there a site out there which has a table of the properties that can be used in css for tables?

Is there a site out there which has a table of the properties that can be used in css for tables?


font-family (Schriftart)
font-style (Schriftstil)
font-variant (Schriftvariante)
font-size (Schriftgröße)
font-weight (Schriftgewicht)
font-stretch (Schriftlaufweite)
font (Schrift allgemein)
word-spacing (Wortabstand)
letter-spacing (Zeichenabstand)
text-decoration (Textdekoration)
text-transform (Text-Transformation)
color (Textfarbe)
text-shadow (Textschatten)

text-indent (Texteinrückung)
line-height (Zeilenhöhe)
vertical-align (Vertikale Ausrichtung)
text-align (Horizontale Ausrichtung)
white-space (Textumbruch)

padding-top (Innenabstand oben)
padding-right (Innenabstand rechts)
padding-bottom (Innenabstand unten)
padding-left (Innenabstand links)
padding (Innenabstand allgemein)

border[-top, -right, -bottom, -left]-width (Rahmendicke)
border[-top, -right, -bottom, -left]-color (Rahmenfarbe)
border[-top, -right, -bottom, -left]-style (Rahmentyp)
border[-top, -right, -bottom, -left] (Rahmen allgemein)

background-color (Hintergrundfarbe)
background-image (Hintergrundbild)
background-repeat (Wiederholungs-Effekt)
background-attachment (Wasserzeichen-Effekt)
background-position (Hintergrundposition)
background (Hintergrund allgemein)

will translate soon (maybe, i am lazy)

Vader's now got himself a webpage for the 21st century. ;)

Ignore indexb and the variant style, they are not going to be used yet. The frontpage and CSS therein are both fully valid now.

Thanks to everyone who has helped up to now. Save the fireworks, the battle is yet to begin.

Oh, and despite it being valid I'm tidying the CSS up a bit, too.

Edit: 101 lines of CSS reduced to 78 and achieving the same effect :) Hooray!

Edit 2: It seems the seabed doesn't quite work if I put it in the body. If the page is shorter than the window then there is a gulf of water between the seabed and the bottom of the window. I quite like the idea of shorter pages being in more shallow water, so I'm going to do it with divs for now but I'm open to suggestions. :)

Edit 3: This is bending my mind. Plan reversed. Thinking hat on. Back to the drawing board.

Edit 4: I don't know how to get the flags, maps or graves pages to validate since I am using JavaScript. :(

Other than that I think thats those 4 pages (including the front page) valid and working with the exception of the dodgy seabed :)

Ed: Just going from what you've said (I haven't tried anything yet - I need coffee first ;)) it sounds like the site content will scroll but the waves and seabed will be static. The effect of this would be that text scrolls over the waves rather than with them. The way it looks and behaves at the moment (despite all the minor errors in the code - bear in mind this is my first XHTML and CSS project ever) is how I'd like it. If I can achieve that with cleaner, more efficient code then I'd like to. :)

Again, cheers guys. It's nice to have some support in learning this stuff!
Glad to help! It can be good fun playing with all the options in css, give it some time and it will come naturally. :)

About the waves... it is possible to have the waves fixed to the top and text scroll under it, with backwards compatability in IE, and also transparency can be added to the waves as the text passes under it. See the attached zip file for an example of this.

The css behind it can be a bit hard to understand if you want to change parts of the design in the future, so I'd suggest you only use it when you can change the css to suit your needs.

Thanks to everyone who has helped up to now. Save the fireworks, the battle is yet to begin.

Other than that I think thats those 4 pages (including the front page) valid and working with the exception of the dodgy seabed :)
A coincidence is that when I fixed the waves to the top, I unknowingly fixed the problem with the seabed by adding a background to <html>, which appears at the bottom of the page.

This gets round the problem with the height of the page, as the height of <body> can be variable, but the height of <html> will always be at least 100% of the page, just obscured by <body> most of the time.

That was a good refresher of css, haven't experimented with its abilities in a while. :)

Interesting stuff.

This works perfectly in IE but the seabed is still brought up to meet the bottom of the body in Firefox:

html {
color: #CCCCCC;
background:#2F397E url(seabed.png) repeat-x bottom;
font-family:arial, sans-serif;
text-align:center;
margin:0px;
padding-bottom:50px;
}

body {
background: url(waves.gif) repeat-x;
margin:0px;
}

Still, I like the idea of the seabed coming up to meet the bottom of the content. Short page, shallow water - it seems to fit nicely. The only problem with that is filling the gap between the seabed and the bottom of the page. :p

From what I've done, this seems to be quite a good PHP tutorial, it takes it one step at a time and there's a separate tutorial for databases. http://www.freewebmasterhelp.com/tutorials/php

Hmm... I've now set up a drop down menu which goes to thing.php?page=1

How would I display things differently on thing.php for each different page?

Edit: I think I have it cracked now.

Edit 2: lol, PHP is fun when you get it wrong. I just made it print an infinite number of hyperlinks O_o. At the moment I have thing.php?page=1. I'm trying to make it add a link...

$total = 35;
++$page == $x;
if ($page < $total) {
echo "<a href=\"thing.php?page=$x\">Next >></a>";
} else {
echo "Next >>";
}

What I'm trying to do is create a Next link on ?page=[1-34] to the next page but on 35 leave it without a link.

It seems to be the ++$page == $x; which is messing it up but using ++$page in the link just made it link to ?page=++[current page number]

Edit: OK, I've fixed it (although there was probably a better way of doing it)

maybe have the bottom just with the normal background type and a div holding the seabed that stick to the bottom of the content somehow..... meh not thought it through, time for shower.

$total = 35;
++$page == $x;
if ($page < $total) {
echo "<a href=\"thing.php?page=$x\">Next >></a>";
} else {
echo "Next >>";
}

Here, try this (i also added a "Prev" link to show the previous page):

$total = 35;
$prev = (isset($_GET['page'])) ? ($_GET['page'] - 1) : 0;
$next = (isset($_GET['page'])) ? ($_GET['page'] + 1) : 2;
if ($prev > 0) {
echo "<a href=\"thing.php?page=$prev\"><< Prev</a>";
}
if ($next <= $total) {
echo "<a href=\"thing.php?page=$next\">Next >></a>";
}

For future reference, if you want to evaluate PHP within a quoted string (like your ++$page problem), stick curly braces around it. Also, from the way you are using $page there rather than $_GET['page'] and not having any problems, it looks like register_globals is on in your php.ini, which is a huge security risk. I'd suggest adding the following line to the start of all your pages:

ini_set("register_globals", "off");

You'd not normally want to use a $_GET variable directly in your code if it is including a page either as people could just edit the URL and get it to include their own malicious script, but because i am either adding 1 or subtracting 1 to/from it before it gets used, anything other than a number would throw an error.

Here, try this (i also added a "Prev" link to show the previous page):

$total = 35;
$prev = (isset($_GET['page'])) ? ($_GET['page'] - 1) : 0;
$next = (isset($_GET['page'])) ? ($_GET['page'] + 1) : 2;
if ($prev > 0) {
echo "<a href=\"thing.php?page=$prev\"><< Prev</a>";
}
if ($next <= $total) {
echo "<a href=\"thing.php?page=$next\">Next >></a>";
}

For future reference, if you want to evaluate PHP within a quoted string (like your ++$page problem), stick curly braces around it. Also, from the way you are using $page there rather than $_GET['page'] and not having any problems, it looks like register_globals is on in your php.ini, which is a huge security risk. I'd suggest adding the following line to the start of all your pages:

ini_set("register_globals", "off");

You'd not normally want to use a $_GET variable directly in your code if it is including a page either as people could just edit the URL and get it to include their own malicious script, but because i am either adding 1 or subtracting 1 to/from it before it gets used, anything other than a number would throw an error.
I got it sorted, it's probably a more long winded version than yours but I've learnt how I did it, so it's easier understand from my point of view. I did read a little about isset and empty but barely anything to be honest.

Also, I used $page = $_GET["page"]; further up. Would that still cause a security problem?

This is what this part of the code looks like now:

<?
$page = $_GET["page"];
echo "<p class=\"title\">Page $page</p>";

--$page;
if ($page == "0") {
echo "< Previous";
} else {
echo "<a href=\"thing.php?page=$page\">< Previous</a>";
}
++$page;

++$page;
$total = 35;
if ($page <= $total) {
echo "<a href=\"thing.php?page=$page\">Next ></a>";
} else {
echo "Next >";
}
--$page;

if ($page == "1") {
echo "<< First";
} else {
echo "<a href=\"thing.php?page=1\"><< First </a>";
}

if ($page < $total) {
echo "<a href=\"thing.php?page=$total\">Last >></a>";
} else {
echo "Last >>";
}
?> I just need to sort it all into a table.

Also, is there a way I can use a variable in the title so I could make the title change to show which page it is?

Also, how do I create pages like thing.php?id=2 without using a text box, drop down box etc? In some cases I'd rather just have a link to the next page.

I don't quite understand what you mean. Which title? You already have a <p> with a class of "title" that is showing what page it is, do you mean the <title> in the head, or do you mean actually having text written rather than just a page number?

I don't understand what you mean about creating pages without a text box etc at all :(.

As for the $page = $_GET['page'], yes, that is still a risk. It all depends on what you are doing with that $page variable. If, for example, you have a line of PHP somewhere that says "include $page" or something similar, I could simply type the URL into my browser like this: "http://www.yoursite.com/thing.php?page=http://www.mysite.com/hackscript.php" and your page would run my PHP hacking script with local privileges.

I don't quite understand what you mean. Which title? You already have a <p> with a class of "title" that is showing what page it is, do you mean the <title> in the head, or do you mean actually having text written rather than just a page number?Yes, I meant in <title>.

I don't understand what you mean about creating pages without a text box etc at all :(.Well for this one I used a drop down menu...

<form action="thing.php" method=get onSubmit="return dropdown(this.page)">
<select onchange="window.location='thing.php?page='+this.value">

<option value="">Jump to Page...</option>

<option value="1">Page 1</option>
<option value="2">Page 2</option>
...
<option value="34">Page 34</option>
<option value="35">Page 35</option>


</select>


</form>The only examples of using thing.php?id=thing have been where you type a number into a box and it goes to that page. Like this:

<form action="welcome.php" method="get">
Name: <input type="text" name="name" />
Age: <input type="text" name="age" />
<input type="submit" />
</form>

I have an updates page but eventually old news will be pushed to a second page, so I'd then need a Next link on the first page but there's no need for a text box or drop down menu.

As for the $page = $_GET['page'], yes, that is still a risk. It all depends on what you are doing with that $page variable. If, for example, you have a line of PHP somewhere that says "include $page" or something similar, I could simply type the URL into my browser like this: "http://www.yoursite.com/thing.php?page=http://www.mysite.com/hackscript.php" and your page would run my PHP hacking script with local privileges.OK, I'll remove it then.

Edit: For some strange reason it now doesn't work:confused:

I get the following error: Parse error: parse error, unexpected T_BAD_CHARACTER, expecting T_STRING or T_VARIABLE or T_NUM_STRING in thing.php on line 77

Line 77 is: echo "<h1>Page $_GET[\"page\"]</h1>";

Yes, I meant in <title>.
Well, you could either do it just as you have done with the <p>:

<title>Page <?php echo $page; ?></title>

Or, if that is not possible due to how parts are being included into the page, use javascript:

<script type="text/javascript">
<!--
document.title = "Page <?php echo $page; ?>";
-->
</script>


The only examples of using thing.php?id=thing have been where you type a number into a box and it goes to that page. Like this:

<form action="welcome.php" method="get">
Name: <input type="text" name="name" />
Age: <input type="text" name="age" />
<input type="submit" />
</form>

I have an updates page but eventually old news will be pushed to a second page, so I'd then need a Next link on the first page but there's no need for a text box or drop down menu.

Haven't we already created next and prev links? Just do it the same.

Edit: For some strange reason it now doesn't work:confused:

I get the following error: Parse error: parse error, unexpected T_BAD_CHARACTER, expecting T_STRING or T_VARIABLE or T_NUM_STRING in thing.php on line 77

Line 77 is: echo "<h1>Page $_GET[\"page\"]</h1>";

Curly braces ;)

echo "<h1>Page {$_GET['page']}</h1>";

Interesting stuff.

This works perfectly in IE but the seabed is still brought up to meet the bottom of the body in Firefox:

..

Still, I like the idea of the seabed coming up to meet the bottom of the content. Short page, shallow water - it seems to fit nicely. The only problem with that is filling the gap between the seabed and the bottom of the page. :p
You could increase the height of the seabed, though it might take up a lot of space on smaller pages.

I worked out how to fix the seabed to the bottom, change the css to below...html {
color: #CCCCCC;
background: #2F397E url(seabed.png) repeat-x bottom;
font-family:arial, sans-serif;
text-align:center;
margin:0px;

min-height: 100%;
}

#wrapper {
padding-top:80px;
padding-bottom: 50px;
width:700px;
margin:auto;
}

Firefox extends the page to 100% height using min-height, and makes it longer if necessary.

If I used height for this, the background would have always stayed at the bottom of the screen, showing below text when scrolling, instead of appearing at the bottom of the page/screen.

Opera supprts min-height, but isn't applying it to <html>, which I think is a bug. IE works even without support for min-height, so for the most part it works well.

By the way, I'm using two Firefox extensions for web design, EditCSS (https://addons.mozilla.org/firefox/179/) and Web Developer (https://addons.mozilla.org/firefox/60/), both very useful for testing web pages.

On another note, I'm learning php as well, and I'm curious as to how to make templates of pages, so I'm very interested in what everyone's saying above. :)

Hmmm.

The seabed stays at the bottom in Firefox and IE now but it still doesn't seem to stretch up to the bottom of the content. Even if it did it would look messy, as stretched images do.

What I'm trying to do is insert a repeat-x of the top of seabed.png (the yellow bit - i'd crop the current image) just below the disclaimer, then tile uwsoil.png beneath that. I could do it with divs if I knew how to make a div stretch to fill empty space but alas, I cannot work it out.

I think this will be best, for now. Thank you very much for the help, man :)

What I would do is have the main page background set to uw_soil.png and have a big blue <div> with the seabed image at the bottom of it obscuring almost all of it. A big margin on the bottom would ensure there was always some soil visible.

I thought about that a few days ago, actually. I can't remember if I tried it or not. Hmmm.

You could always wrap the page up in another <div> with a blue background (which would end at the seabed image), and have the background of <html> either yellow to match the seabed, or just plain white so the seabed is the effective bottom of the page.

HELL YEAH!!! (http://vader.wurmz.net/cow/flags)

I had to fiddle with it a bit to get a significant seabed in IE. Here's how I ended up doing it:

XHTML:

<body>


<!-- Page Begins -->

<!-- Sea Begins -->
<div id="sea">

<!-- Wrapper -->
<div id="wrapper">

...

<!-- Wrapper Ends -->
</div>

<!-- Sea Ends -->
</div>

<!-- Seabed Begins -->
<div id="seabed">
</div>
<!-- Seabed Ends -->

</body>

It's a bit ugly, but it works. It's the only thing which has worked so far so I'm sticking with it. ;)

CSS (including everything which changed):

html {

font-family:arial, sans-serif;
text-align:center;
margin:0px;
}

body {
color:#CCCCCC;
background:#2F397E url(uwsoil.png) repeat;
margin:0px 0px 50px;
}

#wrapper {
padding-top:80px;
padding-bottom:1px;
width:700px;
margin:auto;
}

#sea {
color: #CCCCCC;
background:#2F397E url(waves.gif) repeat-x;
}

#seabed {
color: #CCCCCC;
background:#2F397E url(seabed.png) repeat-x bottom;
height:11px;
}

Strangely setting padding-bottom to 0px in the wrapper causes problems. It goes from perfectly fine to being about 11 pixels above the seabed.png which, strangely, is the height of the seabed. I might have inadvertantly done something to confuse things there but I can't see anything wrong :(

Anyway, I had to set it to >=1 or it looked flawed.

Edit: Forgot to mention, it's all valid apart from the JavaScript errors it's pulling up on the pages with JavaScript: Validation report (http://validator.w3.org/check?uri=http%3A%2F%2Fvader.wurmz.net%2Fcow%2Fmap s%2F&charset=%28detect+automatically%29&doctype=Inline)

Haha, funny javascript. The first one appears to be because it thinks you are trying to close the comments with "-->" and typed an ";" instead of a ">". The second one is because all attributes and tags should be lowercase in XHTML. Change it to "onclick".

The second one is because all attributes and tags should be lowercase in XHTML. Change it to "onclick".

Ah, of course.

Well I'll get round to changing that at some point.

Still, the site's looking pretty good IMHO :)

I say you should have a minimum point sheere the seabed starts, so that half the page, on the pages witl little text, would remain blue instead of being covered up.

The point is that if there is little text, the water in which it lives is shallow.

The point is that if there is little text, the water in which it lives is shallow.
I know. I'm jsut saying that it doesn't look that good.

Okay.

I disagree with you entirely. I think it's an interesting design feature.

So, what's the best way to apply this knowledge?

I've always made my websites in Notepad by typing everything manually. I found that things like Frontpage and Dreamweaver fill the source with unnecessary rubbish, although I'm not sure what impact that has on the end-user's experience.

Is it a good idea to do it all in Notepad?Edit Pad Pro (http://www.editpadpro.com/) is like a powered up version of note pad for any programming language. I think it also recognises xhtml but I havnt tried it with that. Download the trial version and just sorta accidentally forget to ever buy it...

Yes, I've been using Notepad++ for much the same job. I've not tried it with web languages, but it's not great for custom languages.

Since starting here at Team17 I've used Macromedia Homesite. It was APJ's editor of choice, so I followed on from him. Really cool editor, does everything I need. http://www.adobe.com/products/homesite/

I'm on a Mac at home, so I use Smultron. Nice free editor with possibly one of the best icons ever! http://smultron.sourceforge.net/

i can see from that that homesite is code only, but how does it differ from dreamweaver? Is it worth getting or is dw better as long as you ignore the wysiwyg stuff?

Would you say it's worth purchasing Homesite rather than using a free syntax highlighting editor?

Being able to validate on the fly sounds handy.

i can see from that that homesite is code only, but how does it differ from dreamweaver? Is it worth getting or is dw better as long as you ignore the wysiwyg stuff?
Yes Homesite is code only, it does have a preview mode though. I just find the interface really easy to work with, I’ve also used it for a while now so know my way around it pretty well.

I haven’t used DreamWeaver since Uni, so not sure how good it is now or how it compares. I’d have a play about with both and see which suits you best. Homesite should come packaged with DreamWeaver, if not then check out the trial version and see what you think.
Would you say it's worth purchasing Homesite rather than using a free syntax highlighting editor?

Being able to validate on the fly sounds handy.
Personally I'd stick with the free editor, that's what I've gone for at home. Also I think Homesite is about £100 new, which is a bit pricey when free alternatives are available.

It's whatever gets the job done for you really and which editor you work best in. Trail versions are available for most editors, plus there's the free ones. So have a go at a few and see which you prefer.

Being able to validate on the fly sounds handy.
I use the HTML Validator plugin for Firefox (the one based on Tidy, not CSE). It adds a little icon to the bottom bar of Firefox, which changes to show you whether there are validation errors/warnings. You can then view source either by the normal method or by double clicking the Validator icon, and it tells you what the errors are, highlights them in the source, and suggests possible fixes. It'll even try and fix them for you if you want, and present you with the "fixed" page.

If you are not using Firefox as a web development tool, i suggest doing so. It makes life a lot easier, especially with the Web Developer Tools plugin.

My general opinion of Dreamweaver is that if you need a WYSIWYG editor, you shouldn't be attempting web development. I find that hand-coding the page from scratch is quicker than using Dreamweaver then fixing all it's errors.

Oh, wow, that'd be handy. I'll look into that.

Does IE not recognise min-width or something? If you make your window really narrow, the seabed only stretches to the width of the window, leaving a sort of topless step of soil to the right of the bottom of the page.

That said, it seems to understand it in #sea:
#sea {
color: #CCCCCC;
background:#2F397E url(waves.gif) repeat-x;
min-width:740px;
}

#seabed {
color: #CCCCCC;
background:#2F397E url(seabed.png) repeat-x bottom;
height:11px;
min-width:740px;
}

Edit: I fixed the JS errors on the flags, graves and maps pages, but the flags page still brings up that warning. I don't get why the other pages don't bring that up to... they use almost identical scripts. Oh well!

Does IE not recognise min-width or something? If you make your window really narrow, the seabed only stretches to the width of the window, leaving a sort of topless step of soil to the right of the bottom of the page.
IE doesn't support min-width, though IE7 beta 3 does.

I've heard that when IE7 is released, Microsoft is going to add it to the automatic updates, so the days of coding around css support in IE6 may come to an end in the near future.

You could remove the seabed div altogether. The html tag can have the soil background, the body with the waves and blue background, and the sea div with the seabed background at the bottom.

My line of thinking is, keep wrapper divs to a minimum, but use them when they're the best practical option.

You could remove the seabed div altogether. The html tag can have the soil background, the body with the waves and blue background, and the sea div with the seabed background at the bottom.

I tried that but I couldn't get it to work... maybe I'll try again.

Apparently the IE7 auto update is mere weeks away, and i for one can't wait.

Apparently they have fixed just about every common rendering bug that IE6 has (3-pixel-jog, peekaboo, etc) meaning no more need to do silly holly-hack type CSS and force it into undocumented modes (hasLayout). Also, overflowing content will now flow outside a container element that has fixed dimensions rather than resizing it to accomodate.

They are also claiming full CSS2 support (with elements of CSS2.1 and CSS3) where IE6 didn't even have full CSS1 support. Included in the list of supported CSS are min/max-height/width, first-child/adjacent/child/attribute/prefix/suffix/substring selectors, and fixed positioning.

Since starting here at Team17 I've used Macromedia Homesite. It was APJ's editor of choice, so I followed on from him. Really cool editor, does everything I need. http://www.adobe.com/products/homesite/
Hi Sel. The guy who made Homesite, Nick Bradbury, later made Topstyle (http://www.newsgator.com/NGOLProduct.aspx?ProdID=TopStyle), which is an excellent css editor, and doubles as a html editor. He included a version of it with Homesite, so you may have experience with it already.

I've used Topstyle for a couple of years, and it has been my editor of choice. I've yet to try Homesite, it looks good in the screenshots and the reviews recommend it.

Topstyle's $80, but it is worth it. The only thing is, Nick hasn't been working on it for a while, as he's been working solely on an rss program called FeedDemon since working for Newsgator, and I'm not sure if he's going to work on Topstyle again.

There's a competitor to Topstyle, Style Master (http://www.westciv.com/style_master/), which is $60 and is updated regularly, but doesn't support html editing.

By the way, I like the design you've made on the Team17 website, its very nice and easy to look at. :)

He included a version of it with Homesite, so you may have experience with it already.
Yes, it came included with the version I've got. I've used it on the odd occasion but nothing major. I tend to write all my CSS by hand in Homesite and use the Web Developer extension (what M3ntal mentioned earlier) to mess with the code / fix bugs.

By the way, I like the design you've made on the Team17 website, its very nice and easy to look at. :)
Cheers! :) The idea was to keep it quite clean and easy to use. I've been toying with the idea of turning the news section into a Blog (maybe using Wordpress or Textpattern) as it will keep things more organised. But thats for another discussion!

I'm attempting to install PhpNews on my bands website, but I don't know how to without actually uploading the site, as it needs to be CHMOD'd, and I don't have anywhere to host it. If someone could help me around this problem, I would appreciate it.

I'm attempting to install PhpNews on my bands website, but I don't know how to without actually uploading the site, as it needs to be CHMOD'd, and I don't have anywhere to host it. If someone could help me around this problem, I would appreciate it.
If you're au fait with such things, I'd reccomend installing Apache locally and hosting a test server yourself. I'm not sure how easy it is to set up SQL that way, though. I'd probably just make a subdirectory of the site and upload it there to test it.

From what I've done, this seems to be quite a good PHP tutorial, it takes it one step at a time and there's a separate tutorial for databases. http://www.freewebmasterhelp.com/tutorials/php

Would it be rubbish of me to say that I'm not keen on learning from a site with spelling mistakes and truncated text?

If you're looking at learning some PHP then I'd recommend this site, http://www.killerphp.com/

Easy to follow video tutorials, starting with the very basics.

Nice, I'll check that out tomorrow (I have a day off... woooooo).

I don't think html is really that much out of date, but php features more possibilities and is in my eye still the most stable code around (could be wrong here, only starting it-studies tomorrow ;) )

You can always oder this shirt when you master HTML: http://www.emp-online.com/bin/shop.php?Sucheintrag=h.t.m.l.&prog=search&Submit=Find

(I did :p )

I don't think html is really that much out of date I was told by a nerdy programmer once that xhtml was a bit shirty and html was alot better. I guess its all down to opinion. He also had bade words about C#; it was Mircrosoft's way of making the programme more to their advantage or something.

Well, my site runs well with XHTML and I like the uniformity of code it promotes.

I haven't found XHTML restrictive at all yet. It's pretty much how I did my HTML (although I've now started tidying my code up more).

I was told by a nerdy programmer once that xhtml was a bit shirty and html was alot better. I guess its all down to opinion. He also had bade words about C#; it was Mircrosoft's way of making the programme more to their advantage or something.
C# is a little strange.

It's great at what it does, but it's very specific. It makes software for .NET, and as it's the language designed for .NET and the language .NET was designed for, it's damn good at it and when I use .NET (which is a lot, these days, because it's so much easier than writing native Windows apps) I more-or-less always use C#. It's also, in common with all the .NET and most other virtual-machine languages, a good language to learn on because the debugging is so good.

But it's not a useful language to know, really, because there's a .NET version of Java (or J#, at least), Basic, and plain old C++. (Oh, nerds and their amusing plays on "C". It'll be "C Major" next, and then they'll run out. I use C# on Visual Studio Express, which is the cut-down version, so I call it C# Diminished.) And since you don't need C# to use .NET, and since you can't use C# without .NET, there's not a lot of use in knowing it.

I don't think html is really that much out of date, but php features more possibilities and is in my eye still the most stable code around (could be wrong here, only starting it-studies tomorrow ;) )

That's like saying "I don't like petrol; I'll get a car instead".

That's like saying "I don't like petrol; I'll get a car instead".

I was going to post something like that myself but couldn't think of a good metaphor.. I like it.

That's like saying "I don't like petrol; I'll get a car instead".

Urr I guess I didn't really get to my point.

What I meant was: HTML by itself is great, but to enhance it PHP features more possibilities and is in my eye still the most stable code around.

Better?

OR to stay in the same line: To make a car drive, you can push it, but you can use petrol too!

Urr I guess I didn't really get to my point.

What I meant was: HTML by itself is great, but to enhance it PHP features more possibilities and is in my eye still the most stable code around.

Better?

OR to stay in the same line: To make a car drive, you can push it, but you can use petrol too!

Well, that's true, but PHP can be used to generate lots of stuff besides HTML. It makes XML, XHTML, image files, flash apps, text files, zips... You name it, someone can make PHP power it. You could make an online BASIC compiler if you really tried ever-so-hard. If and when HTML is replaced, PHP won't even need a patch to work with the new format (though it will probably get a rerelease anyway if it's still around).

It's more like saying "Petrol is good because cars are good". It's fallacious, because you can run many other things on petrol and you can run cars on many other things than petrol.

How do I horizontally align a div into the middle using css?:-/

Edit: Nevermind.

This has rekindled my hatred of IE... My site looks almost perfect in Firefox and Opera. Then I switch to IE and everything is crazy... text sizes are different, some divs are bigger and some are smaller. I am using IE7... it just loads everything wrong!http://img503.imageshack.us/img503/2903/griperz4.gif

IE doesn't seem to understand the concept of cellpadding:(

Edit: I just can't believe this.... IE has actually changed the colour of some of my images:eek:

For comparison:

Firefox
28582

IE
28583

Why does IE mess everything up? I have the latest version, which I downloaded earlier today. It seems IE6 does the same:confused:

Did IE ever have proper PNG support? That might be what's messing up your images. By the looks of it, it can't process the PNG's alpha-transparency properly.

Also, check if IE's Text Size setting isn't messing with the divs.

Other than that... IE sucks. :p

It's a PNG but without alpha transparency. I hope I don't have to convert them to gifs :(

Yes, IE messes up PNGs. There are two ways around it, I think:

1. Use something other than PNG
2. Make all your background colours PNGs and hope it messes them all up in just the same way.

Neither solution is satisfactory.

You can do a couple of other things, like mod_rewrite and PHP script the server to serve IE users GIFs instead, or put an <!--[if ie]> <[end]--> tag in to include a different style sheet with GIFs in.

Or you can just tell IE users to get.

2. Make all your background colours PNGs and hope it messes them all up in just the same way.I think I'll do that.

I now have another problem...IE displays it how I want and Firefox and Opera don't so there's probably something with what I've done... A div in the header and the main div overlap and any tables in the main div are pushed off the screen to the right. I can't see what's causing it but if I remove this div there is no overlap.

Also, how can I make IE use "list-style: none". I've put it in both the ul and the li in the css and it still shows a dot there.

"list-style-type: none" ;). "list-style" is a shorthand for setting all list style properties at once.

I remember using CSS many moons ago but I can imagine it's evolved a fair bit since then.

From the point of view of a web designer it doesn't evolve very often. You just work with whatever the current standard is and whatever the currently popular browsers support. It will be a big leap when most IE users use IE7 and you don't have to think about IE6 any more.

Using images as a spacer should be forbidden by law. It´s very bad style. Don´t trust 'webdesigners' who do that.Oh, I quite agree. But you know what I mean -- some images really don't need captioning like that.

Once upon a time, images as a spacer were the only way to do it. :( Web designers who do that just need to get with the times!

And since you don't need C# to use .NET, and since you can't use C# without .NET, there's not a lot of use in knowing it.

I think you're wrong. There's Mono (http://www.mono-project.com) for example. C# is just as legitimate a language as any other. You just need your code, a compiler, and a CLI/virtual machine.

Surely Mono's just a .NET emulator?

Nope, it's a .NET implementation.

Well, whatever. The point is that C# is purely a way to create .NET applications, and you can create them perfectly happily in VC++, VJ++ or VB without inventing a new and only very slightly different language.

perfectly happily in VC++, VJ++ or VB

Well, I'd be rather unhappy if I had to program in VC++ or VB. :p People have their preferred languages, which is probably why there's Python for .NET, Eiffel for .NET, SmallTalk for .NET, etc. Take away C# and Microsoft no longer has a language that really competes with Java for readability and usability to call its own.

You can create JVM applications perfectly happily in Java, but that hasn't stopped people from coming up with other languages that compile to the JVM from what I understand.

Yes, I know all that. I'm not saying C# is bad. I've quite explicitly said a number of times now that it's good. I used it yesterday, and the day before that. I use it most days at work. But if I was going to learn a language I thought would be a useful one to know down the line it would not be C# because there is nothing I could do with C# I couldn't do with, say, C++ and there are lots of things I could do with C++ that I can't do with C#.

I now have another problem...IE displays it how I want and Firefox and Opera don't so there's probably something with what I've done... A div in the header and the main div overlap and any tables in the main div are pushed off the screen to the right. I can't see what's causing it but if I remove this div there is no overlap.Does anyone know what could be causing this? I've practically done everything if I can sort this out.

Back on the HTML topic...

As I think I've stated before, I'm perfectly fine using CSS for formatting, but still use tables instead of divs for advanced design. They just feel more user-friendly to me. Take my website for example:

http://supsuper.10e.net/supspider/

How would any of you do the whole "tab-like look" by just using CSS/divs?

I have a similar menu... I used ul instead of a table for the tabs and stuck that in a div

The give each li a border using css but with "div#whatever li a:hover" make the bottom border change to the background colour of your main section. Then create an li class which also does that and use that for the selected tab.

I'm getting rid of all the tables that I can on my site. The problem being that I've got a php program on there which uses tables and it's these tables which get pushed off the screen. It's realy causing me problems because it seems I cannot add anything to the <head> and for a drop down menu I have, I need to add a section to make sure IE actually shows it.

Oh yes and each li will need to be in a new ul (unless someone knows how to do it otherwise) or else they'll appear vertically.

Oh yes and each li will need to be in a new ul (unless someone knows how to do it otherwise) or else they'll appear vertically.
You can put "float: left" and "width: 100px" (or whataver) in the style and the list will be horizontal. You'll need an element with "clear: both" underneath to stop the next bit of content being next to the list instead of below it.

IE has actually changed the colour of some of my images :eek:

For comparison:

Firefox
28582

IE
28583

Why does IE mess everything up?

I'm back. Okay, IE changes the colour of the image, because it implements the GAMA header in the PNG, when it should ignore it.

GAMA is used to display images between PC and Mac CRT monitors at the same brightness. The brightness of the colours displayed on the monitors at the time appeared differently as the hardware used to place the colours on-screen produce different results.

To make the brightness of the image appear the same on PCs and Macs, the GAMA header is added to PNGs, which was very accurate and solved the problem.

However, in a web browser, PNGs were being affected by the GAMA header, when it didn't know what hardware was displaying it. Two identical colours, one in a PNG and one used by the web browser, would appear different because of the GAMA correction.

So images on the web have to have the GAMA header stripped out, as IE6 didn't remove support for it. From what I can see, IE7 will have no changes as to how it displays PNGs.

There's a successor to GAMA, sRGB, which doesn't have this problem, so you can replace GAMA in the PNG if you also want images to appear the same on the two systems.

You can use TweakPNG (http://entropymine.com/jason/tweakpng/) to remove the GAMA header manually (and optionally add sRGB), or PNGGauntlet (http://brh.numbera.com/software/pnggauntlet/), which compresses PNGs well and strips out unnecessary headers.

You can put "float: left" and "width: 100px" (or whataver) in the style and the list will be horizontal. You'll need an element with "clear: both" underneath to stop the next bit of content being next to the list instead of below it.

Surely if you want a list to appear horizontally you just add "display:inline" as follows:

li {
list-style-type:none;
display:inline;
}

You can see from my site (with CSS (http://vader.wurmz.net) and without (http://vader.wurmz.net/nostyle.html)) that the menu is a list displayed inline and without a style type.

You can simply add images as list entries if you want tabs, can't you?

I never did get, why does everyone make menus with ul? What's the advantage from just writing them out as always?
You can simply add images as list entries if you want tabs, can't you?My point is to not use images. I hate pumping out some image package for something so basic.

I've tried everything suggested and it's not putting them horizontally. I've also tried using list-style-type: none and it's still displaying the dot.

:(

body,ul,div,p,form,span,tr,td,table,br,hr,BR,SPAN, LI,TR,TD,TABLE,P,FORM,DIV {
margin: 0px;
padding: 0px;
}
ul {
list-style: url(images/li.gif);
}
ul#nav, ul#search, div#menu ul, div#toplinks ul{
list-style-type: none;
}
div#menu {background: #aacfff; width:100%}

#menu ul {
margin: 0;
padding: 0;
width: 80px;
float: left;
clear: both;
}

#menu a, #menu h2, #menu h3 {
font: bold 11px/16px trebuchet ms, arial, helvetica, sans-serif;
display: block;
border: 1px solid #aacfff;
border-bottom: none;
margin: 0;
padding: 2px 3px;
text-align: center;
}

#menu h2 {
color: #003399;
background: #f0f9ff;
text-transform: uppercase;
}

#menu h3 {
color: #ffffff;
background: #80b4ff;
text-transform: uppercase;
}

#menu a {
color: #0066cc;
background: #f0f9ff;
text-decoration: none;
border-bottom: 1px solid #aacfff;
}

#menu a:hover {
color: #ffffff;
background: #80b4ff;
}

#menu li {position: relative}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

#menu ul ul {
position: absolute;
z-index: 500;
}

div#menu ul ul {
display: none;
}

div#menu ul li:hover ul
{display: block;}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

div#toplinks {background: #80b4ff; width:100%;}
div#toplinks ul {margin: 0;padding: 0;width: 42px;float: left;}
div#toplinks li {padding: 3px 0 0 5px; text-align:center;display: block;}I've added and deleted stuff trying to sort it out so there are probably lots of duplicate stuff...

<div id="menu">
<ul>
<li><h2>abc</h2>
<ul>
<li><a href="#">qwerty</a></li>
</ul>
</li>
<li><h2>def</h2>
<ul>
<li><a href="#">uiop[]</a></li>
</ul>
</li>
<li><h2>ghi</h2>
<ul>
<li><a href="#">asdfgh</a></li>
</ul>
</li>
<li><h2>jkl</h2>
<ul>
<li><a href="#">jkl;'#</a></li>
</ul>
</li>
<li><h3>zxcvbn</h3></li>
</ul>
</div>

The #toplinks menu is just <ul><li></li></ul> repeated... and it appears horizontally.

You have to also format the li, not just the ul. That's the difference between #toplinks and #menu.

While I'm at it, I made a popup menu with CSS. Obviously, it doesn't work in IE since it doesn't support li:hover. Any way to fix this?

While I'm at it, I made a popup menu with CSS. Obviously, it doesn't work in IE since it doesn't support li:hover. Any way to fix this?I'm pretty sure I found something about it through google...

Well they all involve JavaScript, which I can't test myself on IE (due to BORK'ness), so I'll just have to cross my fingers.

Star Worms:

body,ul,div,p,form,span,tr,td,table,br,hr,BR,SPAN, LI,TR,TD,TABLE,P,FORM,DIV {
margin: 0px;
padding: 0px;
}

div#menu {
background: #aacfff;
}

#menu ul {
margin: 0;
padding: 0;
clear: both;
list-style-type: none;
}

#menu ul li {
float: left;
width: 80px;
}

#menu a, #menu h2, #menu h3 {
font: bold 11px/16px trebuchet ms, arial, helvetica, sans-serif;
border: 1px solid #aacfff;
border-bottom: none;
margin: 0px;
padding: 2px 3px;
text-align: center;
display: block;
}

#menu h2 {
color: #003399;
background: #f0f9ff;
text-transform: uppercase;
}

#menu h3 {
color: #ffffff;
background: #80b4ff;
text-transform: uppercase;
}

#menu a {
color: #0066cc;
background: #f0f9ff;
text-decoration: none;
border-bottom: 1px solid #aacfff;
}

#menu a:hover {
color: #ffffff;
background: #80b4ff;
}

#menu ul li ul {
display: none;
}

#menu ul li:hover ul {
display: block;
}

The main difference is that i set the <li> rather than the <ul> to "float: left", the other differences are mainly tidying up and simplifying ;). The list-style-type worked fine for me, no bullets were displayed.

SupSuper:
A tab menu would be done using a similar method to the one i just helped StarWorms with. If you want a little space between the tabs like on your link, just add some margin to the first level of <li> tags.

The reason people use <ul> for a menu is because that's what it is, an unordered list of the content pages. It's the same reason you'd use a <h1> or <h2> for a heading rather than a <p> - because the "M" in "HTML" actually stands for something ;).

As for an IE fix for li:hover, put the attached .htc file in the same directory. It's an IE behavior script that tells it what to do with :hover, :active: and :focus on all elements. You will also need to put this code into the <head> of your page:

<!--[if IE]>
<style type="text/css">
body {behavior: url(csshover.htc);}
</style>
<![endif]-->

Hmmm.... it's still displaying them vertically.

Worked fine for me. I even made a vertical/horizontal menu combo.

Thanks for the file, M3ntal. Now the only problem is my old enemy: divs that won't center on the screen because align=center won't do anything about it.

Star Worms, it displays them horizontally for me in IE and Firefox. Dunno why it isn't doing for you.

SupSuper, give the containing block a "text-align: center;" and the div itself a left and right margin of auto, eg "margin: 0px auto;".

SupSuper, give the containing block a "text-align: center;" and the div itself a left and right margin of auto, eg "margin: 0px auto;".Tried it, didn't work. Some googling led me to fix it with a "width: 688px;" value, though in a really odd way, since the width is nowhere near that, but otherwise it won't look right.

Try sticking the entire thing in: <div align="center">[entire thing]</div>

Does anyone have an idea as to why tables on the main div are pushed off the screen to the right of the divs at the top containing the menus? The main div is not in the right place either. I have 3 divs. The first is for the header, the second is for a menu and the third is for another menu. The third menu overlaps with the top of the main div and tables in the main div are pushed out of it, off the right hand side of the screen. Edit: Actually it looks like it's a float:left which is causing it...

I've tried to revamp my tabs as the drop down wasn't working in IE. IE is still displaying it weirdly though - One on top of the other each stretching right across the page.

My second menu is ok apart from that it shifts the div which should be on the same row as it but on the right hand side, to below it on the right hand side. This only happens when I make all the links in one <ul>. If I make all the menu items in a separate <ul> it adds a dot to the menu items.

body,ul,div,p,form,span,tr,td,table,br,hr,BR,SPAN, LI,TR,TD,TABLE,P,FORM,DIV {
margin: 0px;
padding: 0px;
}
ul {
list-style: url(images/li.gif);
}
ul#nav, ul#search, div#toplinks ul, div#toplinks ul li{
list-style-type: none;
list-style:none;
}
div#menu {background: #aacfff; width:100%;float:left;}

#menu ul {
margin: 0;
padding: 0;
clear: both;
list-style: none;
}

#menu ul li {
float: left;
width: 80px;}

#menu a, #menu h2{
font: bold 11px/16px trebuchet ms, arial, helvetica, sans-serif;
border: 1px solid #aacfff;
border-bottom: none;
margin: 0;
padding: 2px 3px;
text-align: center;
display: block;
}

#menu h2 {
color: #ffffff;
background: #80b4ff;
text-transform: uppercase;
border-bottom: 1px solid #80b4ff;
}

#menu a {
color: #0066cc;
background: #f0f9ff;
text-decoration: none;
border-bottom: 1px solid #f0f9ff;
}

#menu a:hover {
color: #ffffff;
background: #80b4ff;
border-bottom: 1px solid #80b4ff;
}

#toplinks {background: #80b4ff; width:100%;}
#toplinks ul {list-style-type:none;list-style:none;margin: 0;padding: 0;height:30px;width: 42px;float:left;}
#toplinks li {padding: 3px 0 0 5px; text-align:center; list-style-type:none;list-style:none;}

Edit: Solved problem 1

Edit 2: This list stuff is starting to get quite annoying - each time I make a new one, any div after it ends up on the right of it. I think this is because of the float:left used in the horizontal menu. So how can I make the next div be displayed below the menu rather than next to it?

Edit 3: Nevermind, got that sorted too.

The last few weeks have been really busy for me, so I've not had a chance to do anything but work, eat and sleep.

This is the kind of thing which puts me off making a community-worthy website. I know I wouldn't be able to maintain a high level of service on account of it being quite far down the line in terms of priority.

I still want to learn but I guess no matter how out-of-date HTML is, the real world is never truly out-of-date. :(

Got my XHTML and CSS valid. Although the ad that the host sticks on my pages is not XHTML valid and brings up 8 errors.

Get a better host. I recommend www.ukhost4u.com.

Yeah I get that problem too, though I suspect it's Google Ads' fault, since that's what my host uses.

Well I'm sorting the site out before I get a new host. For now, this one will do.

Another problem I'm having:

<div id="caption">
<h5>Lots of Weird Stuff</h5>
<p><span>1</span>Stuff</p>
<p><span>2</span>More Stuff</p>
</div>

What I'm trying to do is get the stuff in <span> on the left of the div and have the other text centered in the div. text-align:left doesn't seem to work. float:left is close but the second <span> is displayed to the right of the one above it rather than directly below it.

<div id="caption">
<h5>Lots of Weird Stuff</h5>
<p><span style="float: left">1</span>Stuff</p>
<p><span style="float: left; clear: left">2</span>More Stuff</p>
</div>

Thanks. I now need to put them into a table-like structure. I've done the obvious by putting them into a table but I also want all of the divs in each row to be the same height.

does the CSS "height" property not work?

If I gave all of the divs the same height then some would end up being too tall leaving lots of blank space and some would end up too short with some text cut off, especially on low resolutions. As far as I know there isn't anything I can add to the height to make it the same as a specific div.

It took me a few reads of that to understand what you are trying to do, but i think i get it now. You want all divs on a specific row to be the same height as the div that has the most content, and is therefore naturally the highest.

Tricky one indeed, as you can't set the divs to 100% height unless you give the table row/cells a fixed height for it to base that 100% on. I can't think of a way to do this off top of my head, but i'm having a similar problem with a site i'm making myself at the moment. Anyone else any ideas?

CSS really needs an "overflow: expand-parent", whereby you can make something behave like IE6's expanding box bug.

I changed them into tables with a different style. I've got the site done - css and xhtml validated.

Now - going back to something I mentioned earlier... I am using the thing.php?page=x (is there a proper name for this or do I have to continue to refer to it like that?). the $_['GET'] = $page. The links are made using ++$page and then <a href="?page=$page">Next</a> --$page. All of this revolves around having the $_['GET'], which is a drop down menu.

Can I use thing.php?page=x without having this menu? I have an updates page but after 10 pages I want to shift the older news onto the next page.

I am using the following:

if ($page == "1") {
echo "[Updates on first page]";
}
if ($page == "2") {
echo "[Updates on second page]";
}

However without $_['GET'] I can't get the number at the end from the url which uses <select onchange="window.location='thing.php?page='+this.value">. So I want to set $page to whatever the number is at the end of thing.php?page=x so that I can use it to generate the links and to tell it what to echo on that page.

That just totally confused me.

Never mind... someone on another forum did an example that worked.

Ok, somebody explain to me how I can get divs to be as easy to use as tables for design. Because I can't even figure out how to do simple things like making them fit the remaining width/height, placing them where I want (without absolute positioning) or even HOW TO SIMPLY PUT THEM NEXT TO EACH OTHER! :mad:

div's automatically stretch to the available width if you don't specify one. You can't get them to stretch to the available height sensibly, if you simply want to fill the page with a background image or something, you have to set it on the html element.

You put them next to each other using "float: left" or "float: right".

'float:<direction>' and 'display:inline' will do the trick.

this elements can be inline:
a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, script, select, small, span, strike, strong, sub, sup, textarea, tt, var, basefont, font, s and u

Hmmm.

I'm fiddling with PHP forms and I've come to the conclusion that this is going very wrong.

If I use an input box in the form, how do I make it so I can press Enter to insert line breaks (even if I still have to type br tags etc. in at each one) and so that apostrophes don't come out as a backslash then an apostrophe?

I've used style tags to make the text field a certain size, but that doesn't seem to affect the other stuff at all.

To convert line breaks to br's use nl2br($string).
To remove slashes use stripslashes($string).

If you want to make a text box that accepts new lines you have to use <TEXTAREA> rather than <INPUT>.

If you want to make a text box that accepts new lines you have to use <TEXTAREA> rather than <INPUT>.

Hmmm... and the form will still insert that text properly?

*tries*

Edit: Nope. Now the form is bork'd.

Edit2: I fixed it. It works, by jove! Wheeeeeeeeee!

your website is awesome, i loved the graves! :) specially the one with Stewie Griffin :P

I was just thinking the same thing!

How did you even find this thread?

It was on the first page of online orgy!

Not you.
Corleone.

Oh sorry, my bad.

I forgive you.
HOW COULD I STAY MAD AT THAT FACE?