SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    May 2002
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Using multiple CSS classes in links

    Hey guys..I'm trying to figure out how to place my CSS correctly to maintain my styles within hyperlinks.

    I have a TOC section with header links and sub links underneath and I want to use my CSS styles to represent the links correctly. Currently(without links) it looks like this:

    <span class="A">Title Section</span>
    <span class="B">Sub Link 1</span>
    <span class="B">Sub Link 2</span>
    <span class="B">Sub Link 3</span>

    When I use links it references the style within my CSS file which happens to match class B as the link format and as a result, the Title Section loses it's formatting.

    What would be the best way to adjust this code to still maintain the classes correctly while having each line a hyperlink?

    Thanks.

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Location
    MY
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try this

    <a href="" class="A">Heading</a>
    <a href="" class="B">Content</a>

  3. #3
    SitePoint Member
    Join Date
    May 2002
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <a href="" class="A">Heading</a>
    <a href="" class="B">Content</a>

    It doesn't seem to work. It takes on all the attributes of the class tag EXCEPT the color, unfortunately.

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Location
    MY
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    your CSS Class should be like this :-

    .A {color: red; .... }
    .B {color: pink; .... }


    then

    refer to your css file like this:-

    <link rel="stylesheet" type="text/css" href="your css file name">


    then you link should code like this :-

    <a href="" class="A">Heading</a>
    <a href="" class="B">Content</a>

    hope this help !

  5. #5
    SitePoint Member
    Join Date
    May 2002
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's still not working, heh. As I said it takes on all the attributes but the color.

    CSS:
    A {
    text-decoration: none;
    color: Blue;
    font-style : normal;
    }
    .H2 {
    font-family : sans-serif;
    font-size : larger;
    font-weight : bolder;
    color : Red;
    }

    Page:
    <link rel="stylesheet" type="text/css" href="default.css">
    Stuff inbetween....
    <a href="seniors.asp" class="h2">Seniors</a><br>
    <a href="seniors2.asp" class="h1">Guide</a><br>
    <a href="seniors3.asp" class="h1">Session Info</a><br>
    <a href="seniors4.asp" class="h1">Images</a><br>

  6. #6
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS is case sensitive. Try using the following code:
    Code:
    CSS:
    a {
    text-decoration: none;
    color: blue;
    font-style : normal;
    }
    .h2 {
    font-family : sans-serif;
    font-size : larger;
    font-weight : bolder;
    color : red;
    }
    
    Page:
    <link rel="stylesheet" type="text/css" href="default.css">
    Stuff inbetween....
    <a href="seniors.asp" class="h2">Seniors</a><br>
    <a href="seniors2.asp" class="h1">Guide</a><br>
    <a href="seniors3.asp" class="h1">Session Info</a><br>
    <a href="seniors4.asp" class="h1">Images</a><br>

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Location
    MY
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i did tried your code with my IE 6. It looks fine here !

    Hope there is someone better to help you out.

  8. #8
    SitePoint Member
    Join Date
    May 2002
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, trying it from scratch it does work, my apologies. If you looked at this post here before, I still couldn't figure out what was wrong, heh. The trick was not only that I needed <a class="h1"> but that I also had to define

    .h1:Link {} in my CSS file, else A:Link {} would supercede it for some reason.

    Everything appears to be all good now, so thanks for your help guys
    Last edited by NarroC; May 25, 2002 at 14:47.


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
  •