SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    Canada
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I was wondering how you use an external CSS file along with a CLASS...I always end up having to put the CLASS inside an <a> tag!

    So in a way it's not a lot of space saving compared to writing the font tag.

    As an example:

    <a class="navbar">Some text</a>
    <br><a class="navbar">Some other text</a>
    <br><a class="navbar">Some other text</a>
    <br><a class="navbar">Some other text</a>

    Do you see what I mean? How do we make it easier? I tried putting the class inside a <div> tag, inside a <td> and it simply doesn't work!

    Let me know how we do this...and remember it's an external CSS file, not an inline one.

    Cheers!
    CG Focus

    Focusing On CG Graphics.

  2. #2
    SitePoint Guru sowen's Avatar
    Join Date
    Feb 2001
    Location
    Stockport, UK
    Posts
    729
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you can do it like this

    <span class="navbar">
    <a>Some text</a><br />
    <a>Some other text</a><br />
    <a>Some other text</a><br />
    <a>Some other text</a></span>

    But I ready to be corrected

  3. #3
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It all depends on how you are defining the CLASS.

    If you do this:

    a.someStyle {some attribute }

    then you can't use that style on anything BUT an A tag.

    This would not work:

    <div class="someStyle">some text</div>

    If you want to create a CLASS that can be used wth any TAG or element, then create an "empty" CLASS (my words) like so.

    .anotherStyle {some attribute}

    Then you can call that style anyway you want.

    <div class="anotherStyle">some text</div>

    <td class="anotherStyle">text in a table cell</td>

    <a class="anotherStyle">a hyper-link</a>

    and my favorite:

    <span class="anotherStyle">text inside a SPAN tag</span>

    One thing that I would check is make sure that you are NOT using underscores in your class names like so:

    .some_Style {declaration}

    There has been some discussion over the past few days about this and apparently CSS in general does not read an underscore in a CLASS name.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  4. #4
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    Canada
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks,

    Indeed I use a lot of .SomeStyle and a.hover.SomeStyle and so on...will try your trick as it's not making me save any space putting an <a> tag on every text.

    Cheers!
    CG Focus

    Focusing On CG Graphics.

  5. #5
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,811
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'd use the <span class="foo"> option, it invloves less code that the repeated <a class="foo"> option. Just make sure, as Creole said, that you have a tag independent class ( .foo {fee:#332211} )

    H
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  6. #6
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    Canada
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The SPAN tag doesn't work if the CSS is an external file, it only works with an internal css file.

    Cheers!
    CG Focus

    Focusing On CG Graphics.

  7. #7
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ummmm....

    no...

    The SPAN tag works just fine using an external stylesheet.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  8. #8
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    Canada
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm...why is it working when I move the css from external to inline then?

    Here is an example of a class I have:

    .sidebar {
    font-family: arial, helvetica, sans-serif;
    font-size : 13px;
    font-weight : normal;
    font-style : normal;
    color : #000000;
    text-decoration : none;
    }

    A:hover.sidebar {
    font-family : arial, helvetica, sans-serif;
    font-size : 13px;
    font-weight : normal;
    font-style : normal;
    text-decoration : underline;
    text-transform : none;
    color : #F2F2F2;
    background-color : #336699
    }

    For now it works fine if I put the class inside an <a> tag and doesn't if I use it in a <span> or a <div> tag.

    Cheers!
    CG Focus

    Focusing On CG Graphics.

  9. #9
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    first off, you have your style set up wrong...it should be:

    a.sidebar:hover

    instead of

    A:hover.sidebar

    sidebar is the name of the class, not part of the attribute. It's also a good idea to leave everything in lower case for xHTML compliance.

    When you call this class you would say

    <a href="somepage.html" class="sidebar">some text</a>
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  10. #10
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    Canada
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh! thanks for the tip but it's weird as all my CSS works fine in IE and NS6! And I have seen a lot of sites using this formula, I have been using this way for over 2 years...that is weird.

    Thanks again.

    Cheers!

    [update]: ok it still won't work inside a <div> or <span> tag though.
    Last edited by Flywaver; May 3, 2001 at 05:53.
    CG Focus

    Focusing On CG Graphics.

  11. #11
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    stop!

    OK, let's start this all over again.

    1) Tell me what you are trying to accomplish and how you are going about doing it.

    2) A noticed a few more things that might be giving you trouble.

    a) I don't know if you gave me your whole stylesheet, but you are only declaring the HOVER style. That means that your text will only change when you mouseover it.

    b) You have two styles with the same name. You are calling both of the ones you posted "sidebar". That could be causing your problem. Each style needs to have a unique name or id. If you make the name descriptive it will help you at a later date.

    c) if you want to style a hyperlink, then you need to use the a:hover method. That is the most reliable and indeed the "right" way to do it.

    d) In your .sidebar style, you tell the font-weight and the font-style to be "normal". You don't need to do that as "normal" is the default.

    If you want to style any other piece of text or element, then any other HTML tag can be used. As I said before, the reason why I use SPAN is because SPAN has NO attributes of it's own. That means that you can do anything you want to with it without worrying about any inherent styles.

    So, answer the two questions I asked you at the top and we can start off from scratch OK? I want to help you, but I jumped into the middle instead of finding out the problem.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  12. #12
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    Canada
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok,

    First of all, all my sites use these styles and they all work fine so obviously it shouldn't be that bad.

    Secondly, you need a regular state, a hover state, a vlink and an active state in order to get both NS and IE to get it all right...if you miss one state NS will freak out especially if you have any transformation.

    Here is one example used on one of my sites and again, it works in both NS6 and IE5.x:

    A:link.navlink {
    font-family: verdana, arial, helvetica, sans-serif;
    font-weight : bold;
    font-style : normal;
    font-size: 15px;
    color : #000080;
    text-decoration : none;
    }

    A:hover.navlink {
    font-family: verdana, arial, helvetica, sans-serif;
    font-weight : bold;
    font-style : normal;
    font-size: 15px;
    color : #000000;
    text-decoration : underline;
    }

    A:active.navlink {
    font-family: verdana, arial, helvetica, sans-serif;
    font-weight : bold;
    font-style : normal;
    font-size: 15px;
    color : #000000;
    text-decoration : underline;
    }

    A:visited.navlink {
    font-family: verdana, arial, helvetica, sans-serif;
    font-weight : bold;
    font-style : normal;
    font-size: 15px;
    color : #000080;
    text-decoration : none;
    }

    I use it in <a> tags though.

    So, where are the mistakes if it works on my sites? What I am trying to achieve was in my first post in this thread, which is *try* to use the CSS in a <div> or a <span> or a <td> tag or whatever tag I want to use it with. I have an external css file for all sites and pages, that way you don't have 100 lines of code in each pages by trying to save some space by not having any <font tags>.

    You can have a look at my css file here:
    http://www.thealphachannel.com/site.css

    I just find that so many sites have all the css perfectly rendered in IE and if you load it up in NS 4.x or 6.x it is simply awful or incompatible...I just want my visitors to see it as closely as possible of what I see in IE.

    Cheers!
    CG Focus

    Focusing On CG Graphics.

  13. #13
    PHP Developer W1LL's Avatar
    Join Date
    Apr 2001
    Location
    Leicester, UK
    Posts
    459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's a very simple solution to this. You said the CSS file is external right? So in the header you need to put:

    <link rel="stylesheet" type="text/css" href="cssfile.css">

    That is all, then carry on with your class="someStyle" as normal.

    - Will

  14. #14
    SitePoint Zealot
    Join Date
    Jun 2000
    Location
    Canada
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh! it's that way since I started doing CSS files.

    I figured out a few tricks while developing my new site that makes the CSS to look nice in all browsers, I am now a happy camper.

    Cheers!
    CG Focus

    Focusing On CG Graphics.

  15. #15
    SitePoint Zealot totenmaske's Avatar
    Join Date
    Dec 2000
    Location
    Tucson, Arizona, USA
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...that's why I love these forums! This one thread showed me how to do exactly what I came here to ask how to do. I needed to establish two different sets of <A> anchor types with completely different attributes.

    Thanks All

  16. #16
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    croele saves the day! cheers
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein


Bookmarks

Posting Permissions

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