SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 48 of 48
  1. #26
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It's working now on I.E 8, it was just i have no html tag,that's why the I.E 8 cannot render properly my css...again please correct me if i am wrong ralph

  2. #27
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    You've left out a lot of important CSS there. Go back to Paul's code and start with that. Then make one change at a time and test the results, so if you make a mistake, you know where you went wrong. It seems to me you just need to change a few colors.

  3. #28
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jemz View Post
    It's working now on I.E 8 ...
    Yes, but not in Chrome etc. You've left out too much of Paul's CSS as mentioned above.

  4. #29
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You've left out a lot of important CSS there. Go back to Paul's code and start with that. Then make one change at a time and test the results, so if you make a mistake, you know where you went wrong. It seems to me you just need to change a few colors.
    yup the color, i don't know how to use the RGB colors,
    You've left out a lot of important CSS there
    Okay i will try to see what is lacking

  5. #30
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yes, but not in Chrome etc. You've left out too much of Paul's CSS as mentioned above.
    Thank you ralph for letting me know in chrome,okay i will fix this..

  6. #31
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jemz View Post
    i don't know how to use the RGB colors
    Tht's quite easy. If you have Photoshop, open the color palette and choose a color your like (visually) and it will give you the RGB values and the hex values. E.g. black is rgb(0,0,0) or hex #000000.

    If you don't have Photoshop, you can use any of a number of online services, like Color Scheme Designer. Pick the color you want and it will give you the code.

  7. #32
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi, ralph how did paul invisible the sub menu,i don't see the display none

  8. #33
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    why he used margin-left to hide the sub menu and he put valued -999em?
    Code:
    #nav li ul {
    	position: absolute;
    	margin-left: -999em; /* hide menu from view */
    	top: auto;
    	left:0;
    }

  9. #34
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yes, but not in Chrome etc. You've left out too much of Paul's CSS as mentioned above.
    why it did not work on chrome?..i tried to fixed but nothing happen.are all my css is wrong or not in standard?

  10. #35
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Yes, but not in Chrome etc. You've left out too much of Paul's CSS as mentioned above.
    It's working now on chrome,take a look at...by the way some alignment i did not fix and also the color,i just only fix the background color in chrome when it's going to hover..please correct me if i am wrong.


    Code:
    <!Doctype html>
    
    <html lang="en">
    <head>
     <meta charset="utf-8" />
     
     <link rel="stylesheet" href="menu2.css" style="text/css"/>
     
    </head>
    
     <body>
        <ul class="nav">
           <li><a href="#">home</a></li>
    	   <li><a href="#">about</a>
    	       <ul>
    		       <li><a href="#">how</a></li>
    			   <li><a href="#">where</a></li>
    			   <li><a href="#">when</a></li>
    	       </ul>
    	   </li>
    	   <li><a href="#">services</a>
    	      <ul>
    			  <li><a href="#">Web Design</a></li>
    			  <li><a href="#">Internet Marketing</a></li>
    			  <li><a href="#">Hosting</a></li>
    			  <li><a href="#">Domain Names</a></li>
    			  <li><a href="#">Broadband</a></li>
    		  </ul>
    	   </li>
    
        </ul>	
    
     <body>
    </html>


    Code:
     .nav {
      list-style: none;
      padding: 0;
      margin: 0;
    
    }
    
    .nav > li:first-letter{
      text-transform: uppercase;
      
    }
    
    .nav > li{
       float: left;
       margin-right: 0.1em #959597;
       min-width: 8em;
       text-align: center;
       background-color: #E56500;
       border:solid 1px #959597;
    }
    
    
    .nav li a:link,
    .nav li a:visited{
      text-decoration: none;
     
     
    }
    
    .nav li ul {
      list-style: none;
      margin: 0;
      padding: 0;
       
    }
    
    .nav ul li{
      display: none;
    }
    
    
    .nav li:hover  li{
      display: block; 
      padding: 0.1em;
      background-color: #d2cb08;
      color: #bebeb8;
      text-align: justify; 
    }
    /*
    .nav li:hover,
    .nav ul li:hover {
      background-color: #E56500;
      display: block;
      color: #FFF;
    }
    */
    .nav ul li{
      border: solid 1px #959597;
    }
    
    .nav ul li:hover,
    .nav ul li:hover a{
      color: #FFF;
      background-color: #E56500;
    }
    Last edited by jemz; Sep 14, 2012 at 01:20. Reason: I justified the alignment in sub items

  11. #36
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    I've tested it in Chrome and Firefox and it seems to work fine. Well done.

    I might test it in IE later, but I don't have it handy right now.

  12. #37
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I've tested it in Chrome and Firefox and it seems to work fine. Well done.

    I might test it in IE later, but I don't have it handy right now.
    Thank you ralph,..I learned it from you
    By the way can you also please check in safari i don't have safari...Thank you in advance.

  13. #38
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jemz View Post
    i don't have safari...


    Yes, it works in Safari, and Opera, too.

  14. #39
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post


    Yes, it works in Safari, and Opera, too.
    The first letter to uppercase did not work anymore because i have changes,and i tried to put the prefix vendor still doesn't work.

    Code:
    .nav {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .nav li:first-letter{
     -moz-text-transform: uppercase;
     -ms-text-transform: uppercase;
    }
    .nav > li{
       float: left;
       margin-right: 0.1em #959597;
       min-width: 8em;
       text-align: center;
       background-color: #FFF;
       border:solid 1px #959597;
    }
    
    .nav li a:link,
    .nav li a:visited{
      text-decoration: none; 
      color: #606061;
      display: block; /* here i put block because when i am going to hover the about the text will change to white like paul example*/
    
    }
    
    .nav li ul {
      list-style: none;
      margin: 0;
      padding: 0;
       
    }
    
    .nav ul li{
      display: none;
    }
    
    .nav li:hover  li{
      display: block; 
      text-align: justify;
      color: #606061;
    }
    /*
    .nav li:hover,
    .nav ul li:hover {
      background-color: #E56500;
      display: block;
      color: #FFF;
    }
    */
    .nav ul li{
      border: solid 1px #959597;
    }
    
    .nav ul li:hover, .nav li:hover,
    .nav li:hover li a:hover, .nav li:hover a
    {
      color: #FFF;
      background-color: #E56500;
    }
    
    .nav li:hover li a{
      color: #777777;
      background-color: #d2cb08;
    }


    Code:
    <!Doctype html>
    
    <html lang="en">
    <head>
     <meta charset="utf-8" />
     
     <link rel="stylesheet" href="menu2.css" style="text/css"/>
     
    </head>
    
     <body>
        <ul class="nav">
           <li><a href="#">home</a></li>
    	   <li><a href="#">about</a>
    	       <ul>
    		       <li><a href="#">how</a></li>
    			   <li><a href="#">where</a></li>
    			   <li><a href="#">when</a></li>
    	       </ul>
    	   </li>
    	   <li><a href="#">services</a>
    	      <ul>
    			  <li><a href="#">Web Design</a></li>
    			  <li><a href="#">Internet Marketing</a></li>
    			  <li><a href="#">Hosting</a></li>
    			  <li><a href="#">Domain Names</a></li>
    			  <li><a href="#">Broadband</a></li>
    		  </ul>
    	   </li>
    
        </ul>	
    
     <body>
    </html>

  15. #40
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi raplh, it's working now the uppercase

    .nav li a:first-letter{
    text-transform: uppercase;
    }

  16. #41
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post


    Yes, it works in Safari, and Opera, too.
    Thank you for testing it on other browser.

  17. #42
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jemz View Post
    Hi raplh, it's working now the uppercase
    Yes, the more up to date browsers support that.

  18. #43
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Hi ralph,can you please enlighten my mind on this script what does this do?
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" over\\b"), "");
    }

  19. #44
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    It's just a bit of JavaScript to help IE6 with the hover effect. For more details, you'll have to ask about it in the JS forum.

  20. #45
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    ok thanks i will try to ask them.

  21. #46
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Really, IE6 is dead and buried now, so unless you are asking because you want to learn JS, I wouldn't bother.

    I would just leave that code out.

  22. #47
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Really, IE6 is dead and buried now, so unless you are asking because you want to learn JS, I wouldn't bother.

    I would just leave that code out.
    yup i am also learning js...

  23. #48
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,146
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Are you using the same HTML as Paul? If you've changed it at all, post that too.
    Hi ralph, I am having problem on this my drop down menu i want to put scrollbar on my subitems which is very long,but i could not display it properly...I want that when i am going to hover the subitems it will display in the left side,and if this have many items the scrollbar will be visible,...can you help me on this,i am confuse.

    Thank you in advance. here is my css and html file.

    Code:
    .nav {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .nav li a:first-letter{
     text-transform: uppercase;
    
    }
    
    .nav > li{ 
       float: left;
       margin-right: #959597 0.1em;
       min-width: 8em;
       text-align: center;
       background-color: #FFF;
       border:solid 1px #959597;
    }
    
    .nav li a:link,
    .nav li a:visited{
      text-decoration: none; 
      color: #606061;
      display: block;
    }
    
    .nav li ul {
      list-style: none;
      margin: 0;
      padding: 0;
       
    }
    
     .nav ul li,
     .nav #scroll1div ul li,
     #scroll1,#scroll2,#scroll3{
      display: none;
    }
    
    .nav li:hover  li,
    .nav li:hover #scroll1,
    .nav li:hover #scroll2,
    .nav li:hover #scroll3
    {
      display: block;
      text-align: justify;
      color: #606061;
    }
    
    .nav ul li{
      border: solid 1px #959597;
    }
    
    .nav ul li:hover, .nav li:hover,
    .nav li:hover li a:hover, .nav li:hover a
    {
      color: #FFF;
      background-color: #E56500;
    }
    
    .nav li:hover li a{
      color: #777777;
      background-color: #d2cb08;
    }
    html file

    Code:
      <!Doctype html>
    
    <html lang="en">
    <head>
     <meta charset="utf-8" />
     
     <link rel="stylesheet" href="menu2.css" style="text/css"/>
     
    </head>
    
     <body>
        <ul class="nav">
           <li><a href="#">home</a>
    			<ul>
    				<li><a href="#">how</a></li>
    				<li><a href="#">where</a></li>
    				<li><a href="#">when</a></li>
    			</ul>
    		</li>
    	   <li><a href="#">about</a>
              <div style="overflow:auto;height:200px;" id="scroll1">
                   <ul>
                       <li><a href="#">A</a></li>
                       <li><a href="#">B</a></li>
                       <li><a href="#">C</a></li>
                       <li><a href="#">D</a></li>
                       <li><a href="#">E</a></li>
                       <li><a href="#">F</a></li>
                       <li><a href="#">G</a></li>
                       <li><a href="#">H</a></li>
                       <li><a href="#">I</a></li>
                       <li><a href="#">J</a></li>
                       <li><a href="#">L</a></li>
                       <li><a href="#">M</a></li>
                       <li><a href="#">N</a></li>
                       <li><a href="#">O</a></li>
                       <li><a href="#">P</a></li>
                       <li><a href="#">Q</a></li>
                   </ul>
              </div>
           </li>
    
    	    <li><a href="#">when</a></li>
    
    
    	   <li><a href="#">services</a>
    	      <ul>
    			  <li><a href="#">Web Design</a></li>
    			  <li><a href="#">Internet Marketing</a></li>
    			  <li><a href="#">Hosting</a>
                      <div style="overflow:auto;height:200px;" id="scroll2">
                          <ul>
                              <li><a href="#">A</a></li>
                              <li><a href="#">B</a></li>
                              <li><a href="#">C</a></li>
                              <li><a href="#">D</a></li>
                              <li><a href="#">subitems</a>
                                  <div style="overflow:auto;height:200px;" id="scroll3">
                                      <ul>
                                          <li><a href="#">A</a></li>
                                          <li><a href="#">B</a></li>
                                          <li><a href="#">C</a></li>
                                          <li><a href="#">D</a></li>
                                          <li><a href="#">E</a></li>
                                          <li><a href="#">F</a></li>
                                          <li><a href="#">G</a></li>
                                          <li><a href="#">H</a></li>
                                          <li><a href="#">I</a></li>
                                          <li><a href="#">J</a></li>
                                          <li><a href="#">L</a></li>
                                          <li><a href="#">M</a></li>
                                          <li><a href="#">N</a></li>
                                          <li><a href="#">O</a></li>
                                          <li><a href="#">P</a></li>
                                          <li><a href="#">Q</a></li>
                                      </ul>
                                  </div>
    
    
    
                              </li>
                              <li><a href="#">F</a></li>
                              <li><a href="#">G</a></li>
                              <li><a href="#">H</a></li>
                              <li><a href="#">I</a></li>
                              <li><a href="#">J</a></li>
                              <li><a href="#">L</a></li>
                              <li><a href="#">M</a></li>
                              <li><a href="#">N</a></li>
                              <li><a href="#">O</a></li>
                              <li><a href="#">P</a></li>
                              <li><a href="#">Q</a></li>
                          </ul>
                      </div>
                  </li>
    			  <li><a href="#">Domain Names</a></li>
    			  <li><a href="#">Broadband</a></li>
    		  </ul>
    	   </li>
    
        </ul>	
    
     </body>
    </html>


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
  •