SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Works in Chrome not Firefox

    Right have made zoom button which work fine within Chrome but not Firefox

    HTML Code:
    <input type="button" value="A" ONCLICK="zoomin();" class="zoombutton" >
    <input type="button"  value="a" ONCLICK="zoomout();" class="zoombutton" >
    Code:
    <script language="JavaScript" type="text/javascript">
    
    function zoomin(){
    if(parent.parent.document.body.style.zoom!=0) 
    parent.parent.document.body.style.zoom*=1.2; 
    else 
    parent.parent.document.body.style.zoom=1.2;
    }
    function zoomout(){
    if(parent.parent.document.body.style.zoom!=0) 
    parent.parent.document.body.style.zoom*=0.833; 
    else 
    parent.parent.document.body.style.zoom=0.833;
    }
    
    </script>
    Instead of creating a new topic, I am trying to implement and drop down menu, but me being stupid and deciding to want to do this at the end is there a simple way of implementing one without re modifying the entire css?

    HTML Code:
    <ul>
    <li><a href="#" id="homenav">HOME</a></li>
    <li><a href="#" id="aboutus">ABOUT US</a></li>
    <li><a href="#" id="services">OUR SERVICES</a></li>
    <li><a href="#" id="working">WORKING FOR US</a></li>
    <li><a href="#" id="faqs">FAQS</a></li>
    <li><a href="#" id="contact">CONTACT US</a></li>
    </ul>
    Code:
    .nav{
    	width:100%;
    	background:url(images/nav_bg.jpg) repeat-x;
    	height:42px;
    	clear:both;
    	
    }
    
    .nav ul {  
        margin: 0 auto;  
        width: auto;  
    	padding-left:15px;
        list-style: none; 
    	
    }  
    
    .nav ul li {  
        float: left;
    	
    }  
      
    .nav ul li a {  
            display: block;  
            margin-right: 20px;
    		padding-left:20px;
    		padding-right:20px;
    		color:#FFF;
            width: auto;  
            font-size: 13px;  
    		font-weight:bolder;  
            text-align: center;  
            text-decoration: none;
    		line-height:42px;  
    }
    
    .nav ul li a:hover {  
            display: block;  
            margin-right: 20px;
    		padding-left:20px;
    		padding-right:20px;
    		color:#FFF;
            width: auto;  
            font-size: 13px;  
    		font-weight:bolder;  
            text-align: center;  
            text-decoration: none;
    		line-height:42px;
    		background:url(images/nav_hover.jpg);  
    }
    Thanking You
    Adam

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your code or comments don't say clearly what is it that you want.

    So, starting from this, probably, what exactly is it that you want?

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
      "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en"><head>
    
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Drop down question</title>
     
      <style type="text/css">
        .nav{
          width:100%;
          background:url(images/nav_bg.jpg) repeat-x;
          height:42px;
          clear:both;
        }
    
        .nav ul {  
          margin: 0 auto;
          padding-left:15px;
          list-style: none; 
        }  
    
        .nav ul li {  
          float: left;
        }  
          
        .nav ul li a {  
          display: block;  
          margin-right: 20px;
          padding-left:20px;
          padding-right:20px;
          /*color:#FFF;*/
          font-size: 13px;  
          font-weight:bolder;  
          text-align: center;  
          text-decoration: none;
          line-height:42px;  
        }
    
        .nav ul li a:hover {  
          background:url(images/nav_hover.jpg);  
        }
      </style>
      
    </head><body>
    
      <div class="nav">
        <ul>
          <li><a href="#" id="homenav">HOME</a></li>
          <li><a href="#" id="aboutus">ABOUT US</a></li>
          <li><a href="#" id="services">OUR SERVICES</a></li>
          <li><a href="#" id="working">WORKING FOR US</a></li>
          <li><a href="#" id="faqs">FAQS</a></li>
          <li><a href="#" id="contact">CONTACT US</a></li>
        </ul>
      </div>
    
    </body></html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm just looking for a drop down to appear when you either hover or click on the main link. Preferebly using CSS but if jQuery is needed then that is fine.

    Something similar to this:

    http://designreviver.com/wp-content/...0/example.html

  4. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://htmldog.com/articles/suckerfish/dropdowns/

    You'll notice that the "drop-down", is another <ul>, inside a <li>.

    This is because of accessibility issues. And it's more of a drill than a drop, so a better name for it would be a drill-down menu.

    Code:
        <ul>
          <li><a href="#" id="homenav">HOME</a></li>
          <li><a href="#" id="aboutus">ABOUT US</a></li>
          <li><a href="#" id="services">OUR SERVICES</a>
            <ul>
              <li><a href="#">Service#1</a></li>
              <li><a href="#">Service#2</a></li>
            </ul>
          </li>
          <li><a href="#" id="working">WORKING FOR US</a></li>
          <li><a href="#" id="faqs">FAQS</a></li>
          <li><a href="#" id="contact">CONTACT US</a></li>
        </ul>

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Righty, thank you for the link very helpful I've got to the final stage:

    HTML Code:
    <ul id="nav">
    <li><a href="#" id="homenav">HOME</a></li>
    <li><a href="#" id="aboutus">ABOUT US</a></li>
    <li><a href="#" id="services">OUR SERVICES</a>
            <ul>
                    <li><a href="#">Desktop</a></li>
    <li><a href="#">Blah Blash</a></li>
          	</ul>
    </li>
    <li><a href="#" id="working">WORKING FOR US</a></li>
    <li><a href="#" id="faqs">FAQS</a></li>
    <li><a href="#" id="contact">CONTACT US</a></li>
    </ul>
    Code:
    .nav{
    	width:100%;
    	background:url(images/nav_bg.jpg) repeat-x;
    	height:42px;
    	clear:both;
    	
    }
    
    .nav ul {  
        margin: 0 auto;  
        width: auto;  
    	padding-left:15px;
        list-style: none; 
    	
    }  
    
    
    .nav ul li {  
        float: left;
    	
    }  
      
    .nav ul li a {  
            display: block;  
            margin-right: 20px;
    		padding-left:20px;
    		padding-right:20px;
    		color:#FFF;
            width: auto;  
            font-size: 13px;  
    		font-weight:bolder;  
            text-align: center;  
            text-decoration: none;
    		line-height:42px;  
    }
    
    .nav ul li a:hover {  
            display: block;  
            margin-right: 20px;
    		padding-left:20px;
    		padding-right:20px;
    		color:#FFF;
            width: auto;  
            font-size: 13px;  
    		font-weight:bolder;  
            text-align: center;  
            text-decoration: none;
    		line-height:42px;
    		background:url(images/nav_hover.jpg);  
    } 
    
    
    	#nav, #nav ul {
    	padding: 0;
    	margin: 0;
    	list-style: none;
    }
    
    #nav a {
    	display: block;
    	
    }
    
    #nav li {
    	float: left;
    	margin-left:10px;
    }
    #nav li ul {
    	position: absolute;
    	width:200px;
    	left: -999em;
    	background:#695e62;
    }
    
    
    #nav li:hover ul, #nav li.sfhover ul {
    	left: auto;
    }
    All looks fine until you hover over a link in the sub menu, it is picking up the class nav that I have used for my main nav and picking up its hover attributes. I basically want it to be a grey back background with my img at 200px.

  6. #6
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A link or a more complete page code, like the one I provided, would help. I'm having difficulties picturing your problem.

    .nav and #nav... Not a good idea.

    Also, you don't need to reiterate rules from .nav ul li a in .nav ul li a:hover.
    background:url(images/nav_hover.jpg); will do.

  7. #7
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    You'll notice that the "drop-down", is another <ul>, inside a <li>.
    Code:
        <ul>
          <li><a href="#" id="homenav">HOME</a></li>
          <li><a href="#" id="aboutus">ABOUT US</a></li>
          <li><a href="#" id="services">OUR SERVICES</a>
            <ul>
              <li><a href="#">Service#1</a></li>
              <li><a href="#">Service#2</a></li>
            </ul>
          </li>
          <li><a href="#" id="working">WORKING FOR US</a></li>
          <li><a href="#" id="faqs">FAQS</a></li>
          <li><a href="#" id="contact">CONTACT US</a></li>
        </ul>
    Not sure what you are saying here, you do
    Code:
        <ul>
          <li><a href="#" id="services">OUR SERVICES</a>
            <ul>
              <li><a href="#">Service#1</a></li>
              <li><a href="#">Service#2</a></li>
            </ul>
          </li>
        </ul>
    vs
    Code:
        <ul>
          <li><a href="#" id="services">OUR SERVICES</a></li>
            <ul>
              <li><a href="#">Service#1</a></li>
              <li><a href="#">Service#2</a></li>
            </ul>
        </ul>
    Cause block one is proper coding, not "makes it accessible." Check out YUI Menu, it is better than suckerfish
    Ryan B | My Blog | Twitter

  8. #8
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @rguy84

    Could you please be more clear. I don't understand weather you're agreeing or not with:

    Code:
          <li><a href="#" id="services">OUR SERVICES</a>
            <ul>
              <li><a href="#">Service#1</a></li>
              <li><a href="#">Service#2</a></li>
            </ul>
          </li>
    This code is about accessibility too, not only about correctness. Why is that? Do you really have to ask?


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


    What's with the second BAD example and where did it came from?

    Code:
        <ul>
          <li><a href="#" id="services">OUR SERVICES</a></li>
            <ul>
              <li><a href="#">Service#1</a></li>
              <li><a href="#">Service#2</a></li>
            </ul>
        </ul>
    Are you saying that's the way to do it?


    You need to remember a third way:

    Code:
        <ul>
          <li><a href="#" id="services">OUR SERVICES</a></li>
        </ul>
    <ul>
              <li><a href="#">Service#1</a></li>
              <li><a href="#">Service#2</a></li>
    </ul>
    Any epiphany on your side?

  9. #9
    SitePoint Wizard rguy84's Avatar
    Join Date
    Sep 2005
    Location
    Durham, NC
    Posts
    1,659
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Valid code is the sub list goes before the list item prior to the ends. Look at the blocks closely. Make the code valid, it becomes accessible. Also that is why I pointed him to YUI vs suckerfish. Suckerfish is good, and accessible. YUI is good, accessible, and keyboard navigatable...
    Ryan B | My Blog | Twitter

  10. #10
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still distraught by what you mean...

    What "also that is why you pointed"? How "make the code valid"? I thought you said is nothing about "accessible", but "valid". Now, suddenly, "valid" means "accessible"? Aside from your inclination towards using frameworks, your points are all... blurry.

    You forget that you could make a less accessible drop down menu by choosing not to nest the second <ul> in a <li> from the first <ul>. You could just make a separate second <ul>, as a sibling element to the first <ul>, have a valid code all along, and use a slightly changed CSS to make the drop down. Like in the blue highlighted code I provided. You missed this point.

    Using the second <ul> in a <li> means a DRILL DOWN menu. You missed this point also. You only provided an invalid code, where you put the second <ul> as a direct descendant for the first <ul>, which is a stupid and wrong thing to do, and than start mumbling about YUI. Did you even look at the requirements for a YUI drill down menu? Only if you use their framework extensively will a YUI menu ever become something to begin considering to use.

    Make up your mind, please! And acknowledge that I provided VALID CODE ALL ALONG!


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
  •