SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2001
    Location
    m
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how do i make different CSS styles in one page??

    i want to make one froup of links in blue and other group in the same page in white

    how can do it?!

  2. #2
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Simple with contextual selectors:
    Code:
    // put one set of links in a containing element
    // (i.e. <div>, <td>, <th>, <p>, <span>, etc.)
    .setOfLinks a {
      color: #fff;
      }
    
    // for the other links on the page
    a {
      color: #00f;
      }
    ~~Hope This Helps

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2001
    Location
    m
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmmmm i don't get it...

    im using frontpage98

    and i put this code in the HEAD:




    <style type="text/css">

    A:link {
    COLOR: blue
    ; TEXT-DECORATION: none
    }
    A:visited {
    COLOR: blue
    ; TEXT-DECORATION: none
    }
    A:hover {
    COLOR: lime
    ; FONT-WEIGHT: normal; TEXT-DECORATION: Bold
    }
    </style>


    how can i make another one for another group?

  4. #4
    SitePoint Addict
    Join Date
    Jul 2001
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this...

    <style type="text/css">
    A:link {
    COLOR: blue;
    TEXT-DECORATION: none;
    }
    A:visited {
    COLOR: blue;
    TEXT-DECORATION: none;
    }
    A:hover {
    COLOR: lime;
    FONT-WEIGHT: bold;
    }
    A.foo:link {
    COLOR: red;
    TEXT-DECORATION: none;
    }
    A.foo:visited {
    COLOR: red;
    TEXT-DECORATION: none;
    }
    A.foo:hover {
    COLOR: green;
    FONT-WEIGHT: bold;
    }
    </style>

    Then in the link tags you want different, add the class to them like so...

    <a href="pagename.html" class="foo"> different color </a>

  5. #5
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or
    Code:
    <style type="text/css">
      .blueLinks a:link {
        color: #00f;
      }
      // Rest of your style sheet...
    </style>
    <!-- ...miscellaneous HTML code... -->
    <div class="blueLinks">
      <a href="page.html">This link is blue.</a>
      <a herf="page2.html">I am blue as well.</a>
    </div>
    <a href="page3.html">But, I am some other color</a>
    That way you won't have to append a class to every time you need a certain color link. That works especially is you have a big cluster of links and you don't want to keep writing: <a class="...

  6. #6
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ian: I have tried your last method in a project Im currently working on but can get it to work.

    I have defined my a: in an external stylesheet and added the extra set as you have posted. What I want is for a particular set of links to have a different hover colour that the normal ones.

    Here is the CSS:

    Code:
    a  {
    	font-size : 10px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-weight : normal;
    	font-style : normal;
    	color : #000066;
    }
    
    a:Visited  {
    	font-size : 10px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-weight : normal;
    	font-style : normal;
    	color : #000066;
    }
    
    a:Active  {
    	font-size : 10px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-weight : normal;
    	font-style : normal;
    	color : #000066;
    }
    
    a:Hover  {
    	font-size : 10px;
    	font-family:Verdana, Arial, Helvetica, "MS Sans Serif";
    	font-weight : bold;
    	font-style : normal;
    	color : #000066;
    }
    
    .menulinks a:link {
    	font-size : 10px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-weight : normal;
    	font-style : normal;
    	color : #000066;
    }
    
    .menulinks a:Visited {
    	font-size : 10px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-weight : normal;
    	font-style : normal;
    	color : #000066;
    }
    
    .menulinks a:Active {
    	font-size : 10px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-weight : normal;
    	font-style : normal;
    	color : #000066;
    }
    
    .menulinks a:Hover {
    	font-size : 10px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-weight : normal;
    	font-style : normal;
    	color : ##0033CC;
    }
    and here is the HTML:

    Code:
    <div class="menulinks">
                <td align="left" valign="top" height="137" rowspan="3" width="137"><br>
                  <b><a href="testlink.htm">GLOBUS</a><br>
                  <br>
                  Core<br>
                  <br>
                  Corporate/<br>
                  Commercial<br>
                  <br>
                  Private Banking<br>
                  <br>
                  Retail Banking<br>
                  <br>
                  Risk Management<br>
                  <br>
                  Trade Finance<br>
                  <br>
                  Treasury/<br>
                  Investment<br>
                  <br>
                  Information <br>
                  Request<br>
                  <br>
                  JBase<br>
                  <br>
                  Home</b></td>
              </div>
    Any ideas why it isnt working? The testlink I have added is still acting witht he normal a: behaviours. Cheers

  7. #7
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gee, it should work, I think... That code is following the W3's rules on Contextual Selectors.

    Anyway, is it not working in all browsers or just earlier browsers? If I'm not mistaken, IE5 & 6, NS6/Mozila, and Opera5 & 6 all support contextual selectors. I don't know if NS4 does, but given its track record, I think that's highly unlikely.

    There are a few things that you can trim down in the code, so here's my suggestion on the code:
    Code:
    a  {
    	font-size: 10px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	color: #000066;
    }
    
    
    a:Hover  {
    	font-size: 10px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-weight: bold;
    }
    
    .menu { 
    	width: 137px;
    	font-weight: bold;
    	text-align: left;
    }
    
    .menu a:hover {
    	color: #0033CC;
    }
    Code:
    <td valign="top" rowspan="3">
    	<p><a href="testlink.htm">GLOBUS</a></p>
    	<p>Core</p>
    	<p>Corporate/<br>Commercial</p>
    	<p>Private Banking</p>
    	<p>Retail Banking</p>
    	<p>Risk Management</p>
    	<p>Trade Finance</p>
    	<p>Treasury/<br>Investment</p>
    	<p>Information</p>
    	<p>Request</p>
    	<p>Jbase</p>
    	<p>Home</p>
    </td>
    Anyway, after a more in-depth analysis of your code, I spotted that you had used two pound signs (##) where you specified your hover color:
    Code:
    .menulinks a:Hover {
    	font-size : 10px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-weight : normal;
    	font-style : normal;
    	color : ##0033CC;
    }
    That's probably what is causing you grief. :-)

    ~~Hope This Helps

  8. #8
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    D'oh! Thanks Ian

    I will also take your comments on the optimisation of the code on board too.

    (Home from work for the weekend now so cant do anything til monday! :-( Dont you just hate it when that happens! )

  9. #9
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, the hover now works, but for some reason the links are not taking on the 11px fontsize?

    All normal links are 10px, but these links using the .menu class I want to be 11px.

    But they appear as 10px when normal but enlarge to 11px when rolled over.

    Code:
    a  {
    	font-size: 10px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	color: #000066;
    }
    
    
    a:Hover  {
    	font-size: 10px;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-weight: bold;
    }
    
    .menu a:link { 
    		font-size: 11px;
    		width: 137px;
    		font-weight: bold;
    		text-align: left;
    }
    
    .menu a:hover {
    		font-size: 11px;
    		color: #0033CC;
    }
    The class for the links is defined in a div as above in the previous post. I have been spending ages doing this, even defining each individual <a> with the class doesnt work.

    Please help (again )

    Glen

  10. #10
    Back in Action Winged Spider's Avatar
    Join Date
    Jun 2001
    Location
    outside my mind
    Posts
    900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Contextual Selectors never seem to work out in some browsers.

    Have you tested in Netscape 6.2 or Mozilla?

    It will probably work in those browsers but not In IE.

    The same things happens for something like
    Code:
    p+p { style:style; }
    Might want to check some CSS bug reports to see were and when your method won't work.


  11. #11
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tested it in Netscape 6.2 and still no joy! ulling my hair out over this one!

    Help!

  12. #12
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think that's because you've already visited the links. The visited pseudo-class doesn't seem to inherit from the link pseudo-class, unfortunately. Try:
    Code:
    a  {
      font-size: 10px;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      color: #000066;
    }
    
    
    a:hover  {
      font-weight: bold;
    }
    
    .menu a {
      font-size: 11px;
      width: 137px;
      font-weight: bold;
      text-align: left;
    }
    
    .menu a:hover {
      color: #0033CC;
    }
    ~~Hope This Helps (again ;-)

  13. #13
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A million thankyous Ian, you are the CSS daddy!

  14. #14
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <humble>I'm just glad to help...</humble> :-D

    Thanks!


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
  •