Understanding CSS.. Hmmm..

gbremset

Hi everyone.

So.. I'm not a beginner to website design and creation, as I've made many many websites before. I've always used WYSIWYG software, and added/edited coding when required, so I know a liiiittle about HTML.

Suddenly I decided to get back into it, and thought I'd try the new stuff, CSS.. But I'm just not figuring out how this works..
I know the CSS bit is just the main design part of the site, and that content is added later/in other ways, but I'd like some pointers anyway.

I use Adobe Dreamweaver CS3, so that would be what I need help for.

To get me started, I used one of the built in "Starter page (Theme)" pages in DW, and I've managed to edit the site and upload it to my own internal webserver (yes I set up an intranet site at home, to practice with before I go live), I even added two youtube embeds which also work great.
the page works fine, loads fine and looks great, but has no functionality whatsoever.
(for reference, I used the "Entertainment - Home Page" template)

Now.. here's to the problem.

On the left side of the template, there's 6 "buttons" which I guess is supposed to be clickable. What I want them to do, is show information in the "box" on the right hand side of the template.

Let's use the "news" button as an example.. When I click that, I want my latest "news" to come up in the box.

I've been tearing my brain to bits all night trying to figure this out.. I've got as far as changing "javascript behaviour" (because it says javascript in the code), and the code then looks like this:

**<a href="javascript:;" class="style3" onclick="MM_setTextOfLayer('infowindow','','Hi and welcome to the NEWS section of my website. ')">news</a>**

That makes that short line of text "Hi and welcome to the NEWS section of my website" come up in the box where I want it, but plain text, no formatting etc.

I was hoping it was possible to use this like I used to use frames, where I have a separate html file and clicking a link simply loads the file in the box where you want it, but as I've found out during the night, it doesn't quite work the same way with CSS.

Some help please?

PS: Sorry for the wall of text.. no sleep means overactive brain. :P

Liam Byrne

gbremset wrote: »

I've been tearing my brain to bits all night trying to figure this out.. I've got as far as changing "javascript behaviour" (because it says javascript in the code), and the code then looks like this:

**<a href="javascript:;" class="style3" onclick="MM_setTextOfLayer('infowindow','','Hi and welcome to the NEWS section of my website. ')">news</a>**

That makes that short line of text "Hi and welcome to the NEWS section of my website" come up in the box where I want it, but plain text, no formatting etc.

I was hoping it was possible to use this like I used to use frames, where I have a separate html file and clicking a link simply loads the file in the box where you want it, but as I've found out during the night, it doesn't quite work the same way with CSS.

The above is doing EXACTLY what it would have done if it were frames, but you'd have set the formatting in the frame's own HTML file.

A quick fix - related to what you're talking about - would be to set the CSS style for #infowindow, but the REAL issue that you're have has nothing to do with CSS, really - it's got to do with how to organise your content.

gbremset

Liam Byrne wrote: »

The above is doing EXACTLY what it would have done if it were frames, but you'd have set the formatting in the frame's own HTML file.

A quick fix - related to what you're talking about - would be to set the CSS style for #infowindow, but the REAL issue that you're have has nothing to do with CSS, really - it's got to do with how to organise your content.

Thanks... And how do I organise my content then?

As I said, I'm used to HTML and frames, and can't seem to find any easy to understand guides on how CSS works.. I don't need in depth instructions, just enough to get that template working so I know the ins and outs and can start modifying it myself..

Reamer Fanny

If you want to pick up CSS, my advice is to forget what you know about frames and html. The web changes fast and so do standards, the new standard for designing websites is CSS and XHTML. A good starting point would be http://www.sitepoint.com/
Good use of CSS and XHTML can mean the difference between these sites, http://www.drivingskills.on.ca and http://www.csszengarden.com/?cssfile=/213/213.css&page=0

As for adding interaction and behaviors, pick up jQuery, this is a light weight javascript framework. It can do all the things javascript can do as well as cool animation effects.

Learn as much as you can and do away with the old rules of designing, they don't really apply anymore.

gbremset

Ok. thanks for that..

However, it still doesn't answer my question.

I don't want a detailed explanation of what exactly to do to get my site working, but a few pointers in the right direction (no links please)

Something like "create a doodah that does this and tell your link button to do that" How to create the final product I'll figure out for myself from there, but as I am completely stuck, I need a finger pointed at what I'm doing wrong.

I must say though, it's not the design part of it I'm interrested in right now, but the functional part.
So to put it simple, what basic steps do I need to take to get my buttons working.

the website is www.mytji.com if you want to go have a look and see what I mean.

Liam Byrne

You "could" do the following:
1) Add jQuery to the head of the page (do a google for "download jQuery", or even link to it from google's code repository

2) replace the javascript

MM_setTextOfLayer('infowindow','','Hi and welcome to the NEWS section of my website. ')

with $("#infowindow").load("welcome_page.html")

and do likewise for the other links, using other page names

3) Put the individual content into welcome_page.html and the other page names

Bear in mind, however, this is NOT the way I'd do it. Google, etc, can't "click" links when indexing a site, and so it will never index those other pages.

An ACTUAL, real-life website will have multiple pages each of which INCLUDES the navigation, header, etc.

gbremset

Ahaa... See there's the kind of reply I wanted.. Not only does it get me started on putting the basics together, but it also made me understand how to move on from there.. I think..

So you're saying that the "standard" way of making a site like mine, would be using the same stylesheet, and simply make a page that reloads the whole thing when the buttons are clicked, and the
$("#infowindow").load("welcome_page.html") method is a quick temporary fix?

p

I'd recommend the book 'designing with web standards' to get you started and explain all of this stuff. Also 'web standards solutions' is a good book about more hand coding HTML & modern CSS.

Liam Byrne

gbremset wrote: »

So you're saying that the "standard" way of making a site like mine, would be using the same stylesheet, and simply make a page that reloads the whole thing when the buttons are clicked, and the
$("#infowindow").load("welcome_page.html") method is a quick temporary fix?

Using the same stylesheet, and possibly include / library files for the navigation elements, if you can (just so that one change to the header/menu/footer/whatever works across the whole site).

The $("#infowindow").load has it's uses in specific circumstances, but because none of the info in the welcome_page.html (or any other page set up in a similar way) gets "seen" by Google, your site won't show up in search engines.

It's a "fix" that's within your understanding, but yeah, it's best to view it as a temporary solution until you learn more.

gbremset

p wrote: »

I'd recommend the book 'designing with web standards' to get you started and explain all of this stuff. Also 'web standards solutions' is a good book about more hand coding HTML & modern CSS.

I prefer learning by doing, and getting some pointers when I'm stuck, but thanks for the tip.. I've no plan of learning to hand code CSS, I want to focus on a site that works the way I want it, before I start looking at the design.
And when it comes to the CSS, I'd be using Adobe Dreamweaver CS3.

Liam: Thanks again.. I think I'm getting somewhere now.. I just need to get my local testing server back up and running so I don't have to keep uploading it to the remote server for testing. :P