SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict noise's Avatar
    Join Date
    Sep 2002
    Location
    Sweden
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    change css in <a href

    hey!

    here is the link:
    PHP Code:
    <class="link" href="index.php?link_loop=1">Personalen</a
    can i somehow add or remove css options (parametars) right here inside the link?
    something like

    PHP Code:
    <class="link -something or + something" href="index.php?link_loop=1">Personalen</a
    lol i suppose i cant do it like this..

    any ideas?


    //noise

  2. #2
    SitePoint Wizard Rick's Avatar
    Join Date
    Oct 2002
    Location
    Lancashire, UK
    Posts
    3,847
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could just use classes:
    Code:
    <a href="blah blah blah" class="myLink">Blah Blah Blah</a>
    Or you could put styles into the link directly:
    Code:
    <a href="blah.html" style="font-family: Verdana, Arial; font-size: 11px; ">Blah Blah Blah</a>
    You can use pretty much any CSS code relevent to the tag your using like that.

    Sorry but I havn't seen how to use two classes in a link tag, if it can be done using valid code. I know that if you use the class arguement twice the 2nd will overide the 1st though:
    Code:
    <a href="blah.html" class="myLink1" class="myLink2">Blah Blah Blah</a>
    The class of that link would be myLink2

    Hope this helps and good luck

    Rick
    Rick

  3. #3
    SitePoint Addict noise's Avatar
    Join Date
    Sep 2002
    Location
    Sweden
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanx for the tip.. good to know but my problem is still here.

    my hoover is working too slow. i think that i have too much parametars (that i really dont need... or do i? )

    could please look at this and help me optimise it..

    PHP Code:
    a.link:active {font-familyVerdanaArialHelveticasans-seriffont-size10px
    font-stylenormalline-heightnormalfont-weightnormalfont-variantnormal
    text-transformnonebackground-attachmentfixedtext-decorationnone
    border-stylenoneword-spacing1pxcolorblack;
     
    text-alignleft;
      
    border1px solid #bfbfbf;
     
    background-colorwhite;
     
    height20px;
     
    background-position20px;
      
    margin-bottom10px;
      
    width150px;
      
    vertical-alignmiddle;
        
    padding-top3px;
      
    padding-left10px;
    }

    a.link:link {15:16 2002-10-31Helveticasans-seriffont-size10px
    font-stylenormalline-heightnormalfont-weightnormalfont-variantnormal
    text-transformnonebackground-attachmentfixedtext-decorationnone
    border-stylenoneword-spacing1pxcolorblack;
     
    text-alignleft;
      
    border1px solid #17272e;
     
    background-color#5189a1;
     
    height20px;
     
    background-position20px;
      
    margin-bottom10px;
      
    width150px;
      
    vertical-alignmiddle;
        
    padding-top3px;
      
    padding-left10px;
    }

    a.link:visited {font-familyVerdanaArialHelveticasans-seriffont-size10px
    font-stylenormalline-heightnormalfont-weightnormalfont-variantnormal
    text-transformnonebackground-attachmentfixedtext-decorationnone
    border-stylenoneword-spacing1pxcolorblack;
     
    text-alignleft;
      
    border1px solid #17272e;
     
    background-color#5189a1;
     
    height20px;
     
    background-position20px;
      
    margin-bottom10px;
      
    width150px;
      
    vertical-alignmiddle;
        
    padding-top3px;
      
    padding-left10px;
      }

    a.link:hover {font-familyVerdanaArialHelveticasans-seriffont-size10px
    font-stylenormalline-heightnormalfont-weightnormalfont-variantnormal
    text-transformnonebackground-attachmentfixedtext-decorationnone
    border-stylenoneword-spacing1pxcolor#99CC33;
     
    text-alignleft;
      
    border1px solid #CDCDCD;
     
    background-colorwhite;
     
    height20px;
     
    background-position20px;
      
    margin-bottom10px;
      
    width150px;
      
    vertical-alignmiddle;
        
    padding-top3px;
      
    padding-left10px;
                } 
    maby i'm placing the class="link" at the wrong place or something..
    i remember doing this for before and hoover was working great.. colors changed instantly. but now it has noticable delay before it actually changes colors.

    maby use layers (rather not tho)??




    please help


    //noise

  4. #4
    SitePoint Wizard Rick's Avatar
    Join Date
    Oct 2002
    Location
    Lancashire, UK
    Posts
    3,847
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow thats alot of code for each state of the link!

    You might want to try removing some of the code that isn't needed from the code for each state of the link.

    My normal way of doing this is to defin stuff like font face, size etc in a class, and just use the a.class etc for the change. I.e:
    PHP Code:
        .underline {
    font-familyVerdanaArialHelveticasans-serif;
    font-size10px
    font-stylenormal;
    line-heightnormal;
    font-weightnormal;
    font-variantnormal
    text-transformnone;
    background-attachmentfixed;
    text-decorationnone;
    }

        
    A.underline:link color#0000ff; text-decoration: none; }
        
    A.underline:active color#0000ff; text-decoration: none; }
        
    A.underline:visited color#0000ff; text-decoration: none; }
        
    A.underline:hover color#ff0000; text-decoration: underline; } 
    I prefer this type of thing as it reduces the amount of code that needs to be loaded (when I have many classes in a page the amount of code can really add up) and it also makes managing it easer. This way if I want to change a font I can change one bit of code and the entire class will be effected.

    Hope this helps and good luck

    Rick
    Rick


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
  •