SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    href on headings and making link active

    . I am trying to create a vetical
    menu and an horizontal menu as in ur site, well the code i got was
    from tanfa.css as shown below but this doesnot allow me to have href
    to the h2 headings and also doesnot allow me to have an active heading
    i.e. when the user is on that particular page the link is not
    supressed, or changing the color, any ideas how would i do this ??
    Also when i print the page all the listed items are printed instead of just that page anyone has any ideas on what should be done for that ??

    Code HTML4Strict:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
     
    <head>
     
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"></meta>
     
    <title>Vertical CSS Menu Tutorial ~ Example Page 7</title>
     
    <meta name="description" content="Example 7 - CSS Vertical Popout Menu
    Tutorial"></meta>
     
    <link rel="shortcut icon" href="../../../favicon.ico" />
     
    <link href="tanfa.css" rel="stylesheet" type="text/css">
     
    <style type="text/css" media="screen">
     
     
     
    /**************** menu coding *****************/
     
    #menu {
     
    width: 12em;
     
    background: #eee;
     
    }
     
     
     
    #menu ul {
     
    list-style: none;
     
    margin: 0;
     
    padding: 0;
     
    }
     
     
     
    #menu a, #menu h2 {
     
    font: bold 11px/16px arial, helvetica, sans-serif;
     
    display: block;
     
    border-width: 1px;
     
    border-style: solid;
     
    border-color: #ccc #888 #555 #bbb;
     
    margin: 0;
     
    padding: 2px 3px;
     
    }
     
     
     
    #menu h2 {
     
    color: #fff;
     
    background: #000;
     
    text-transform: uppercase;
     
    }
     
     
     
    #menu a {
     
    color: #000;
     
    background: #efefef;
     
    text-decoration: none;
     
    }
     
     
     
    #menu a:hover {
     
    color: #a00;
     
    background: #fff;
     
    }
     
     
     
    #menu li {
     
    position: relative;
     
    }
     
     
     
    #menu ul ul ul {
     
    position: absolute;
     
    top: 0;
     
    left: 100%;
     
    width: 100%;
     
    }
     
     
     
    div#menu ul ul ul,
     
    div#menu ul ul li:hover ul ul
     
    {display: none;}
     
     
     
    div#menu ul ul li:hover ul,
     
    div#menu ul ul ul li:hover ul
     
    {display: block;}
     
     
     
    </style>
     
    <!--[if IE]>
     
    <style type="text/css" media="screen">
     
     #menu ul li {float: left; width: 100%;}
     
    </style>
     
    <![endif]-->
     
    <!--[if lt IE 7]>
     
    <style type="text/css" media="screen">
     
    body {
     
    behavior: url(csshover.htc);
     
    font-size: 100%;
     
    }
     
    #menu ul li {float: left; width: 100%;}
     
    #menu ul li a {height: 1%;}
     
     
     
    #menu a, #menu h2 {
     
    font: bold 0.7em/1.4em arial, helvetica, sans-serif;
     
    }
     
     
     
    </style>
     
    <![endif]-->
     
    </head>
     
    <body id="www-tanfa-co-uk">
     
    <div id="pagetop">
     
    <a href="../../../index.html" title="tanfa :: Home Page" id="toplink"></a>
     
    <h1>CSS Pop Out Menu Tutorial Code</h1>
     
    <h2>Stage 7 - Fully Working Example</h2>
     
    <h3>&laquo; <a href="tutorial-v.html#vs7">return to tutorial</a> :: Stages
     
    [<a href="vs1.html" title="Vertical Example 1">1</a>]
     
    [<a href="vs2.html" title="Vertical Example 2">2</a>]
     
    [<a href="vs3.html" title="Vertical Example 3">3</a>]
     
    [<a href="vs4.html" title="Vertical Example 4">4</a>]
     
    [<a href="vs5.html" title="Vertical Example 5">5</a>]
     
    [<a href="vs6.html" title="Vertical Example 6">6</a>]
     
    <span>[7]</span>
     
    </h3>
     
    </div>
     
    <!-- start Menu HTML -->
     
    <div id="menu">
     
    <ul>
     
     <li><h2>CSS Drop Down Menus</h2>
     
       <ul>
     
         <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus"
    title="SEO Consultants Directory">CSS Hover Navigation</a>
     
           <ul>
     
             <li><a href="../css-dropdown-menus.html" title="tanfa
    Introduction">Intro for CSS Enthusiasts</a></li>
     
             <li><a href="index.html" title="Plain HTML
    Code">Demonstration HTML</a></li>
     
             <li><a href="http://www.xs4all.nl/~peterned/csshover.html"
    title="whatever:hover file">csshover.htc file</a></li>
     
           </ul>
     
         </li>
     
       </ul>
     
     </li>
     
    </ul>
     
     
     
    <ul>
     
     <li><h2>Vertical CSS Pop-Out Menu</h2>
     
       <ul>
     
         <li><a href="http://www.seoconsultants.com/css/menus/vertical/"
    title="SEO Consultants Vertical Example">SEO Consultants
    Sample</a></li>
     
         <li><a href="vs7.html" title="Complete Example">tanfa Demo example</a>
     
           <ul>
     
             <li><a href="tutorial-v.html" title="Vertical Menu
    Tutorial">tanfa Tutorial</a>
     
               <ul>
     
                 <li><a href="vs1.html" title="Vertical Menu - Page
    1">Stage 1</a></li>
     
                 <li><a href="vs2.html" title="Vertical Menu - Page
    2">Stage 2</a></li>
     
                 <li><a href="vs3.html" title="Vertical Menu - Page
    3">Stage 3</a></li>
     
                 <li><a href="vs4.html" title="Vertical Menu - Page
    4">Stage 4</a></li>
     
                 <li><a href="vs5.html" title="Vertical Menu - Page
    5">Stage 5</a></li>
     
                 <li><a href="vs6.html" title="Vertical Menu - Page
    6">Stage 6</a></li>
     
               </ul>
     
             </li>
     
           </ul>
     
         </li>
     
       </ul>
     
     </li>
     
    </ul>
     
     
     
    <ul>
     
     <li><h2>Horizontal Drop &amp; Pop Menu</h2>
     
       <ul>
     
         <li><a href="http://www.seoconsultants.com/css/menus/horizontal/"
    title="SEO Consultants Directory Example">SEO Consultants
    Sample</a></li>
     
         <li><a href="hs7.html">tanfa Demo example</a><!-- fully working sample -->
     
           <ul>
     
             <li><a href="tutorial-h.html" title="Horizontal Menu
    Tutorial">tanfa Tutorial</a>
     
               <ul>
     
                 <li><a href="hs1.html" title="Horizontal Menu - Page
    1">Stage 1</a></li>
     
                 <li><a href="hs2.html" title="Horizontal Menu - Page
    2">Stage 2</a></li>
     
                 <li><a href="hs3.html" title="Horizontal Menu - Page
    3">Stage 3</a></li>
     
                 <li><a href="hs4.html" title="Horizontal Menu - Page
    4">Stage 4</a></li>
     
                 <li><a href="hs5.html" title="Horizontal Menu - Page
    5">Stage 5</a></li>
     
                 <li><a href="hs6.html" title="Horizontal Menu - Page
    6">Stage 6</a></li>
     
               </ul>
     
             </li>
     
           </ul>
     
         </li>
     
       </ul>
     
     </li>
     
    </ul>
     
    </div>
     
    </body>
     
    </html>

  2. #2
    SitePoint Zealot materialdesigner's Avatar
    Join Date
    Dec 2010
    Location
    Ithaca, NY
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am trying to help you but have absolutely no idea what you are trying to ask.

    but this doesnot allow me to have href
    to the h2 headings and also doesnot allow me to have an active heading
    If you want your h2 tags to be links, you need to place anchors inside of them, although I'm unsure of why you'd want to do that.

    If you want to change your h2 tags when hovered or active, you can style them with

    Code CSS:
    h2:hover, h2:active {
     /* Enter your CSS in here, such as 
        background: #666; 
        for example */
    }

  3. #3
    SitePoint Zealot materialdesigner's Avatar
    Join Date
    Dec 2010
    Location
    Ithaca, NY
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Reading your request again, I think I misunderstood what you wanted.

    If what you intended was styling the nav li of the current page you are on to be different, you are either going to need to handcode the classes into your pages,
    so the "Intro for CSS Enthusiasts" .html would have

    Code HTML4Strict:
    <li class="current-page">
       <a title="tanfa
    Introduction" href="../css-dropdown-menus.html">Intro for CSS Enthusiasts</a>
    </li>

    However, most people use PHP to dynamically add the class to the nav li of the current page they are on.

    You would then style the class appropriately, like
    Code CSS:
    li.current-page a {
     background: #666;
     color: white;
    }

  4. #4
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did as u suggested but hte heading 2 changes to a different color, the same color as the listed items when i add an anchor or href to it,
    also when i add the current list class the current page doesnot change to a different color, all i wnat is similar to sitepoint where when i click on forums the forum menu changes to white color and we know we are here and when i add an href to heading to it doenot change its color
    i am very new to css which is why i am struggling
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"></meta>
    <title>Vertical CSS Menu Tutorial ~ Example Page 7</title>
    <meta name="description" content="Example 7 - CSS Vertical Popout Menu Tutorial"></meta>
    <link rel="shortcut icon" href="../../../favicon.ico" />
    <link href="tanfa.css" rel="stylesheet" type="text/css">
    <style type="text/css" media="screen"> 
     
    /*
     menu coding 
     */
    #menu {
    width: 12em;
    background: #eee;
    }
     
    #menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
     
    #menu a, #menu h2 {
    font: bold 11px/16px arial, helvetica, sans-serif;
    display: block;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc #888 #555 #bbb;
    margin: 0;
    padding: 2px 3px;
    }
     
    #menu h2 {
    color: #fff;
    background: #000;
    text-transform: uppercase;
    }
    
    h2:hover, h2:active {
     color: white;
    background: black;
    text-transform: lowercase;
    }
     
    #menu a {
    color: #000;
    background: #efefef;
    text-decoration: none;
    }
     
    #menu a:hover {
    color: #a00;
    background: #fff;
    }
     
    #menu li {
    position: relative;
    }
     
    li.current-page a {
     background: #666;
     color: white;
    }
    #menu ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    }
     
    div#menu ul ul ul,
    div#menu ul ul li:hover ul ul
    {display: none;}
     
    div#menu ul ul li:hover ul,
    div#menu ul ul ul li:hover ul
    {display: block;}
     
    </style>
    <!--[if IE]>
    <style type="text/css" media="screen">
     #menu ul li {float: left; width: 100%;}
    </style>
    <![endif]-->
    <!--[if lt IE 7]>
    <style type="text/css" media="screen">
    body {
    behavior: url(csshover.htc);
    font-size: 100%;
    } 
    #menu ul li {float: left; width: 100%;}
    #menu ul li a {height: 1%;} 
     
    #menu a, #menu h2 {
    font: bold 0.7em/1.4em arial, helvetica, sans-serif;
    } 
     
    </style>
    <![endif]-->
    </head>
    <body id="www-tanfa-co-uk">
    <div id="pagetop">
    <a href="../../../index.html" title="tanfa :: Home Page" id="toplink"></a>
    <h1>CSS Pop Out Menu Tutorial Code</h1>
    <h2>Stage 7 - Fully Working Example</h2>
    <h3>&laquo; <a href="tutorial-v.html#vs7">return to tutorial</a> :: Stages 
    [<a href="vs1.html" title="Vertical Example 1">1</a>] 
    [<a href="vs2.html" title="Vertical Example 2">2</a>] 
    [<a href="vs3.html" title="Vertical Example 3">3</a>] 
    [<a href="vs4.html" title="Vertical Example 4">4</a>] 
    [<a href="vs5.html" title="Vertical Example 5">5</a>] 
    [<a href="vs6.html" title="Vertical Example 6">6</a>] 
    <span>[7]</span>
    </h3>
    </div>
    <!-- start Menu HTML -->
    <div id="menu">
    <ul>
      <li class="current-page"><h2><a href="C:\Users\AvishekWin7\Desktop\testMenu.html" title="SEO Consultants Directory">CSS Drop Down Menus</a></h2>
        <ul>
          <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus" title="SEO Consultants Directory">CSS Hover Navigation</a>
            <ul>
              <li><a href="../css-dropdown-menus.html" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li>
              <li><a href="index.html" title="Plain HTML Code">Demonstration HTML</a></li>
              <li><a href="http://www.xs4all.nl/~peterned/csshover.html" title="whatever:hover file">csshover.htc file</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
     
    <ul>
      <li><h2>Vertical CSS Pop-Out Menu</h2>
        <ul>
          <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">SEO Consultants Sample</a></li>
          <li><a href="vs7.html" title="Complete Example">tanfa Demo example</a>
            <ul>
              <li><a href="tutorial-v.html" title="Vertical Menu Tutorial">tanfa Tutorial</a>	
                <ul>
                  <li><a href="vs1.html" title="Vertical Menu - Page 1">Stage 1</a></li>
                  <li><a href="vs2.html" title="Vertical Menu - Page 2">Stage 2</a></li>		
                  <li><a href="vs3.html" title="Vertical Menu - Page 3">Stage 3</a></li>
                  <li><a href="vs4.html" title="Vertical Menu - Page 4">Stage 4</a></li>
                  <li><a href="vs5.html" title="Vertical Menu - Page 5">Stage 5</a></li>			
                  <li><a href="vs6.html" title="Vertical Menu - Page 6">Stage 6</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
     
    <ul>
      <li><h2>Horizontal Drop &amp; Pop Menu</h2>
        <ul>
          <li><a href="http://www.seoconsultants.com/css/menus/horizontal/" title="SEO Consultants Directory Example">SEO Consultants Sample</a></li>
          <li><a href="hs7.html">tanfa Demo example</a><!-- fully working sample -->
            <ul>
              <li><a href="tutorial-h.html" title="Horizontal Menu Tutorial">tanfa Tutorial</a>
                <ul>
                  <li><a href="hs1.html" title="Horizontal Menu - Page 1">Stage 1</a></li>
                  <li><a href="hs2.html" title="Horizontal Menu - Page 2">Stage 2</a></li>			
                  <li><a href="hs3.html" title="Horizontal Menu - Page 3">Stage 3</a></li>
                  <li><a href="hs4.html" title="Horizontal Menu - Page 4">Stage 4</a></li>
                  <li><a href="hs5.html" title="Horizontal Menu - Page 5">Stage 5</a></li>			
                  <li><a href="hs6.html" title="Horizontal Menu - Page 6">Stage 6</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>							
    </div>
    </body>
    </html>

  5. #5
    SitePoint Zealot materialdesigner's Avatar
    Join Date
    Dec 2010
    Location
    Ithaca, NY
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why are you adding an anchor to the h2 tags??

    Regardless, when you have anchors inside of list elements or inside of h2 tags in navigation bars, you want to add colors, padding, and margins to the [a] tags, and not the [li] or [h2] tags.

    so if you make

    Code CSS:
    #menu h2 {
      padding: 0;
      background: transparent;
    }
    #menu h2 a {
      background: black;
      color: white;
    }

    This will remove the default padding on the h2 tags, and allow the anchor to take up the entire space. Now you've made the anchor have the default color, white text on black background.

    Now, to style the current page anchor

    Code CSS:
    #menu li.current-page h2 a {
      background: green;
      color: white;
    }

    Do you see why this works?

    You will notice now that there is no padding on h2 elements that have no anchor inside of them. This is a sacrifice that cannot be fixed. So you must put anchors inside of all h2 tags.

  6. #6
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick reply i see what i was mising thankyou so much but even after adding the current page class it doesnot change the menu item to the color listed, whihc is red in this case it does change it when i hover over it but not when i link it to a screen and then click on it it doesnot stay red when i remove my pointer.
    also when i print all teh menus,all the items inside the listed item are alos printed, can i prevern this from happening becuase the print is not showing what the screen is.

    thanks again
    HTML Code:
    #menu {
    width: 12em;
    background: #eee;
    }
     
    #menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
     
    #menu a, #menu h2 {
    font: bold 11px/16px arial, helvetica, sans-serif;
    display: block;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc #888 #555 #bbb;
    margin: 0;
    padding: 2px 3px;
    }
     
    #menu h2 {  padding: 0;  background: transparent;}
    
    #menu h2 a {  background: black;  color: white;}
     
    
    
    h2:hover, h2:active {
     color: white;
    background: black;
    text-transform: lowercase;
    }
     
    #menu a {
    color: #000;
    background: #efefef;
    text-decoration: none;
    }
     
    #menu a:hover {
    color: #a00;
    background: #fff;
    }
     
    #menu li {
    position: relative;
    }
     
    
    #menu li.current-page h2 a 
    {  background: red; 
        color: white;
    	text-decoration:underline;}
    
    
    #menu ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    }
     
    div#menu ul ul ul,
    div#menu ul ul li:hover ul ul
    {display: none;}
     
    div#menu ul ul li:hover ul,
    div#menu ul ul ul li:hover ul
    {display: block;}
     
    </style>
    <!--[if IE]>
    <style type="text/css" media="screen">
     #menu ul li {float: left; width: 100%;}
    </style>
    <![endif]-->
    <!--[if lt IE 7]>
    <style type="text/css" media="screen">
    body {
    behavior: url(csshover.htc);
    font-size: 100%;
    } 
    #menu ul li {float: left; width: 100%;}
    #menu ul li a {height: 1%;} 
     
    #menu a, #menu h2 {
    font: bold 0.7em/1.4em arial, helvetica, sans-serif;
    } 
     
    </style>
    <![endif]-->
    */

  7. #7
    SitePoint Zealot materialdesigner's Avatar
    Join Date
    Dec 2010
    Location
    Ithaca, NY
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am sorry, but I don't see what the problem is now.

    The link is red. It stays red when you hover over it and hover off of it.

    Isn't this what you wanted?

    And of course all of the menu will still print when you print the page. All of the markup is there!

    To change what happens when you print, you need to create a print-specific stylesheet and remove everything you don't want printed using display: none;

    http://www.webcredible.co.uk/user-fr...ylesheet.shtml

  8. #8
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am sorry i dont think i explained it properly, so what i want is similar to this websire on the horizonal menu above when u are on the page for exmaple on the forums page as now the forums tab is white despite the fact that i am not hovering over it, all other menus are deactivated as i can easliy tell i am on the forums page, so anything that can demark the current page as here will do my page
    as for the print page thanks for the refrence thankyou very much
    once again thanks for all the help

  9. #9
    SitePoint Zealot materialdesigner's Avatar
    Join Date
    Dec 2010
    Location
    Ithaca, NY
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I already showed you exactly how to do that.
    Change your markup to this:

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"></meta>
    <title>Vertical CSS Menu Tutorial ~ Example Page 7</title>
    <meta name="description" content="Example 7 - CSS Vertical Popout Menu Tutorial"></meta>
    <link rel="shortcut icon" href="../../../favicon.ico" />
    <link href="tanfa.css" rel="stylesheet" type="text/css">
    <style type="text/css" media="screen"> 
    #menu {
    width: 12em;
    background: #eee;
    }
     
    #menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
     
    #menu a, #menu h2 {
    font: bold 11px/16px arial, helvetica, sans-serif;
    display: block;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc #888 #555 #bbb;
    margin: 0;
    padding: 2px 3px;
    }
     
    #menu h2 {  padding: 0;  background: transparent;}
     
    #menu h2 a {  background: black;  color: white;}
     
     
     
    h2:hover, h2:active {
     color: white;
    background: black;
    text-transform: lowercase;
    }
     
    #menu a {
    color: #000;
    background: #efefef;
    text-decoration: none;
    }
     
    #menu a:hover {
    color: #a00;
    background: #fff;
    }
     
    #menu li {
    position: relative;
    }
     
     
    #menu li.current-page h2 a 
    {  background: red; 
        color: white;
    	text-decoration:underline;}
     
     
    #menu ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    }
     
    div#menu ul ul ul,
    div#menu ul ul li:hover ul ul
    {display: none;}
     
    div#menu ul ul li:hover ul,
    div#menu ul ul ul li:hover ul
    {display: block;}
     
    </style>
    <!--[if IE]>
    <style type="text/css" media="screen">
     #menu ul li {float: left; width: 100%;}
    </style>
    <![endif]-->
    <!--[if lt IE 7]>
    <style type="text/css" media="screen">
    body {
    behavior: url(csshover.htc);
    font-size: 100%;
    } 
    #menu ul li {float: left; width: 100%;}
    #menu ul li a {height: 1%;} 
     
    #menu a, #menu h2 {
    font: bold 0.7em/1.4em arial, helvetica, sans-serif;
    } 
     
    </style>
    <![endif]-->
     </head>
    <body id="www-tanfa-co-uk">
    <div id="pagetop">
    <a href="../../../index.html" title="tanfa :: Home Page" id="toplink"></a>
    <h1>CSS Pop Out Menu Tutorial Code</h1>
    <h2>Stage 7 - Fully Working Example</h2>
    <h3>&laquo; <a href="tutorial-v.html#vs7">return to tutorial</a> :: Stages 
    [<a href="vs1.html" title="Vertical Example 1">1</a>] 
    [<a href="vs2.html" title="Vertical Example 2">2</a>] 
    [<a href="vs3.html" title="Vertical Example 3">3</a>] 
    [<a href="vs4.html" title="Vertical Example 4">4</a>] 
    [<a href="vs5.html" title="Vertical Example 5">5</a>] 
    [<a href="vs6.html" title="Vertical Example 6">6</a>] 
    <span>[7]</span>
    </h3>
    </div>
    <!-- start Menu HTML -->
    <div id="menu">
    <ul>
      <li class="current-page"><h2><a href="C:\Users\AvishekWin7\Desktop\testMenu.html" title="SEO Consultants Directory">CSS Drop Down Menus</a></h2>
        <ul>
          <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus" title="SEO Consultants Directory">CSS Hover Navigation</a>
            <ul>
              <li><a href="../css-dropdown-menus.html" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li>
              <li><a href="index.html" title="Plain HTML Code">Demonstration HTML</a></li>
              <li><a href="http://www.xs4all.nl/~peterned/csshover.html" title="whatever:hover file">csshover.htc file</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
     
    <ul>
      <li><h2><a href="#">Vertical CSS Pop-Out Menu</a></h2>
        <ul>
          <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">SEO Consultants Sample</a></li>
          <li><a href="vs7.html" title="Complete Example">tanfa Demo example</a>
            <ul>
              <li><a href="tutorial-v.html" title="Vertical Menu Tutorial">tanfa Tutorial</a>	
                <ul>
                  <li><a href="vs1.html" title="Vertical Menu - Page 1">Stage 1</a></li>
                  <li><a href="vs2.html" title="Vertical Menu - Page 2">Stage 2</a></li>		
                  <li><a href="vs3.html" title="Vertical Menu - Page 3">Stage 3</a></li>
                  <li><a href="vs4.html" title="Vertical Menu - Page 4">Stage 4</a></li>
                  <li><a href="vs5.html" title="Vertical Menu - Page 5">Stage 5</a></li>			
                  <li><a href="vs6.html" title="Vertical Menu - Page 6">Stage 6</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
     
    <ul>
      <li><h2><a href="#">Horizontal Drop &amp; Pop Menu</a></h2>
        <ul>
          <li><a href="http://www.seoconsultants.com/css/menus/horizontal/" title="SEO Consultants Directory Example">SEO Consultants Sample</a></li>
          <li><a href="hs7.html">tanfa Demo example</a><!-- fully working sample -->
            <ul>
              <li><a href="tutorial-h.html" title="Horizontal Menu Tutorial">tanfa Tutorial</a>
                <ul>
                  <li><a href="hs1.html" title="Horizontal Menu - Page 1">Stage 1</a></li>
                  <li><a href="hs2.html" title="Horizontal Menu - Page 2">Stage 2</a></li>			
                  <li><a href="hs3.html" title="Horizontal Menu - Page 3">Stage 3</a></li>
                  <li><a href="hs4.html" title="Horizontal Menu - Page 4">Stage 4</a></li>
                  <li><a href="hs5.html" title="Horizontal Menu - Page 5">Stage 5</a></li>			
                  <li><a href="hs6.html" title="Horizontal Menu - Page 6">Stage 6</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>							
    </div>
    </body>
    </html>

    WHAT IS WRONG WITH THIS?

  10. #10
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok i applied the li current class and created a horizontal and a vertical menu as u suggested but i still cant get the current page effect what might i be doin wrong ??
    HTML Code:
    <style type="text/css" media="screen"> 
     /*
     vertical menu coding 
     */
    #menu {
    width: 6.6em;
    background: #3f6fb7;
    }
     
    #menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
     
    #menu a, #menu h2 
       {
    	display: block;
    	border-width: 1px;
    	border-style: solid;
    	border-color: #ccc #888 #555 #bbb;
    	margin: 0;
    	padding: 2px 3px;
    	font-family: arial, helvetica, sans-serif;
    	font-size: 11px;
    	line-height: 16px;
    	font-weight: bold;
    	color: #3f6fb7;
    	}
     
     
    #menu h2 {
    color: #fff;
    background:#3f6fb7;
     
    }
     
    #menu h2 {  padding: 0;  background: transparent;}
     
    #menu h2 a {  background: black;  color: white;}
     
     
     
    h2:hover, h2:active {
     color: white;
    background: black;
    text-transform: lowercase;
    }
     
    
    #menu a {
    color: #000;
    background: #efefef;
    text-decoration: none;
    }
     
    #menu a:hover {
    color: #a00;
    background: #d1cf9f;
    }
     
    #menu li {
    position: relative;
    }
     
    #menu ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    }
     
    div#menu ul ul ul,
    div#menu ul ul li:hover ul ul
    {display: none;}
     
    div#menu ul ul li:hover ul,
    div#menu ul ul ul li:hover ul
    {display: block;}
     
    ul.sidenav li a:hover {
    	background: #d1cf9f url(sidenav_a.gif) no-repeat 5px 7px;
    	border-top: 1px solid #1a4c76;
    }
    ul.sidenav li span{	display: none; }
    ul.sidenav li a:hover span {
    	display: inline;
    	font-size: 0.8em;
    	padding: 10px 0;
    }
     
     
    #menu li.current-page h2 a 
    {  background: red; 
        color: white;
        text-decoration:underline;}
    	
    	
      /*
     horizontal menu  
     */
    #nav {
    	float: left;
    	margin: 0 0 1em 0;
    	padding: 0;
    	list-style: none;
    	background-color:#3f6fb7 ;
    	}
    #nav li {
    	float: left; }
    #nav li a {
    	display:block;
    	padding: 10px 10px;
    	text-decoration: none;
    	font-family:"Arial";
    	color: white;
    	border-right: 1px solid #ccc;
    	font-size: 15px;
    }
    #nav li a:hover {
    	color: #3f6fb7;
    	background-color: #d1cf9f; } 
    	
    	
    </style>
     
    <!--[if IE]>
    <style type="text/css" media="screen">
     #menu ul li {float: left; width: 100%;}
    </style>
    <![endif]-->
    <!--[if lt IE 7]>
    <style type="text/css" media="screen">
    body {
    behavior: url(csshover.htc);
    font-size: 100%;
    } 
    #menu ul li {float: left; width: 100%;}
    #menu ul li a {height: 1%;} 
     
    #menu a, #menu h2 {
    font: bold 0.7em/1.4em arial, helvetica, sans-serif;
    } 
     
    </style>
    <![endif]-->
    
    </script>
    </head>
    <body>
     
        <td colspan="8" >
             <ul id="nav">
     
                   <li><a onClick="highlite(this);"   
                                     href="introduction.html">Intro</a></li>
    	           <li><a href="about.html">About</a></li>
    	           <li><a href="home.html">home</a></li>
    	           <li><a href="contact.html">Try It Out</a></li>
                   <li><a href="about_us.html">About Us</a></li>
           </ul>
      						
    <div id="menu">
    <ul>
      <li>
      <h2><a href="www.nba.com">8D Overview</a></h2>
      
        <ul>
         <li><h2>Test</a></h2>
     
        
                    <ul>
                          <li> <a href = "#1"> 1</a></li>
                          <li> <a href = "#2"> 2</a></li>
                      </ul>
     
                </li>
             </ul>
          </li>
    </ul>
     
    </ul>

  11. #11
    SitePoint Zealot materialdesigner's Avatar
    Join Date
    Dec 2010
    Location
    Ithaca, NY
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    a) you have an opened td in your code. It should not be there.

    b) I don't see a single current-page class and I see no styling for it.

    First, to fix your current CSS

    REMOVE the background color from #nav.
    Code CSS:
    #nav {
      [del]background-color:#3f6fb7 ; [/del]
    }

    Instead, background colors should be applied to the anchors themselves.

    Code CSS:
    #nav li a {
      background-color: #3f6fb7;
    }

    Now, add the current-page class to your HTML markup to pretend like we're on the about us page

    Code HTML4Strict:
    <ul id="nav">
    	<li><a href="introduction.html">Intro</a></li>
    	<li><a href="about.html">About</a></li>
    	<li><a href="home.html">home</a></li>
    	<li><a href="contact.html">Try It Out</a></li>
    	<li class="current-page"><a href="about_us.html">About Us</a></li>
    </ul>

    Now to style it using CSS

    Code CSS:
    #nav li.current-page a {
    	background: red;
    	color: black;
    }

  12. #12
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok i think i finally get it now, and when i added the current class to the li under a ul it didnot do it even thought i have a different class defiend for the li under ul or atleast i think i do, please tell me what might i be doin wrong

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"></meta>
    <title>Vertical CSS Menu Tutorial ~ Example Page 7</title>
    <meta name="description" content="Example 7 - CSS Vertical Popout Menu Tutorial"></meta>
    <link rel="shortcut icon" href="../../../favicon.ico" />
    <link href="tanfa.css" rel="stylesheet" type="text/css">
    <style type="text/css" media="screen"> 
    #menu {
    width: 12em;
    background: #eee;
    }
     
    #menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
     
    #menu a, #menu h2 {
    font: bold 11px/16px arial, helvetica, sans-serif;
    display: block;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc #888 #555 #bbb;
    margin: 0;
    padding: 2px 3px;
    }
     
    #menu h2 {  padding: 0;  background: transparent;}
     
    #menu h2 a {  background: black;  color: white;}
     
     
     
    h2:hover, h2:active {
     color: white;
    background: black;
    text-transform: lowercase;
    }
     
    #menu a {
    color: #000;
    background: #efefef;
    text-decoration: none;
    }
     
    #menu a:hover {
    color: #a00;
    background: #fff;
    }
     
    #menu li {
    position: relative;
    }
     
     
    #menu li.current-page h2 a 
    {  background: Blue; 
        color: white;
        text-decoration:underline;}
     
     
    #menu ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    }
     
    div#menu ul ul ul,
    div#menu ul ul li:hover ul ul
    {display: none;}
     
    div#menu ul ul li:hover ul,
    div#menu ul ul ul li:hover ul
    {display: block;}
     
    #menu li.current-page li
    {  background: Blue; 
        color: white;
        text-decoration:underline;}
    
    
    </style>
    <!--[if IE]>
    <style type="text/css" media="screen">
     #menu ul li {float: left; width: 100%;}
    </style>
    <![endif]-->
    <!--[if lt IE 7]>
    <style type="text/css" media="screen">
    body {
    behavior: url(csshover.htc);
    font-size: 100%;
    } 
    #menu ul li {float: left; width: 100%;}
    #menu ul li a {height: 1%;} 
     
    #menu a, #menu h2 {
    font: bold 0.7em/1.4em arial, helvetica, sans-serif;
    } 
     
    </style>
    <![endif]-->
     </head>
    <body id="www-tanfa-co-uk">
    <div id="pagetop">
    <a href="../../../index.html" title="tanfa :: Home Page" id="toplink"></a>
    <h1>CSS Pop Out Menu Tutorial Code</h1>
    <h2>Stage 7 - Fully Working Example</h2>
    <h3>&laquo; <a href="tutorial-v.html#vs7">return to tutorial</a> :: Stages 
    [<a href="vs1.html" title="Vertical Example 1">1</a>] 
    [<a href="vs2.html" title="Vertical Example 2">2</a>] 
    [<a href="vs3.html" title="Vertical Example 3">3</a>] 
    [<a href="vs4.html" title="Vertical Example 4">4</a>] 
    [<a href="vs5.html" title="Vertical Example 5">5</a>] 
    [<a href="vs6.html" title="Vertical Example 6">6</a>] 
    <span>[7]</span>
    </h3>
    </div>
    <!-- start Menu HTML -->
    <div id="menu">
    <ul>
      <li ><h2><a href="nba.com" title="SEO Consultants Directory">CSS Drop Down Menus</a></h2>
        <ul>
          <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus" title="SEO Consultants Directory">CSS Hover Navigation</a>
            <ul>
              <li class="current-page"> <a href="#" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li>
              <li><a href="index.html" title="Plain HTML Code">Demonstration HTML</a></li>
              <li><a href="http://www.xs4all.nl/~peterned/csshover.html" title="whatever:hover file">csshover.htc file</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
     
    <ul>
      <li><h2><a href="#">Vertical CSS Pop-Out Menu</a></h2>
        <ul>
          <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">SEO Consultants Sample</a></li>
          <li><a href="vs7.html" title="Complete Example">tanfa Demo example</a>
            <ul>
              <li><a href="tutorial-v.html" title="Vertical Menu Tutorial">tanfa Tutorial</a>   
                <ul>
                  <li><a href="vs1.html" title="Vertical Menu - Page 1">Stage 1</a></li>
                  <li><a href="vs2.html" title="Vertical Menu - Page 2">Stage 2</a></li>        
                  <li><a href="vs3.html" title="Vertical Menu - Page 3">Stage 3</a></li>
                  <li><a href="vs4.html" title="Vertical Menu - Page 4">Stage 4</a></li>
                  <li><a href="vs5.html" title="Vertical Menu - Page 5">Stage 5</a></li>            
                  <li><a href="vs6.html" title="Vertical Menu - Page 6">Stage 6</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
     
    <ul>
      <li><h2><a href="#">Horizontal Drop &amp; Pop Menu</a></h2>
        <ul>
          <li><a href="http://www.seoconsultants.com/css/menus/horizontal/" title="SEO Consultants Directory Example">SEO Consultants Sample</a></li>
          <li><a href="hs7.html">tanfa Demo example</a><!-- fully working sample -->
            <ul>
              <li><a href="tutorial-h.html" title="Horizontal Menu Tutorial">tanfa Tutorial</a>
                <ul>
                  <li><a href="hs1.html" title="Horizontal Menu - Page 1">Stage 1</a></li>
                  <li><a href="hs2.html" title="Horizontal Menu - Page 2">Stage 2</a></li>      
                  <li><a href="hs3.html" title="Horizontal Menu - Page 3">Stage 3</a></li>
                  <li><a href="hs4.html" title="Horizontal Menu - Page 4">Stage 4</a></li>
                  <li><a href="hs5.html" title="Horizontal Menu - Page 5">Stage 5</a></li>      
                  <li><a href="hs6.html" title="Horizontal Menu - Page 6">Stage 6</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>                     
    </div>
    </body>
    </html>

  13. #13
    SitePoint Zealot materialdesigner's Avatar
    Join Date
    Dec 2010
    Location
    Ithaca, NY
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
    #menu li.current-page li
    {  background: Blue; 
        color: white;
        text-decoration:underline;}

    should be changed to

    Code CSS:
    #menu li.current-page a
    {  background: blue; 
        color: white;
        text-decoration: underline;
    }

  14. #14
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey thanks i also figured out that differetn class for different headings i.e. h2 different from li will create a better demarcation or else li carries over the class of h2 if is is under h2
    now i have to create a print css and i only wnat to print the headings and the listed items or as they are on the screen any ideas ??
    my vertical menu is finalized as


    /*
    Vertical menu coding
    */
    #menu {
    width: 6.6em;
    background: #3f6fb7;
    }

    #menu ul
    {
    list-style: none;
    margin: 0;
    padding: 0;
    }

    #menu a, #menu h2
    {
    display:block;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc #888 #555 #bbb;
    margin: 0;
    padding: 2px 3px;
    font-family: arial, helvetica, sans-serif;
    font-size: 11px;
    line-height: 16px;
    font-weight: bold;
    color: #3f6fb7;
    }


    #menu h2 {
    color: #fff;
    background:#3f6fb7;
    }


    #menu h2 { padding: 0; background: transparent;}

    #menu h2 a { background: #3f6fb7; color: white;}



    h2:hover, h2:active {
    color: white;
    background: black;
    text-transform: none;
    }


    #menu a {
    color: #000;
    background: #efefef;
    text-decoration: none;
    }

    #menu li.current-pageHeading h2 a
    { background:#000061;
    color: yellow;}

    #menu li.current-pages a
    {
    background:#000061;
    color: yellow;
    }

    #menu a:hover {
    color: #a00;
    background: #d1cf9f;
    }

    #menu li {
    position: relative;
    }

    #menu ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    }

    div#menu ul ul ul,
    div#menu ul ul li:hover ul ul
    {display: none;}

    div#menu ul ul li:hover ul,
    div#menu ul ul ul li:hover ul
    {display: block;}

    ul.sidenav li a:hover {
    background: #d1cf9f url(sidenav_a.gif) no-repeat 5px 7px;
    border-top: 1px solid #1a4c76;
    }
    ul.sidenav li span{ display: none; }
    ul.sidenav li a:hover span {
    display: inline;
    font-size: 0.8em;
    padding: 10px 0;
    }

    Thanks again

  15. #15
    SitePoint Zealot materialdesigner's Avatar
    Join Date
    Dec 2010
    Location
    Ithaca, NY
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Most people don't show navigation, and I'm unsure how you would JUST show your current page without changing your markup.

    If you change your HTML to have the class "current-pages" applied all the way down, you may be able to.

    Your HTML should now be:

    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>I929</title>
    </head>
    <link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css" media="all"/>
    <link rel="stylesheet" type="text/css" href="print.css" media="print" />
    <style type="text/css">
    @media screen {
    #menu {
    width: 6.6em;
    background: #3f6fb7;
    }
     
    #menu ul
    {
    list-style: none;
    margin: 0;
    padding: 0;
    }
     
    #menu a, #menu h2
    {
    display:block;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc #888 #555 #bbb;
    margin: 0;
    padding: 2px 3px;
    font-family: arial, helvetica, sans-serif;
    font-size: 11px;
    line-height: 16px;
    font-weight: bold;
    color: #3f6fb7;
    }
     
     
    #menu h2 {
    color: #fff;
    background:#3f6fb7;
    }
     
     
    #menu h2 { padding: 0; background: transparent;}
     
    #menu h2 a { background: #3f6fb7; color: white;}
     
     
     
    h2:hover, h2:active {
    color: white;
    background: black;
    text-transform: none;
    }
     
     
    #menu a {
    color: #000;
    background: #efefef;
    text-decoration: none;
    }
     
    #menu li.current-pages > a
    {
    background:#000061;
    color: yellow;
    }
     
    #menu a:hover {
    color: #a00;
    background: #d1cf9f;
    }
     
    #menu li {
    position: relative;
    }
     
    #menu ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    }
     
    div#menu ul ul ul,
    div#menu ul ul li:hover ul ul
    {display: none;}
     
    div#menu ul ul li:hover ul,
    div#menu ul ul ul li:hover ul
    {display: block;}
     
    ul.sidenav li a:hover {
    background: #d1cf9f url(sidenav_a.gif) no-repeat 5px 7px;
    border-top: 1px solid #1a4c76;
    }
    ul.sidenav li span{ display: none; }
    ul.sidenav li a:hover span {
    display: inline;
    font-size: 0.8em;
    padding: 10px 0;
    }
    }
    </style>
    <body id="www-tanfa-co-uk">
    <div id="pagetop">
    <a href="../../../index.html" title="tanfa :: Home Page" id="toplink"></a>
    <h1>CSS Pop Out Menu Tutorial Code</h1>
    <h2>Stage 7 - Fully Working Example</h2>
    <h3>&laquo; <a href="tutorial-v.html#vs7">return to tutorial</a> :: Stages 
    [<a href="vs1.html" title="Vertical Example 1">1</a>] 
    [<a href="vs2.html" title="Vertical Example 2">2</a>] 
    [<a href="vs3.html" title="Vertical Example 3">3</a>] 
    [<a href="vs4.html" title="Vertical Example 4">4</a>] 
    [<a href="vs5.html" title="Vertical Example 5">5</a>] 
    [<a href="vs6.html" title="Vertical Example 6">6</a>] 
    <span>[7]</span>
    </h3>
    </div>
    <!-- start Menu HTML -->
    <div id="menu">
    <ul>
      <li class="current-pages"><h2><a href="nba.com" title="SEO Consultants Directory">CSS Drop Down Menus</a></h2>
        <ul>
          <li class="current-pages"><a href="http://www.seoconsultants.com/tips/css/#cssmenus" title="SEO Consultants Directory">CSS Hover Navigation</a>
            <ul>
              <li class="current-pages"> <a href="#" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li>
              <li><a href="index.html" title="Plain HTML Code">Demonstration HTML</a></li>
              <li><a href="http://www.xs4all.nl/~peterned/csshover.html" title="whatever:hover file">csshover.htc file</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
     
    <ul>
      <li><h2><a href="#">Vertical CSS Pop-Out Menu</a></h2>
        <ul>
          <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">SEO Consultants Sample</a></li>
          <li><a href="vs7.html" title="Complete Example">tanfa Demo example</a>
            <ul>
              <li><a href="tutorial-v.html" title="Vertical Menu Tutorial">tanfa Tutorial</a>   
                <ul>
                  <li><a href="vs1.html" title="Vertical Menu - Page 1">Stage 1</a></li>
                  <li><a href="vs2.html" title="Vertical Menu - Page 2">Stage 2</a></li>        
                  <li><a href="vs3.html" title="Vertical Menu - Page 3">Stage 3</a></li>
                  <li><a href="vs4.html" title="Vertical Menu - Page 4">Stage 4</a></li>
                  <li><a href="vs5.html" title="Vertical Menu - Page 5">Stage 5</a></li>            
                  <li><a href="vs6.html" title="Vertical Menu - Page 6">Stage 6</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
     
    <ul>
      <li><h2><a href="#">Horizontal Drop &amp; Pop Menu</a></h2>
        <ul>
          <li><a href="http://www.seoconsultants.com/css/menus/horizontal/" title="SEO Consultants Directory Example">SEO Consultants Sample</a></li>
          <li><a href="hs7.html">tanfa Demo example</a><!-- fully working sample -->
            <ul>
              <li><a href="tutorial-h.html" title="Horizontal Menu Tutorial">tanfa Tutorial</a>
                <ul>
                  <li><a href="hs1.html" title="Horizontal Menu - Page 1">Stage 1</a></li>
                  <li><a href="hs2.html" title="Horizontal Menu - Page 2">Stage 2</a></li>      
                  <li><a href="hs3.html" title="Horizontal Menu - Page 3">Stage 3</a></li>
                  <li><a href="hs4.html" title="Horizontal Menu - Page 4">Stage 4</a></li>
                  <li><a href="hs5.html" title="Horizontal Menu - Page 5">Stage 5</a></li>      
                  <li><a href="hs6.html" title="Horizontal Menu - Page 6">Stage 6</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>                     
    </div>
    </body>
    </html>

    This adds the classes to the li all the way down

    [NOTE THAT I HOTLINKED TO ERIC MEYER'S STYLESHEET ON HIS SERVER. DO NOT KEEP THIS LINK. PLEASE DOWNLOAD A COPY TO YOUR SERVER AND LINK TO YOUR OWN LOCAL HOSTED VERSION]

    You'll notice I added <link rel="stylesheet" type="text/css" href="print.css" media="print" />

    This now links to a separate stylesheet called print.css and uses it when printed to.

    In your new print.css file, add something like
    Code CSS:
    body {
    	font: 1em/1.2em Georgia, "Times New Roman", Times, serif;
    	color: #000; 
    }
     
    h1,h2,h3,h4,h5,h6 {
    	font-family: Helvetica, Arial, sans-serif;
    	color: #000;
    	margin: 1% 0;
    }
    h1 { font-size: 175%;}
    h2 { font-size: 150%; }
    h3 { font-size: 135%; }
    h4 { font-size: 100%; font-variant: small-caps; }
    h5 { font-size: 100%; }
    h6 { font-size: 90%; font-style: italic; }
     
    #pagetop * {
    	display: none;
    }
    #pagetop h1, #pagetop h2 {
    	display: block;
    }
     
    #menu  *{
    	font-size: 1em;
    	font-weight: normal;
    }
     
    #menu ul, #menu ul * {
    	display: inline;
    }
     
    #menu li:not(.current-pages)
    {
    	display: none;
    }
    #menu li.current-pages:before {
    	content: "\00BB";
    	margin: 0 1%;
    }

    This removes everything except for your titles from #pagetop, and removes everything from your nav bar except for everything with .current-pages.

    It then makes them inline, and adds some raquos before them to show a "breadcrumb" like structure.

    I also wrapped your current internal stylesheet in @media screen { } so that it only applies to screens and not to print.

    Please read this: http://www.w3schools.com/css/css_howto.asp
    about external stylesheets,

    And: http://www.google.com/search?q=media+print+stylesheet
    about using media queries for print stylesheets, and basic print stylesheet formatting.

  16. #16
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So with all the help from u i was able to build site as ( just and example) below but i cannot have different current pages classes for horizonal and the vertical menu
    is it true i can have only one current page class because users only get the vertical menu when they get to the introduction.html how can i accomplish that ??
    Code:
    <html>
    <head>
    /*
    Vertical  menu coding 
     */
    #menu  {
             wtestth: 6.6em;
             background: #3f6fb7;
          }
     
    #menu ul 
      {
         list-style: none;
         margin: 0; 
         padding: 0;
       }
     
    #menu a, #menu h2 
      {
        display:block;
        border-wtestth: 1px;
        border-style: soltest;
        border-color: #ccc #888 #555 #bbb;
        margin: 0;
        padding: 2px 3px;
        font-family: arial, helvetica, sans-serif;
        font-size: 11px;
        line-height: 16px;
        font-weight: bold;
        color: #3f6fb7;
       }
    
     
    #menu h2 {
               color: #fff;
               background:#3f6fb7;
            }
     
    
    #menu h2 {  padding: 0;  background: transparent;}
     
    #menu h2 a {  background: #3f6fb7;  color: white;}
     
     
     
    h2:hover, h2:active {
     color: white;
    background: black;
    text-transform: none;
    }
    
    
    #menu a {
               color: #000;
               background: #efefef;
               text-decoration: none;
    }
     
    #menu li.current-pageHeading h2 a 
       { background:#000061;
        color: yellow;}
    
    #menu li.current-pages  a 
       {
        background:#000061;
        color: yellow;
         }
    
    #menu a:hover {
    color: #a00;
    background: #d1cf9f;
    }
     
    #menu li {
    position: relative;
    }
    
    #menu ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
    wtestth: 100%;
    }
     
    div#menu ul ul ul,
    div#menu ul ul li:hover ul ul
    {display: none;}
     
    div#menu ul ul li:hover ul,
    div#menu ul ul ul li:hover ul
    {display: block;}
    
    ul.stestenav li a:hover {
        background: #d1cf9f url(stestenav_a.gif) no-repeat 5px 7px;
        border-top: 1px soltest #1a4c76;
    }
    ul.stestenav li span{    display: none; }
    ul.stestenav li a:hover span {
        display: inline;
        font-size: 0.8em;
        padding: 10px 0;
    }
    
    /*
    horizontal  menu coding 
     */
     
    #nav {
        float: left;
        margin: 0 0 1em 0;
        padding: 0;
        list-style: none;
        
        
        }
    #nav li {
        float: left; }
    #nav li a {
        display:block;
        padding: 10px 10px;
        text-decoration: none;
        font-family:"Arial";
        color: white;
        border-right: 1px soltest #ccc;
        font-size: 15px;
        background-color: #3f6fb7; }
        
    }
    #nav li a:hover {
        color: #3f6fb7;
        background-color: #d1cf9f; } 
        
        
    #nav current-pageHorizontal a 
      {
        background:#3f6fb7 ;
        color: white;
    
       }    
    /*
    Print  menu coding 
    */
    
    </head>
    <body>
    
    <tr>    
      <td align="left" valign="top" bgcolor="#3f6fb7" dir="ltr" >
      </td>
     
        <td colspan="8" >
             <ul test="nav">
    
                   <li class = "current-pageHorizontal" > <a href="introduction.html">Intro</a></li>
                   <li> <a href="so.html">SO</a></li>
                   <li> <a href="c.html">C</a></li>
                   <li> <a href="D.html">D</a></li>
                   <li> <a href="dis.html">About Us</a></li>
           </ul>
        </td>
        </tr>
    
       
        <tr>
            <td wtestth="106" height="300" rowspan="2" valign = "top" bgcolor="#D1D09F">
                
            
    <div test="menu">
    <ul>
      <li>
      <h2> <a href = "Introduction.html"> Overview </a></h2>
      
        <ul>
         <li class = "Curren-pages"> <h2> <a href = "A.html"> A </a></h2>
    
        
                    <ul>
                          <li> <a href = "Test.html#test"> 1</a></li>
                          <li> <a href = "Test.html#test2"> 2 </a></li>
                          <li> <a href = "Test.html#test3"> 3</a></li>
    
                          <li> <a href = "Test.html#test4"> 4</a></li>
                          <li> <a href = "Test.html#test5"> 5</a></li>
                          
                   </ul>
    
                </li>
             </ul>
          </li>
    </ul>
    </body>
    </html>
    Last edited by Paul O'B; Dec 8, 2010 at 06:48. Reason: Please use code tags when pasting code

  17. #17
    SitePoint Zealot materialdesigner's Avatar
    Join Date
    Dec 2010
    Location
    Ithaca, NY
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm going to stop helping you now until
    a) You learn how to use CSS instead of HTML for layouts. You should not have any table markup for something non-tabular

    b) You learn a little more about CSS so that you understand WHY the things I have showed you work, instead of getting me to do the work for you. This is the crux. I can show you all day and all night, and until you understand WHY, you will never be able to take off the training wheels.

    c) This may be a longer goal, but please please PLEASE, learn some more English! It sounds ethnocentric of me, but if you want to communicate properly, I need to be able to understand EXACTLY what you want help with. Or choose a different language that we both understand to communicate in. I speak Spanish and French.

    If I wanted to code your entire site for you, you'd need to pay me just like other people.

    If anyone else wants to chime in and help this guy/gal, please do.

    By the way: You need a damn DOCTYPE. http://www.google.com/search?q=doctypes

  18. #18
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    And to add to materialdesigner's comments - if you're posting code blocks, please use the relevant tags to mark them up, so that it's easier for people reading your message to see what is what. Highlight the bit that's the HTML code, go to the "Select Syntax..." drop-down and choose HTML. Highlight the bit that's the CSS code, go to the "Select Syntax..." drop-down and choose CSS.

    (If you don't see a "Select Syntax..." drop-down, you'll need to click the "Go Advanced" button below your reply box to get the full toolbar up).

    We're all happy to help, but the emphasis is on help - we're not here to write your entire site for you, and we need to believe that you're putting in the effort to learn about what you're doing (eg by making some attempt to get rid of that awful presentational markup, let alone the layout tables) rather than just copying and regurgitating what people are telling you.

  19. #19
    SitePoint Zealot materialdesigner's Avatar
    Join Date
    Dec 2010
    Location
    Ithaca, NY
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Quote Originally Posted by Stevie D View Post
    And to add to materialdesigner's comments - if you're posting code blocks, please use the relevant tags to mark them up, so that it's easier for people reading your message to see what is what. Highlight the bit that's the HTML code, go to the "Select Syntax..." drop-down and choose HTML. Highlight the bit that's the CSS code, go to the "Select Syntax..." drop-down and choose CSS.
    Is there a way to make "Advanced Comment" the default? I hate having to click it and reload just to add a comment with some code blocks.

    (forgive if that's a newb Q, I'm new to these forums!)

  20. #20
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    materialdesigner,

    Thanks for all the help, I thought I had the html code under the html tags for the post, sorry about the layout.This will not happen again.

    I have the required doctypes in the webpage but i didnot have them in when i was posting the forum.

    For the print menu I think I know what not to display, the navigation menu so I just referenced a cSS book and yoru code, and not show the menus at all, which I think which is I think the best way to print as you suggested.

    As far as learning CSS, I admit that I am treating the symptoms rather than finding the cause. This is something i am improving on, as i learn more about CSS.
    Last edited by CSShelpPlease; Dec 7, 2010 at 17:38. Reason: Posting issue

  21. #21
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Off Topic:

    Quote Originally Posted by materialdesigner View Post
    Is there a way to make "Advanced Comment" the default? I hate having to click it and reload just to add a comment with some code blocks.
    If you click the 'quote' button against someone's message then it automatically uses the advanced editor - it's only if you go straight to the 'quick reply' box at the bottom that it gives you the basic one.


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
  •