Websites // CSS

Websites // CSS
if you get chance could you see if the site works? i'm ditching Paranoia Games, for a number of reasons and just going to a easier to maintain site i mainly want to know if it looks ok in other browsers, it has roll over links and the background is sliced.. its going to be chanced i just want to know if the method is sound lol oh a link might help ..doh!! http://www.nigecstudios.uk.to/

Seems to work! Looks nice and stable. So you entered that Lovecraft-Con-*test*-('"), uh? Me being a Lovecraft-fan would have loved to do that, too. But isn't the time pressure horrible? When do you have to be finished - and what will your game be about? If I may ask. Just a hint ... ? :)

thanks Matt the game is "Handyman Wanted" its based on a few commonplace book ideas but the key one is this: "13 House and garden—old—associations. Scene takes on strange aspect." hopefully it should be up for beta -*test*-('")ing in 2weeks, the first part of the game is up and running, it just need a bit tidy up big thank you to Tucker who taught me the art of flow charts, without his help i wouldn't of got anywhere with one of the puzzles and a big thanks to Greg for his amazin flash knowledge :lol:

Heya Nigel, the site looks good, but when i maximise the window the text and the picture shifts to the left a bit too much, so part of it is sitting on the left yellow border. Did you build the site using tables or layers? I like the look of the site tho, bright and cheerful! Big change from your paranoia one! :)

yes it does have layers, things moving about was what i was worried about.. i've mostly cheated in the past and used portal or templates, so i still have a few things to learn lol the phpbb board on Paranoia Games was getting 5 or 6 spam attempts a day, and the portal didn't like the games very much! its a bit to high maintance for a personal site. the "Not The Young Ones" is hardly going to dark and moody, so i thought i'd go bright and cheerful :)

Well if you made it using a table structure you wouldnt have to worry about things moving about, and your layout looks as though it would fit fine into cells. It just takes a bit more planning beforehand to slice your graphics up properly so u can put them into cells.

i've sorted it and got rid of the layers i took a lot more care over the slice and can now quite easily edit images if need be thanks

Looks good! My tutors tell me CSS is the way to go with webdesign, but i dont have a clue about programming so i find tables do rightly if they are well thought out.

Your tutor is NOT crazy!! CSS is the way to go. DEATH TO TABLES (bua-hahahahahahaha!!!!) There's other big advantages too... you see that giant fugly chunk of rollover JS in the head of your source Nige? Useless... All you have to do is assign a CSS a:hover style to achieve rollovers. No JS or BS. Clean and concise. As for layout... Think of it this way: a search bot is blind. They see your site without styles or layout. Basically, they're reading your page source from top to bottom, line by line. When you have (visually) grouped information that spans across a table structure, chances are that content is dispersed all through the source in different table rows, intermingling with other lines of content. Well built CSS will collapse into a perfectly organized text-document once styles are removed. Oh yeah, and lets not forget text/image-replacement. There is no excuse for putting image-rendered text onto your website anymore that Bots can't read. ALL page text should be present in the document then get styled with images to replace the HTML text with a graphic treatment. That way, bots can read your page and humans can see your prettily-designed page. Check out the Lassie website without styles. It's not perfect (I've learned a LOT since building it and would do it quite a bit better now), but it at least delivers the idea. Check out any page in Firefox, then do "view>page style> no style" That's my short list of reasons, but either way... I digress. =) If anyone needs any CSS tips, I'd be happy to offer insight on methodologies, 508 compliance (web-accessibility), or SEO (search engine optimization).

thanks for that greg.. i see the ugly code lol once this lovecraft game is out of the way, i'll look into it, its going to be the last game i do for a while, my brain fried :? all i know about with CSS was altering forums, and that was rather just the "suck it and see" approach, i've never actually coded any (just what dreamweaver creates)

Hey greg I might take you up on that offer, im just about finished my university course for this year and wouldnt mind learning css over the summer... i've been able to teach myself dreamweaver, flash, photoshop etc. by trial and error mostly over the years... but I just can't seem to work out any sort of code... my brain just isnt built for it!

Awesome... CSS would be a good one to get you into the great world of code. It's a very middle-of-the-road system, split between mark-up style tagging (like HTML) and OOP (object-oriented programming, like JavaScript or Flash AS). It's an easy one to get your toes wet with since you can build extremely simple schemes for just controlling text colors and styles, intermediate schemes that control page layout with blocked content, or absurd power-schemes that leverage the full potential of the style cascade and are so fiendishly clever that you deserve James Bond villain status with your own secret volcano-lair to laugh diabolically within. Of course, the one downside is the notorious unpredictability of CSS rendering across browsers. This is (of course) no fault of the CSS system but of the loony tunes who've programmed countless inept browsers (*cough*Microsoft*cough*) that render CSS incorrectly. So, once you achieve power-user status you will devise ever-more cunning schemes that will successfully render the same across FireFox, Safari (those are easy), and all the different versions of IE (which can be exceedingly difficult). Fear not, you can start small and work up. :D

Well... I DO want a volcano layer... :D (which reminds me, has anyone ever played Evil Genius? VERY fun game, look it up) Sorry to hijack your thread nigel, and sorry to keep quizzing you greg, but what did you mean by 'block content'? Does CSS render more unpredictably across browsers than tables? And what benefits, visually, are there from having a website made with CSS as opposed to one with tables made in dreamweaver (so it still has a certain amount of CSS text options)? Is the big deal that it makes it easier to MAKE a website (more control, etc), or is there a real visual benefit to the website itself?

but what did you mean by 'block content'? CSS insight #1... there are two levels of raw CSS elements: inline and block. Average Joe web programer who works in tables never goes beyond inline elements, which are just formatting of simple things like spans of text color, the style of links, making something bold/italic/bigger/smaller/purple/green, etc... For the most part, inline styling is just simple text formatting. Block level styling starts getting into page structure/layout. The size and position of elements, and how things fit on the page. Does CSS render more unpredictably across browsers than tables? Hell yes. That's the ONLY thing that tables has going for them... they're so old and archaic (originating from the Internet stone age) that all browsers know what to do with them. Unfortunately, that makes tables a crutch for a lot of web newbies and bad design shops who take the easy way and construct a rigid layout rather than the right way and construct an elegant, dynamic solution that is accessible to screen readers and search engines. And what benefits, visually, are there from having a website made with CSS as opposed to one with tables made in dreamweaver (so it still has a certain amount of CSS text options)? See my short list earlier in the the thread. Major reasons are 1) Search Engine Optimization (!!!! huge !!!), 2) Accessibility (screen readers/flexability to handle browsers with their default text size turned up), 3) Degradation (the page collapses into a neatly organized text document without styles versus a splatter of visual vomit that comes from an exploded table), 4)... the list goes on. Is the big deal that it makes it easier to MAKE a website (more control, etc), or is there a real visual benefit to the website itself? You'll think it's more painstaking to work in CSS at first, until you get the hang of it and you'll never go back. Tables are rigid and lock your design into place after a very basic cutting. It's EXTREEMLY difficult to re-tool a table structure to accommodate new layout elements after you've initially built it. Tables are mark-up heavy and very restricting. CSS formatting is very light-weight, flexible, and extremely easy to modify. I just built one site that we had to make some MAJOR visual reformats after the site was entirely built. Thankfully, I just had to update the styling of individual elements in the stylesheet (once) and the whole site got a face lift. So yes, there is ultimately benefit to both development AND visual considerations. Bottom line, there is ONLY one circumstance where tables are still the best option in this day of age... and that's to do exactly what they were originally designed to do: present a table of data.

When it comes to tables vs. CSS-based webdesign, I often use the following online presentation as a reference and show it to customers or managers: http://www.hotdesign.com/seybold/index.html 8) Maybe the link is useful to one of you... :roll:

View Full Version: Websites // CSS