...

View Full Version : CSS text problems



Alexquatermain
04-12-2009, 05:57 PM
Hello everybody at Coding Forums.

I have just started learning basic CSS for a University project and it's going well, but I have come across a problem.

I am making a page in Dreamweaver using CSS to affect text styles.

I understand that I can do a lot more in CSS than what I am currently doing (e.g. according to your FAQ I shouldn't use tables) but at the moment I am happy just using the basics.

However I have come across a little problem.

I have a white page with green text (defined in CSS)

The navigation bar is a picture used as a table background and the links are text above the navigation bar.

Various tabs on the navigation bar are used for navigation and a white tab indicates the active page, whereas a green tab indicates links to other pages.

However that is causing a problem. When I wrote the text for the links they all showed up as green (as you would expect due to the style sheet) I was, however able to change the links on a green tab to white. Then I made the text into hyperlinks and they now stay green, no matter what.

How do I get them to ignore the style sheet?

I don't understand how you are able to override Css in some instances but not others. Are you able to define custom tags (For Instance <Alex1></Alex1> for the style sheet that I can insert before the links, or is there a better way to do it?

Sorry for the big long explanation, but I don't know what is relevant and what isnt..

Many thanks
Alex

Alexquatermain
04-12-2009, 06:03 PM
I don't know if it helps but the website is at

http://mobi.cityforpeace.co.cc/home.html

Excavator
04-12-2009, 07:18 PM
Hello Alexquatermain,
Try grouping the CSS for your links like this -

a:link, a:active{
font: 9px Verdana, Geneva, Arial, helvetica, sans-serif;
font-weight: bold;
padding: 2px;
text-align: center;
color: #fff;
}
a:visited {
color:#408000;
font-weight: normal;
}
a:hover {
color:#408000;
background-color: #99FF33;
}


See how all the things that don't change are in the a:link group. That will cascade down to style the visited, hover and active states until you specify otherwise.
Does that make sense?

Tabbed menu example here - http://nopeople.com/CSS/menu%20tabs/index.html
and one more - http://nopeople.com/CSS/menu%20tabs-CSS-rollover/index.html


...

Alexquatermain
04-12-2009, 11:40 PM
Haha, ok I see why they are called cascading now :D

However I still can't change the colour to white for the unvisited links...

Also how were you able to access my style sheet online, I wasn't able to, but thought it was because there was a space in the filename, which was going to be changed...

Excavator
04-13-2009, 06:22 AM
However I still can't change the colour to white for the unvisited links...
color:#fff; is what does it.


Also how were you able to access my style sheet online, I wasn't able to, but thought it was because there was a space in the filename, which was going to be changed...

I'm using FireFox with the firebug plugin (http://getfirebug.com/) to view/edit code live. The Web Developers Toolbar (https://addons.mozilla.org/en-US/firefox/addon/60)works well also.

Alexquatermain
04-13-2009, 01:57 PM
Ah right, my bad, I tried to type it out rather than copy & pasting, because I remember better that way... But it seems I missed quite a bit...

I still couldn't change the colour, but using the code at http://www.weethet.nl/english/html_coloredlinks.php worked. Am I right in thinking that my problem was nothing to do with the CSS, but with the HTML as the above link suggests?

And one last question, if you would be so kind...

I understand that Dreamweaver inserts its own code at the start of a page.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Is it ok to remove any of this, because it's a mobile website I am designing I would like to remove any unnecessary code to minimise data charges..

Thankyou so much for your help so far, I was completely stuck, and you not only fixed my problem, but helped me understand what CSS is as well :D

Excavator
04-13-2009, 04:57 PM
Good morning Alexquatermain,
In the code you have online right now you have

a:link, a:active{
font: 9px Verdana, Geneva, Arial, helvetica, sans-serif;
font-weight: bold;
padding: 2px;
text-align: center;
color: FFFFFF;
}
That bit in red is wrong. Should look more like this - color: #FFFFFF;
The validator finds that too. Have a look at the links about validating in my sig below, as well as the tagline about how you can use the validators like a spellchecker.

That bit that you posted and are thinking of removing is the DocType declaration. There is a link about that in my sig also. Don't remove it, it's needed.

Alexquatermain
04-15-2009, 01:49 PM
Thanks, my CSS validates now, which as well as being good practice (I had never come across this before) should help me get a better grade!

I need to work on my HTML coding, although the errors seem to be mostly that I have > instead of />. This is code Dreamweaver has inserted, does it not follow w3c standards? That's shocking if it's true.

My page displays correctly in Dreamweaver, and when I click preview in Firefox, but doesn't seem to display correctly when it's actually online. It's missing the white text, and it's not showing up as bold (although I am going to change this to Strong)

Any ideas there?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum