PDA

View Full Version : Web Design Advice Needed....CSS


shamrocker
29-01-2003, 07:27 PM
Hello All,

I'm seeking some advice for any web designers out there. I'm currently puting my own site together and am now trying to add some 'frills' to it. I'm trying to make the links look a bit more professional. One of the things I have done is take away yhe underline. This was pretty straignt forward, even for me. Now I am trying to make the link change colour when the mouse hovers over it. I've read lots of online tutorials on it but just can grasp it yet. The tutorials are aimed at using CSS in Dreamweaver MX, which I am using. Unfortunately I'm lost and although I've kind of grasped the code or tags to use for the hover modification, I don't know where to put it or how to make it work. Maybe I need to start from scratch on using CSS first, then maybe it will all make sense. Any expert advice on how to do it or where to see other good tutorials would be very much appreciated?

Many thanks,

Shamrocker

gary
29-01-2003, 09:32 PM
OK, quick CSS tutorial... :)

CSS declarations should be in the <head> </head> bit of your page. They should always start with <style type="text/css"> followed by <!-- and end with --> </style> to comment out the CSS for older browsers. So your page will look like:

<html>

<head>

<title>My Page</title>

<style type="text/css">
<!--

-->
</style>

</head>

<body>

To remove the underline from your links you would have something like this in your CSS:

a {text-decoration: none} or a:link {text-decoration: none}

To change the colour from blue to red when someone hovers over it, just add below that:

a:hover {color: red}

If you want it underlined and red when someone hovers over it:


a:hover {
color: red;
text-decoration: underlined;
}

For a more detailed tutorial, have a look at http://www.w3schools.com/ - it would be well worth your while working your way through the CSS tutorial there. You'll find it's all a lot easier than it seems!

HTH.

Gary

"Your Website" (http://www.managedweb.com) - New FREE Newsletter!

Managed Web
Website Maintenance Services
http://www.managedweb.com

chilleddesign
30-01-2003, 12:58 AM
Hi There

I would recommend using CSS style sheets if you would like i will send you some of mine that i have made and used then all you would have to do is put one line of code in your header of your HTML page and your away. I would always reccommend Style sheets, there much easier in the long run.

Regards

Chris

Designr
30-01-2003, 01:49 AM
I did a quick search on Google and came up with a few links, which may help: http://www.google.com/search?hl=en&ie=ISO-8859-1&q=beginners+CSS+tutorial

Regards
Jay
Design R Web Solutions

shamrocker
30-01-2003, 11:33 AM
Thanks everyone,

I appreciate your help. I've kind of got the hang of it now. Gary gave a very good explanation and I also stimbled across an article in a magazine which helped me further.

I'm now messing around with frames but am having a bit of difficulty getting it right. I was wondering what to save or name each frame as and also the frameset. Which one do I name as Index.htm...the frameset?

I'm not really intending on using frames as I'm aware of their reliability problems and the need to have a second nav bar on the main page. But I'll see how it looks and take it from there.

Cheers,

Shamrocker

gary
30-01-2003, 11:48 AM
Have a look at the W3schools site I gave you above for help with frames:

http://www.w3schools.com/html/html_frames.asp

It's better not to use them though.

Gary

Managed Web
Website Maintenance Services
http://www.managedweb.com

graeme_newcomb
31-01-2003, 05:25 PM
Using frames can create nightmares, especially when designing for a number of diferent browsers. This is mainly caused by differences in the way different browsers render frames. Having said that, we generally always use frames when designing our Site Content Administration sections because one only has to load a menu into a frame once and it will stay there for the duration of the user's session - this is possible because Copntent Admin systems are generally only accessed by a small handful of users and one can optimise for a single browser!

One layout trick we use quite often that kind of gets around some of the mess with frames is to use inline frames <iframe></iframe>. These allow one to place a frame anywhere within a normal web page. We then generally do the overall page layour using tablesand insert an inline frame into a table cellwhen we want to use frames.