SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Apr 2002
    Location
    Cambrige, MA
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation CSS Guru's Anyone

    I have a menu system that I am pulling from a db using php and mysql. What I want to do is have the result point to a css style (which they do just fine). The problem is that I cannot seem to expand my style to include 'hover' characteristics and properties.

    Looking at this script, is there anyone familiar with css that might know how I can achieve this?

    *********************

    <STYLE TYPE="text/css">
    <!--
    .menu_top { color: 032DB4; font-size: 9px; font-family: microsoft sans serif; font-weight: bold; text-decoration: none }

    -->
    </STYLE>

    ************************

    Thanks for any of your thoughts.

    Sincerely,

    Tim
    "Bound only by the limitations of your imagination"

  2. #2
    SitePoint Enthusiast fuselodge's Avatar
    Join Date
    Apr 2002
    Location
    india
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi there,
    i seem to get your problem alright,but it really would be easier if you point an url to the particular page in which you're using the code.i'd like to see the problem myself

  3. #3
    SitePoint Member
    Join Date
    Apr 2002
    Location
    Cambrige, MA
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fuselodge,

    Thanks for the pointer. Here you go. And as you'll see if you hover over the link, nothing happens (much due to the fact that I don't have any code in place to change anything).

    http://www.3d-layers.com/start1.php

    Look forward to your thoughts.

    Tim
    "Bound only by the limitations of your imagination"

  4. #4
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hover properties for links should be used:
    Code:
    <style type="text/css">
    <!--
    a {
    	font, color, style declarations
    }
    a:hover {
    	font, color, style declarations
    }
    a:active {
    	font, color, style declarations
    }
    a:visited {
    	font, color, style declarations
    }
    -->
    </style>
    To assign classes to those, simply append .classname to the end of the selector:
    Code:
    <style type="text/css">
    <!--
    a.classname {
    	font, color, style declarations
    }
    a:hover.classname {
    	font, color, style declarations
    }
    et cetera ....
    -->
    </style>
    Good luck.

    -Colin
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  5. #5
    SitePoint Enthusiast fuselodge's Avatar
    Join Date
    Apr 2002
    Location
    india
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey there,
    just as i thought...you used the code for text properties insted of hyperlink properties.
    try this:

    <STYLE>
    <!--
    a:link{font:9px microsoft sans serif;color:#ffffff;font-weight:bold;text-decoration:underline;}
    a:visited{font:9px microsoft sans serif;color:#ffffff;font-weight:bold;text-decoration:underline;}
    a:hover{font:9px microsoft sans serif;color:#edcccc(or any other color of your choice);font-weight:bold;text-decoration:none;}
    --></STYLE>

    you can change the prefernces accordingly.
    tell me if this is what you were looking for!

  6. #6
    SitePoint Member
    Join Date
    Apr 2002
    Location
    Cambrige, MA
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Thank you Colin!!!!

    Works just fine.

    Sincerely,

    Tim
    "Bound only by the limitations of your imagination"

  7. #7
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:

    <script>

    function 
    c(color)
    {
        var 
    c    =    new Array;

        
    // if using hex include #

        
    c[0]    =    'black';
        
    c[1]    =    'white';
        
    c[2]    =    '#606D79';
        
    c[3]    =    '#D0D6DF';
        
    c[4]    =    '#BEC7D3';
        
    c[5]    =    '#A0A8C0';
        

        if (
    color>c.length || color<|| color == nullalert('number less than\nnumber greater than\nor null');
        
        
    //keep adding in the following format and remember if using hex remember the #

        
    return c[color];
    }

    document.write ('<style type="text/css">' +
            
    '<!--'+

            
    'body {'+
            
    'font-family: Verdana, Arial, Sans-Serif;'    +
            
    'font-size: 9pt;' +
            
    'background:'            +    c(4)    +    ';'    +
            
    'margin:0pt; padding:0pt;'    +
            
    'scrollbar-face-color:'        +    c(3)    +    ';'    +
            
    'scrollbar-shadow-color:'    +    c(1)    +    ';'    +
            
    'scrollbar-highlight-color:'    +    c(1)    +    ';'    +
            
    'scrollbar-darkshadow-color:'    +    c(2)    +    ';'    +
            
    'scrollbar-track-color:'    +    c(2)    +    ';'    +
            
    'scrollbar-arrow-color:'    +    c(0)    +    ';'    +
            
    'scrollbar-3dlight-color:'    +    c(4)    +    ';'    +
            
    '}'+

            
    'a:hover     {  color: ' c(1) + '; background-color: ' c(0) + ';}'    +
            
    'a:active     {  color: ' c(0) + '; background-color: ' c(1) + ';}'    +
            
    'a:link     {  color: ' c(0) + '; background-color: ' c(1) + ';}'    +
            
    'a:visited     {  color: ' c(0) + '; background-color: ' c(1) + ';}'    +
            
            
    '-->' +
            
    '</style>');

    </script>

    <center>
        <a href="javascript:void(0)">link</a>
    </center> 

  8. #8
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem Tim. Let us know if you need anything else!

    -Colin
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  9. #9
    SitePoint Member
    Join Date
    Apr 2002
    Location
    Cambrige, MA
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you all for responding back to me. Just as I sent Coliin my gratitude the other responses showed up as well.

    So thanks to Fuselodge and Andrew-J for your thoughts as well!

    Sincerely,

    Tim:
    "Bound only by the limitations of your imagination"

  10. #10
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    np,

    just curious which do you think is easier to read

    Code:
    s = '<style type=\"text/css\">';
    s+= '<!--';
    
    s+= 'body {';
    
    	s+= 'font-family: Verdana, Arial, Sans-Serif	  ;';
    	s+= 'font-size: 9pt				  ;';
    	s+= 'background:		'	+ c(4) +  ';';
    	s+= 'margin:0pt; padding:0pt			  ;';
    	s+= 'scrollbar-face-color:	'	+ c(3) + ';';
    	s+= 'scrollbar-shadow-color:	'	+ c(1) + ';';
    	s+= 'scrollbar-highlight-color:	' 	+ c(1) + ';';
    	s+= 'scrollbar-darkshadow-color:' 	+ c(2) + ';';
    	s+= 'scrollbar-track-color:	' 	+ c(2) + ';';
    	s+= 'scrollbar-arrow-color:	'	+ c(0) + ';';
    	s+= 'scrollbar-3dlight-color:	'	+ c(4) + ';';
    
    s+= '}';
    
    s+= 'a:hover 	{  color: ' + c(1) + '; background-color: ' + c(0) + ';}';
    s+= 'a:active 	{  color: ' + c(0) + '; background-color: ' + c(1) + ';}';
    s+= 'a:link 	{  color: ' + c(0) + '; background-color: ' + c(1) + ';}';
    s+= 'a:visited 	{  color: ' + c(0) + '; background-color: ' + c(1) + ';}';
    
    s+= '-->';
    s+= '</style>';
    
    document.write (s);
    but the one above was aligned neatler in notepad


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
  •