Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS text problems

    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

  • #2
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't know if it helps but the website is at

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

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Alexquatermain,
    Try grouping the CSS for your links like this -
    Code:
    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-...ver/index.html


    ...
    Last edited by Excavator; 04-12-2009 at 08:02 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Haha, ok I see why they are called cascading now

    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...

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Alexquatermain View Post
    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 to view/edit code live. The Web Developers Toolbar works well also.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Code:
    <!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

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Good morning Alexquatermain,
    In the code you have online right now you have
    Code:
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •