Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 18
  1. #1
    Member dustedpetalsx's Avatar
    Join Date
    Sep 2011
    Location
    Hertfordshire UK
    Posts
    49
    Member #
    29238
    Liked
    12 times
    Well, I have been looking at this all morning and for some reason I just can't work it out - I expect it's incredibly simple but my horiztonal drop menu will NOT center, no matter what I have tried. I tried the margin: auto, text-align:center, tried doing some weird css trick I googled with -50% and 50% in another block which completely blew up my design,

    I just don't know what more to do..? It's the P7 Express Drop Down script I'm using. I'm guessing it's the CSS, it's all I can think it to be...

    Here is the css file I'm using - can anyone tell me what I'm doing wrong? Almost to the point that I want to cry now!

    Anyone who can help I would be everso grateful!

    Code:
    /*
      ------------------------------------
      PVII Menu CSS Express Drop-Down Menu
      by Project Seven Development
      www.projectseven.com
      ------------------------------------
    */
    body {
        font-family: "Trebuchet MS", Arial, sans-serif;
        font-size: 100%;
        background-color: #FFFFFF;
        margin: 24px 0;
        padding: 0;
        background-image: url(images/p7exp_pbg.jpg);
        background-repeat: repeat-x;
    }
    /*
    Container for the menu. We set top and bottom borders only because the menu container
    stretches the entire window width. Note that this container can go inside a fixed width
    element that is centered on the page, if you so desire. It can even go inside a table cell.
    It carries a background image for aesthetics.
    */
    #menuwrapper {
        border-top: 1px solid #fff;
        border-bottom: 0px solid #727272;
        background-color: #a5bdfb;
        margin: auto;
        text-align: center;
        background-image: url();
        background-repeat: repeat-x;
    
    }
    /*Clears the floated menu items.
    Assigned to a BR tag placed just before
    menuwrapper's closing DIV tag*/
    .clearit {
        clear: both;
        height: 0;
        line-height: 0.0;
        font-size: 0;
    }
    /*
    p7menubar is the root UL and p7menubar ul applies to all the sub-menu ULs.
    We set padding and margin to zero to eliminate all indentation, turn bullets off,
    and set a font-family different from the global font-family declared for the
    body element above. This sets font for just the menu. Do not add a font-size here.
    */
    #p7menubar {
        padding: 0;
        margin: auto;
        width: 100%;
        text-align: center;
        list-style: none;
        font-family: Helvetica;
    }
    
    #p7menubar ul {
        padding: 0;
        margin: auto;
        width:960px;
        text-align: center;
        list-style:none;
        font-family: Helvetica;
    }
    /*
    Root-Level Links.  Do not change the first two properties.
    Adjust padding values to make the root links taller and to offset them
    from the left and right edges of the link box. The border right creates a
    separator between links. Font-size is set here and will apply to all menu levels.
    Font color is set to light gray.
    */
    #p7menubar a {
        display: inline;
        display: block;
        text-decoration: none;
        padding: 5px 10px 5px 10px;
        border-right: 0px solid #727272;
        font-size: .85em;
        color: #fff;
    }
    /*
    Class assigned to those Root-Level links that have associated Sub-Menus.
    The top and bottom padding assigned this element must be the same as
    that assigned to the p7menubar a element. The right padding is increased
    to accomodate the display of background image depicting a downward
    pointing arrow.
    */
    #p7menubar a.trigger {
        padding: 5px 16px 5px 10px;
        background-image: url(images/p7PM_dark_south.gif);
        background-repeat: no-repeat;
        background-position: right center;
    }
    /*
    The Root-Level list items. Floating left allows
    them to appear horizontally. Width is for IE5 Mac. The last rule in
    this style sheet will set the width for this element to auto for all
    other browsers - hiding it from IE5 Mac. The width is proportional.
    As you add and edit root menu items, you will need to test this width
    to ensure it is wide enough to accomodate all text.
    */
    #p7menubar li {
        float: left;
        width: 9em;
    
    }
    /*
    Sets width for Sub-Menu box and the List Items inside - in proportional em units.
    This allows the sub-menu width to expand if users resize the text in their browsers.
    */
    #p7menubar li ul, #p7menubar ul li  {
        width: 12em;
    }
    /*
    The sub-menu links. We set color and turn off the right border, which
    would otherwise be inherited from the root link rule. We set top and
    bottom padding less than the root items and increas the left padding
    to indent the sub-menu links a small amount in from the root links.
    */
    #p7menubar ul li a  {
        color: #565656;
        border-right: 0;
        padding: 3px 12px 3px 16px;
    }
    /*
    Sub-Menu Unordered Lists describes each dropdown sub-menu grouping.
    Positioned Absolutely to allow them to appear below their root trigger.
    Set to display none to hide them until trigger is moused over.
    Background Color must be set or problems will be encountered in MSIE.
    Right and bottom borders are set to simulate a raised look.
    A gradient background image is assigned.
    */
    #p7menubar li ul {
        position: absolute;
        display: none;
        background-color: #fff;
        border-right: 1px solid #727272;
        border-bottom: 1px solid #727272;
        background-image: url();
        background-repeat: repeat-x;
    }
    /*
    Changes the Text color and background color when the Root-Level
    menu items are moused over. The second selector sets color and background
    when Root-Level items are accessed with the keyboard tab key. The third
    selector sets an active state to support keyboard access in MSIE. The fourth
    selector is assigned to IE5 and IE6 Windows via the P7_ExpMenu script.
    Note that IE7 supports hover on elements other than links and so behaves
    like Firefox, Opera, and Safari - making the menu operable even if JavaScript
    is not enabled.
    */
    #p7menubar li:hover a, #p7menubar a:focus,
    #p7menubar a:active, #p7menubar li.p7hvr a {
        color: #a5bdfb;
        background-color: #fff;
    }
    /*
    Set the Sub-Menu UL to be visible when its associated
    Root-Level link is moused over. The second selector is
    assigned to IE5 and IE6 via the P7_ExpMenu script.
    */
    #p7menubar li:hover ul, #p7menubar li.p7hvr ul {
        display: block;
    }
    /*
    Sets the Text color of the Sub-Level links when the Root-Level
    menu items are moused over. The second selector is
    assigned to IE5 and IE6 via the P7_ExpMenu script.
    The color set should march the normal Sub-Level link color
    in the rule: #p7menubar ul li a. The background color must be
    transparent to allow the underlying gradient background on the UL
    to show through.
    */
    #p7menubar li:hover ul a, #p7menubar li.p7hvr ul a {
        color: #a5bdfb;
        background-color: transparent;
    }
    /*
    The normal hover class for Sub-Level links. The Important directive
    is required for older browsers. We set a background color, which shows
    over the gradient background. We set text color to white.
    */
    #p7menubar ul a:hover {
        background-color: #a5bdfb!important;
        color: #FFFFFF!important;
    }
    /* The single backslash \ character inside this comment
    causes IE5 Mac to ignore the following rule, which allows other
    browsers to render top-level menu items to their natural width.
    Do not edit this rule in any way. */
    #p7menubar li {width: auto;}

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Without the HTML for the menu, it's anybody's guess.

    Need to see the HTML to give you an educated guess.

    Otherwise the answer to your question is: 7

  4. #3
    Member dustedpetalsx's Avatar
    Join Date
    Sep 2011
    Location
    Hertfordshire UK
    Posts
    49
    Member #
    29238
    Liked
    12 times
    7 might just be it! Anything could be the answer right now, I am boggled - but my apologies for that silly mistake.. here is the HTML I am using for the menu part :-)

    This is the other part of the CSS I put directly into the header also - I forgot to mention this..

    Code:
    <script type="text/javascript" src="p7exp/p7exp.js"></script>
    <!--[if lte IE 7]>
    <style>
    #menuwrapper, #p7menubar ul a {height: 1%;}
    a:active {width: auto;}
    </style>
    <![endif]-->
    And this is the HTML for the menu itself - if you need more information I can just link you the site.

    Code:
    <div id="menuwrapper">
    <ul id="p7menubar">
    <li><a href="#">HOME</a></li>
    <li><a class="trigger" href="#">ABOUT US</a>
    <ul>
    <li><a href="#">MEET THE TEAM</a></li>
    <li><a href="#">TESTIMONIALS</a></li>
    <li><a href="#">COMPANY INFORMATION</a></li>
    </ul>
    </li>
    <li><a class="trigger" href="#">HOSTING</a>
    <ul>
    <li><a href="#">VIEW OUR PACKAGES</a></li>
    <li><a href="#">WHY DO I NEED HOSTING?</a></li>
    <li><a href="#">ORDER A PACKAGE</a></li>
    <li><a href="#">CHECK SERVER STATUS</a></li>
    </ul>
    </li>
    <li><a href="#">TITLE</a></li>
    <li><a class="trigger" href="#">TITLE</a>
    <ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    </ul>
    </li>
    </ul>
    <br class="clearit">
    </div>

  5. #4
    Member dustedpetalsx's Avatar
    Join Date
    Sep 2011
    Location
    Hertfordshire UK
    Posts
    49
    Member #
    29238
    Liked
    12 times
    In fact it's probably much easier just to send you the URL of the page itself - I'm not too great at coding to be honest, but my partner wants me to practice as much as possible so I can help out in this part of the site. It's probably something SO simple and if so, I'm really embarrassed... lol! Don't laugh at me ;-D

    http://watford-webdesign.com - you will see there the menu is completely to the left. I'm hoping to resolve this before he gets back but the help will assist me in the future... anything I can do to show my gratitude just let me know ^^

  6. #5
    Member dustedpetalsx's Avatar
    Join Date
    Sep 2011
    Location
    Hertfordshire UK
    Posts
    49
    Member #
    29238
    Liked
    12 times
    HURRAH! I have managed to find a way. I made a new DIV and set it to a certain width to match the graphic below, then put the menu inside that. It's a really roundabout way but it seems to work so that will do LOL!

    Thanks for looking at this though

  7. #6
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    I didn't get a chance to look, but glad you figured it out.

    So 7 wasn't the answer ? Sorry bout that... Had only about half a cup of coffee when a client started calling and I was trying to answer your post. Gotta get rid of a couple overseas clients as they think I'm awake 24/7 just waiting for their calls at 5 in the morning.

  8. #7
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by Webzarus, post: 219073
    I didn't get a chance to look, but glad you figured it out.

    So 7 wasn't the answer ? Sorry bout that... Had only about half a cup of coffee when a client started calling and I was trying to answer your post. Gotta get rid of a couple overseas clients as they think I'm awake 24/7 just waiting for their calls at 5 in the morning.
    Well, even without coffee, I know that, at least according to Douglas Adams, the answer is actually 42...
    m3n0tu18 likes this.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  9. #8
    Member dustedpetalsx's Avatar
    Join Date
    Sep 2011
    Location
    Hertfordshire UK
    Posts
    49
    Member #
    29238
    Liked
    12 times
    Well if I had called the DIV layer "7", it would have been! LOL ;-D

    Gosh that's not nice, 5am phone calls! I bet you have a LOT of coffee granules in your house ;P

  10. #9
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    I get calls at all times and days, but that's what to expect when you have clients and their support staff all over the world.

    Doesn't happen that often, they usually wait until 5 as that's when I wake up every morning unless I had a visit with Jack or Johnny the previous evening, then it no later than 7, if I'm still sleeping past that, my wife checks my pulse to see if she needs to call the morgue.

    Coffee ? Yes please !

  11. #10
    Member christopher_b's Avatar
    Join Date
    Aug 2011
    Location
    Pretoria, South Africa
    Posts
    69
    Member #
    29042
    Liked
    7 times
    Well I didn't read the whole thing, but just by looking at your code quickly I saw one thing that will PREVENT your menuwrapper from centering.

    You used the margin: auto; function, but that ONLY works, when you specify a width.
    The code cant know how to center something when it doesn't even know how big the item is that needs to be centered.

    Let me know how it goes, sorry for the short reply, but I'm quite busy at work lately and only pop in for a few minutes,

    cheers.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

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

Search tags for this page

centered html menu with vertical drop down

Click on a term to search for related topics.
All times are GMT -6. The time now is 07:39 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com