Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    2
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Unhappy CSS Menu layout problem/conflict?

    Hi Forum,

    Firstly, I'm very poor with coding, but certainly willing to learn. I took on a project to help a friend create a website. As you can see here that there clearly is an issue with the CSS Menu (which I created for free at http://cssmenumaker.com/css-menus).

    I read that changing the z-index to a number above '5' would solve the issue that the CSS Menu sits behind the slider - It seems to have worked, but I'm not sure how stable it is. The issue you can see is that an element of the Menu is appearing to the right of the logo.

    Here is the index code:
    index.php
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Dynamic Gymnastics</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <!--Nivo Slider-->
    <link rel="stylesheet" href="js/slide/default.css" type="text/css" media="screen">
    <link rel="stylesheet" href="js/slide/nivo-slider.css" type="text/css" media="screen">
    <!--FANCY BOX-->
    <script src="js/jquery-1.4.3.min.js"></script>
    <script src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="js/fancybox/jquery.fancybox-1.3.4.css" media="screen">
    <script>
    $(document).ready(function () {
        $("a#fancybox").fancybox();
    });
    </script>
    <style type="text/css">
    .fancy a img{border:1px solid #BBB; padding:2px; margin:10px 20px 10px 0; vertical-align:top;}
    .fancy a img.last{margin-right:0;}
    a:link {
    	color: #0099FF;
    }
    a:hover {
    	color: #0066FF;
    }
    a:visited {
    	color: #990000;
    }
    </style>
    <!--FANCY BOX-->
    <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
    <script>var __adobewebfontsappname__="dreamweaver"</script>
    <script src="http://use.edgefonts.net/actor:n4:default;andada:n4:default.js" type="text/javascript"></script>
    </head>
    <body>
    <div class="header">
      <div id="logo"> <a href="#"> <img src="images/logo.png" alt="" width="672" height="176"> </a> </div>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <div id='cssmenu'>
    <ul>
       <li class='active'><a href='index.php'><span>Home</span></a></li>
       <li class='has-sub'><a href='about.php'><span>About</span></a>
          <ul>
             <li><a href='holiday.php'><span>Holiday programme</span></a></li>
             <li class='last'><a href='coc.php'><span>Codes of Conduct</span></a></li>
          </ul>
       </li>
       <li class='has-sub'><a href='termdates.php'><span>Term Dates</span></a>
          <ul>
             <li><a href='termdatesc.php'><span>Cambridge</span></a></li>
             <li><a href='termdatess.php'><span>Saffron Walden</span></a></li>
             <li class='last'><a href='termdatesl.php'><span>Linton</span></a></li>
          </ul>
       </li>
       <li class='has-sub'><a href='ourclubs.php'><span>Our Clubs</span></a>
          <ul>
             <li><a href='ourclubs.php#cambridge'><span>Cambridge</span></a></li>
             <li><a href='ourclubs.php#linton'><span>Linton</span></a></li>
             <li class='last'><a href='ourclubs.php#saffronwalden'><span>Saffron Walden</span></a></li>
          </ul>
       </li>
       <li><a href='coaches.php'><span>Coaches</span></a></li>
       <li><a href='workforus.php'><span>Work for Us</span></a></li>
       <li><a href='faq.php'><span>FAQ</span></a></li>
       <li><a href='fees.php'><span>Fees/Cancellations</span></a></li>
       <li class='last'><a href='contactus.php'><span>Contact Us</span></a></li>
    </ul>
    </div>
      <p>&nbsp;</p>
    </div>
    <div id="body-wrapper" class="clearfix">
      <!--start body-wrapper-->
      <div style="padding-top: 6px;" class="slider-wrapper theme-default">
        <div id="slider" class="nivoSlider"> <img src="images/slide1.png" alt=""> <img src="images/slide2.png" alt=""> </div>
      </div>
      <div class="box">
        <h1>Welcome to the Dynamics Gymnastics website!</h1>
        <div class="box">
          <h2>Dynamics Gymnastics was formed in 2002 and is currently owned and managed by Diane Clark, Viktoria Markovics and Sophie Clark.   The aim of Dynamics Gymnastics is to provide quality General Gymnastics coaching within the Eastern Region.   We hope to provide as many people as possible with the opportunity to enjoy and learn a variety of basic gymnastics skills as well as keeping fit and healthy in the process.  Currently we have classes  in Cambridge, Linton and Saffron Walden.   Please use the various links to browse our website and find out more about Dynamics Gymnastics and its classes. </h2>
          <div class="box">
    	  <div style="width:960px; margin-bottom:30px;">
    <newsheading><div><strong>New Website</strong> </div></newsheading>
    
    <news><div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:5px; border-top:1px solid #D3D3D3;">Welcome to the new Dynamics Gymnastics website. Make sure to visit the website for regular updates regarding, classes, schedules and events!
    
    - Dynamics Gymnastics Team</div></news>
    
    <div style="float: right;"><a target="_blank" href="/index.php?mod=editnews&amp;action=editnews&amp;id=1379679557">Edit</a> <!-- no full story--></div>
    
    <div><em>Posted on 2013 Sep 20 by admin</em></div>
    </div><div style="margin-top:15px;width:100%;text-align:center;font:9px Verdana;">Powered by <a href="http://cutephp.com/" title="CuteNews - PHP News Management System">CuteNews</a></div><!-- News Powered by CuteNews: http://cutephp.com/ --></div>
        </div>
      </div>
      <!--end top half content-->
      <div class="clear"></div>
      <div class="clear"></div>
      <div id="footer-main">
        <!--start footer-main-->
        <div class="one_fourth">
          <h3>Contact</h3>
          <p>General enquiries: <a href="mailto:info@dynamicdymnastics.co.uk">info@dynamicdymnastics.co.uk</a><br>
          Enquiries into Fees, Payments, staffing, coaching courses: <a href="mailto:diane@dynamicgymnastics.co.uk">diane@dynamicgymnastics.co.uk</a></p>
        </div>
      </div>
      <!--end footer-main-->
      <div id="footer">
        <p id="footer-text">&copy; Copyright 2013 Dynamic Gymnastics. All Rights Reserved</p>
      </div>
    </div>
    <!--end-body wrapper-->
    <!--Nivo Slider-->
    <script src="js/slide/jquery.nivo.slider.pack.js"></script>
    <script>
    $(window).load(function () {
        $('#slider').nivoSlider();
    });
    </script>
    </body>
    </html>
    I'm also attaching the CSS Menu .css code:
    styles.css

    Code:
    #cssmenu ul,
    #cssmenu li,
    #cssmenu span,
    #cssmenu a {
      margin: 0;
      padding: 0;
      position: relative;
    }
    #cssmenu {
      height: 49px;
      border-radius: 5px 5px 0 0;
      -moz-border-radius: 5px 5px 0 0;
      -webkit-border-radius: 5px 5px 0 0;
      background: #fefefe;
      background: -moz-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #eee9f0));
      background: -webkit-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
      background: -o-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
      background: -ms-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
      background: linear-gradient(top, #fefefe 0%, #eee9f0 100%);
      border-bottom: 2px solid #4c86de;
      width: auto;
    }
    #cssmenu:after,
    #cssmenu ul:after {
      content: '';
      display: block;
      clear: both;
    }
    #cssmenu a {
      background: #fefefe;
      background: -moz-linear-gradient(top, #fefefe 0%, #ececec 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #ececec));
      background: -webkit-linear-gradient(top, #fefefe 0%, #ececec 100%);
      background: -o-linear-gradient(top, #fefefe 0%, #ececec 100%);
      background: -ms-linear-gradient(top, #fefefe 0%, #ececec 100%);
      background: linear-gradient(top, #fefefe 0%, #ececec 100%);
      color: #000;
      display: inline-block;
      font-family: Helvetica, Arial, Verdana, sans-serif;
      font-size: 12px;
      line-height: 49px;
      padding: 0 20px;
      text-decoration: none;
    }
    #cssmenu ul {
      list-style: none;
    }
    #cssmenu > ul {
      float: left;
    }
    #cssmenu > ul > li {
      float: left;
    }
    #cssmenu > ul > li > a {
      color: #091fad;
      font-size: 12px;
    }
    #cssmenu > ul > li:hover:after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      left: 50%;
      bottom: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #4c86de;
      margin-left: -10px;
    }
    #cssmenu > ul > li:first-child > a {
      border-radius: 5px 0 0 0;
      -moz-border-radius: 5px 0 0 0;
      -webkit-border-radius: 5px 0 0 0;
    }
    #cssmenu > ul > li.active:after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      left: 50%;
      bottom: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #4c86de;
      margin-left: -10px;
    }
    #cssmenu > ul > li.active > a {
      -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
      -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
      box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
      background: #ececec;
      background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
      background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
      background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
      background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
      background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
    }
    #cssmenu > ul > li:hover > a {
      background: #ececec;
      background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
      background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
      background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
      background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
      background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
      -moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
      -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
      box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
    }
    #cssmenu .has-sub {
      z-index: 99999;
    }
    #cssmenu .has-sub:hover > ul {
      display: block;
    }
    #cssmenu .has-sub ul {
      display: none;
      position: absolute;
      width: 200px;
      top: 100%;
      left: 0;
    }
    #cssmenu .has-sub ul li {
      *margin-bottom: -1px;
    }
    #cssmenu .has-sub ul li a {
      background: #4c86de;
      border-bottom: 1px dotted #77a3e6;
      filter: none;
      font-size: 12px;
      display: block;
      line-height: 120%;
      padding: 10px;
      color: #ffffff;
    }
    #cssmenu .has-sub ul li:hover a {
      background: #266ad1;
    }
    #cssmenu .has-sub .has-sub:hover > ul {
      display: block;
    }
    #cssmenu .has-sub .has-sub ul {
      display: none;
      position: absolute;
      left: 100%;
      top: 0;
    }
    #cssmenu .has-sub .has-sub ul li a {
      background: #266ad1;
      border-bottom: 1px dotted #77a3e6;
    }
    #cssmenu .has-sub .has-sub ul li a:hover {
      background: #225fbb;
    }
    I would appreciate any help or tips to resolve this. I'm not expecting anyone to do this for me, just a little insight as I really have a very poor knowledge of coding.

    Regards

    Skanza

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    As you can see here that there clearly is an issue with the CSS Menu
    I'm sorry, it's not clear to me. Please be specific.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,765
    Thanks
    23
    Thanked 548 Times in 547 Posts
    What element is to the right of the logo? I looks ok in FF so what browser and ver are you using?
    Evolution - The non-random survival of random variants.

  • #4
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Add this to #cssmenu

    Code:
    width: 69.5%;
    position: absolute;
    top: 183px;
    left: 212px;
    float: left;

  • Users who have thanked tempz for this post:

    skanza (10-07-2013)

  • #5
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 1 Time in 1 Post
    z-index

  • #6
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 1 Time in 1 Post
    z-index only works on classes or id's that also have a position attribute associated with them.

  • Users who have thanked andrewc3 for this post:

    skanza (10-07-2013)

  • #7
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts
    Posts
    283
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    Quote Originally Posted by tempz View Post
    Add this to #cssmenu

    Code:
    width: 69.5%;
    position: absolute;
    top: 183px;
    left: 212px;
    float: left;
    Tempz seems to be correct. And is that a fellow League of Legends player I see?
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • Users who have thanked Nerevarine for this post:

    skanza (10-07-2013)

  • #8
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    2
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I have implemented the changes, and they work perfectly.

    Thanks for the help guys.

    Regards


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •