Developing a new site...

[SAC]

After holding up for a while, I'm now in the process of developing my replacement site for Gothia, (long gone), my new Simuscape site at; www.simuscape.com. It's a fansite dedicated to 2D/2.5D graphics, namely "old" games such as Transport Tycoon, SimCity, Civilization, and the sort...While I do consider myself fairly good when it comes to graphics, (I draw all the graphics myself, whether it's website graphics, or game graphics), I'm a hopeless case, beyond any help, when it comes to more technical stuff such as codes and the sort. Having this in mind I've never even considered trying to develop a site from scratch, mainly because I want to attract visitors - and hopefully make them stay! So, what's left to do? Well, in my case I found and went to an open source system, allowing me to develop my site to my own likings. While I've made a decision about the color scheme I want to use, and produced images accordingly, I'm now trying to develop specific zones to the best of my abilities. And that's a quick one...On my main page there are three blocks or whatever it's called. Two sidepanels with internal links to different parts of the site, and in the middle section a News block. What I want to add above the News block is a rotating image showcasing different areas available at Simuscape - mainly as to attract visitors visually and promote the "game graphics" aspect of the site itself. An example of what I'm looking for is visalized on this page; http://www.gamus.com.br/. As you can see there's this game ad rotating screen just below the menues, showcasing different games. I'd like to implement a similar one on my site, right above the News block, showcasing images/screens of various parts at Simuscape, each of the image also clickable to take the visitor to that specific location promoted. With something like this in place I'm going to reduce the image sizes showing up in the News block, for the sake of making the site visually appealing. Apart from making the images/screens, which I do myself, how do I go about with the rest? How's the code supposed to look like, and I assume it's going into my global.css. Or?This next question may even be as stupid as possible, but how do I change the code to replace the text links in the upper menu, (Home, SimuTalk, Admin Zone - the latter only visible to me), with images, (buttons), instead? These buttons should have a mouse-over effect, and if being on the "Home" page, I want that specific button to be highlighted - just as if I had my mouse pointer at it!Do I even make any sense? Well, that's it for now... For a starter...Thanks in advance for any help given!

[thescientist]

If you are asking questions about where to start, then the first the thing you should do is read through the HTML (and more specifically) the CSS tutorials. These should help give you the building blocks you need to setup the structure of your page as well as start styling it. To get hover effects, its a simple as implementing the psuedo class in CSS. The best way to learn is by doing, so just give it a shot and we'll try and help you when you problems/questions.

[ShadowMage]

The mouse-over is easy, just use the :hover pseudo-class and change the background image, like scientist said.The rotating images is not so easy (still pretty easy, but not as easy as the mouseover). You'll need to use JavaScript for that, which would mean that it won't work for users who have JavaScript disabled, so you'll have to think of an appropriate alternative for those users. You could also use a Flash object to do it too.Like scientist pointed out though, the easiest way for you to learn is to do it yourself. I'd get the mouseover working first and then come back to the rotating image. Read up on CSS to see how to make the mouseover, give it a shot, and if you have problems, come back and tell us and we'll try to help you out.

[SAC]

Thank you both for your quick replies! It's appreciated! :)The thing is, I have probably come to the wrong place as I lack both time, interest, and any knowledge as far as web site development concerns. Yet I'm eager to get my site up and running as I have tons of custom grapics to offer my visitors. I have installed Firebug in order to inspect elements, but it's all greek to me as I have no idea where to look for the codes inside my .css files, let alone understanding them. I have achived smaller tasks though such as changing colors of the links, creating a header and place it on my site... But that's it! I can't seem to get any further...Does anyone know of a place where I can get assistant more based on my knowledge, and where I'm not required to learn doing it myself?

[jeffman]

It sounds like you need to hire someone.

[SAC]

:)Yeah, that would be the ultimate thing of course, but since I'm not a company I lack the funds to hire people to do the work.

[thescientist]

you should probably just Google for a site that offers free templates/hosting for websites. Chances are you will have to put up with some sort of advertising and you'll have to make some sort of concessions over the final design.Without learning or being able to hire someone, you're not leaving yourself many options.

[SAC]

Well, I actually read some of the .css documentations available, and the "Try-Out-For-Yourself" things on the main page are also quite helpful... I think that understanding how to put a code together doesn't seem too difficult to be honest. It could very well be that the CMS service I'm using has a "difficult to understand" structure - even though it's supposed to be user friendly according to statements.What I've been doing is to use Firebug to inspect elements, as noted, and I've checked out codes - how they're supposed to look like - but I'm having difficulties finding out where in those .css-files to put them... It's too unclear to be frank!

[ShadowMage]

It's going to be somewhat challenging to try to figure out what a particular property or set of properties will do and how it interacts with the rest of the elements on the page just by inspecting them in FireBug. FireBug is not a learning tool, it is a debugging tool.If you really want to learn this stuff, I'd recommend you start at the beginning of the CSS tutorial and go from there. You really should have a good grasp on selectors and at least the basic properties like margins, padding, and display before you start digging into source code and trying to figure it out. Oh and also, make sure you have a good understanding of the box model, too.

[thescientist]

Well, I actually read some of the .css documentations available, and the "Try-Out-For-Yourself" things on the main page are also quite helpful... I think that understanding how to put a code together doesn't seem too difficult to be honest. It could very well be that the CMS service I'm using has a "difficult to understand" structure - even though it's supposed to be user friendly according to statements.What I've been doing is to use Firebug to inspect elements, as noted, and I've checked out codes - how they're supposed to look like - but I'm having difficulties finding out where in those .css-files to put them... It's too unclear to be frank!

that's probably the least helpful way to teach yourself. There's no sense in looking at an enterprise level CMS and trying to reverse-teach yourself from that. My advice is to read and understand the tutorials here first before tackling a beast bigger than you can image. There is so much more that goes into CMS than HTML and CSS, and most of it is done behind the scenes anyway. Start small, and take small steps. If you're wondering why you are losing patience in trying to learn, its because you're not learning in an intuitive and reasonable fashion. The stuff you're seeing might become easier to comprehend if you've been learning and applying practical HTML and CSS for at least a year or more.edit: nod to ShadowMage's point about Firebug.

[SAC]

Okey, did not know Firebug was a debugging tool. I just installed it because people told me to do so as it showed how the coding of a site was built up! But well, I'm going to try to put some effort into reading the tutorials - and no, I'm not trying to sound totally bored! Honestly, I will!

[jeffman]

I've worked with WordPress before, and I found that tweaking the default CSS values was a real PITA. The designers really don't expect you to mess with their stuff too much. Learning this stuff works better when you start with your own documents.But if you really like your CMS, one thing that helps you sort through all the cascading style rules is the Firefox Dom Inspector, which is an add-on like Firebug. It lets you walk through all the elements in your document and look at various properties, including CSS rules. A menu on the right side of the window lets you choose which kind of properties to look at.When you look at CSS Rules for an element, it lists every rule in every style sheet that has any effect on the element, starting with the default rules, and ending with the rules that override any previous rules. This makes it easier to see exactly which rule set in which style sheet is causing the style effect you want to change.

[SAC]

Thank you for that info Deirdre's Dad! I'll certainly download it and have a check - first thing tomorrow... tonight I am like all exhausted for obvious reasons...