Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: I can't seem to get my menu centered

  1. #1
    Join Date
    Jan 2018
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default I can't seem to get my menu centered

    Hello again.
    I am trying to set up a menu with this that I copied fro DD

    http://www.dynamicdrive.com/style/cs...slide_in_menu/


    I added a small bit to make a spot for a Header image. The two Header parts are great, but I must be having "slow brain syndrome"
    I'm not able to get the menu centered. I gave up trying and finally deleted my "non-working" stuff. Sure could some advice, thank you very much
    for any help. keytoner (JD Gann)
    This is what I added.

    HTML Code:
    <style>
    
    p {
        background-color: yellow;
    }
    
    
    
    
    table, th, tr, td {
        border: 4px solid blue;
        background-color: lightblue;
        font-weight: bold;
        font-style: italic;
    }
    
    
    body {background-color:lightblue;
    }
    
    
    </style>
    
    
    </head>
    
    <body>
        
    
       
       <div>
    <table style="width:100%" height="150px">
     
            <th><img src="turkey6.jpg"></th>
     <tr>   
       <th>
    Welcome to JD's WebMarket
       </th>
     </tr>
       
        </style>
    </table>
    
    <br /><br />

    This is complete coding-
    HTML Code:
    <!Doctype HTML>
    
    <head>
        
    <link href="http://fonts.googleapis.com/css?family=Bitter&subset=latin" rel="stylesheet" type="text/css">
    
    <style>
    
    .bgslidemenu {
        font: bold 16px 'Bitter', sans-serif; /* use google font */
        position: relative;
        width: 100%;
    }
    
    .bgslidemenu:after { /* clear menu */
        content: '';
        clear: both;
        display: block;
    }
    
    /* Top Level Menu */
    .bgslidemenu ul {
        z-index: 100;
        margin: 0;
        padding: 0;
        position: relative;
        list-style: none;
        float: right; /* change to "left" to left align menu */
    }
    
    /* Top level list items */
    .bgslidemenu ul li {
        position: relative;
        display: inline;
        margin-right: 20px; /* spacing between each top level menu item */
        float: left;
    }
    
    /* Top level menu items link style */
    .bgslidemenu ul li a {
        display: block;
        position: relative;
        color: white;
        padding: 14px 10px;
        color: black;
        text-decoration: none;
    }
    
    .bgslidemenu ul li a:link, .bgslidemenu ul li a:visited {
        color: black;
    }
    
    /* Top level menu items link style on hover */
    .bgslidemenu ul li:hover > a {
        color: purple !important;
    }
    
    /* LIs links with a sub UL style */
    .bgslidemenu ul li > a {
        /* add padding to accomodate arrow inside LIs */
        padding-right: 25px;
    }
    
    /* LIs links with NO sub UL style */
    .bgslidemenu ul li > a:only-child {
        /* undo padding for non submenu LIs */
        padding-right: 10px;
    }
    
    /* LIs links with a sub UL pseudo class (Add down arrow) */
    .bgslidemenu ul li > a:after {
        /* add arrow inside LIs */
        content: "";
        position: absolute;
        height: 0;
        width: 0;
        border: 5px solid transparent;
        border-top-color: black;
        top: 50%;
        transform: translateY(-20%);
        right: 8px;
    }
    
    /* LIs links with NO sub UL pseudo class */
    .bgslidemenu ul li > a:only-child:after {
        /* undo arrow for non submenu LIs */
        display: none;
    }
    
    /* Sub ULs style */
    .bgslidemenu ul li ul {
        position: absolute;
        left: -5000px;
        top: auto;
        opacity: 0;
        width: 200px; /* width of drop down menus */
        visibility: hidden;
        padding-top: 80px; /* Add large top padding to drop down menu */
        z-index: -1;
        background: #F3F3F3;
        transform: translateY(100px);
        -webkit-transition: opacity .3s, transform .5s, visibility 0s .3s, left 0s .3s;
        transition: opacity .3s, transform .5s, visibility 0s .3s, left 0s .3s;
    }
    
    /* Sub UL style on hover */
    .bgslidemenu ul li:hover > ul {
        visibility: visible;
        left: -30px;
        transform: translateY(-80px); /* move drop down menu upwards (should be smaller than padding-top value above) */
        opacity: 1;
        -webkit-transition: opacity 1s, transform .5s;
        transition: opacity 1s, transform .5s;
    }
    
    /* Sub level Menu list items (alters style from Top level List Items) */
    .bgslidemenu ul li ul li {
        display: list-item;
        float: none;
        overflow: hidden;
    }
    
    /* Add animated line to sub menu item on Mouseover */
    .bgslidemenu ul li ul li:after {
        content: '';
        position: absolute;
        width: 30px;
        height: 5px;
        background: purple;
        left: 0;
        top: 50%;
        transform: translate3d(-100%, -50%, 0);
        transition: transform .3s;
    }
    
    .bgslidemenu ul ul li:hover:after {
        transform: translate3d(0, -50%, 0);
    }
    
    /* Sub Levels link style on hover and when active */
    .bgslidemenu ul ul li:hover > a {
        color: purple !important;
    }
    
    /* Sub level menu links style */
    .bgslidemenu ul li ul li a {
        font: normal 16px 'Bitter', sans-serif;
        padding: 10px;
        padding-left: 40px; /* Add left padding to sub menu links to accommodate animated line */
        position: relative;
        margin: 0;
    }
    
    
    /* ####### responsive layout CSS ####### */
    @media (max-width: 700px) {
        /* 
    			For mobile and screen browser windows
    			Get Sub ULs to expand entire width of document and drop down
    			Changes menu reveal type from "visibility" to "display" to overcome bug. See comments below
    		*/
    
    	.bgslidemenu ul {
            float: none;
        }
    
        .bgslidemenu ul li {
            position: relative;
            display: block;
            width: 100%;
        }
    
        .bgslidemenu ul li ul {
            width: 100%;
            position: relative;
            border-top: 2px solid #eee;
            /* change menu reveal type from "visibility" to "display". Former seems to cause browser to jump to top of page sometimes when menu header is tapped on */
            display: none;
        }
    
        .bgslidemenu ul li:hover > ul {
            display: block;
            padding-top: 0;
            transform: none;
            z-index: 10000;
            left: 0 !important;
            top: auto;
        }
    
        .bgslidemenu ul ul li:hover > ul {
            left: 0 !important;
            top: auto;
        }
    }
    
    </style>
    
    
    <style>
    
    p {
        background-color: yellow;
    }
    
    
    
    
    table, th, tr, td {
        border: 4px solid blue;
        background-color: lightblue;
        font-weight: bold;
        font-style: italic;
    }
    
    
    body {background-color:lightblue;
    }
    
    
    </style>
    
    
    </head>
    
    <body>
        
    
       
       <div>
    <table style="width:100%" height="150px">
     
            <th><img src="turkey6.jpg"></th>
     <tr>   
       <th>
    Welcome to JD's WebMarket
       </th>
     </tr>
       
        </style>
    </table>
    
    <br /><br />
    
        
      <div class="bgslidemenu">
          
    
    <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="javascript:vold(0)">Item 2</a>
      <ul>
    	  <li><a href="#">Sub Item 1.1</a></li>
    	  <li><a href="#">Sub Item 1.2</a></li>
    	  <li><a href="#">Sub Item 1.3</a></li>
    	  <li><a href="#">Sub Item 1.4</a></li>
    	  <li><a href="#">Sub Item 1.2</a></li>
    	  <li><a href="#">Sub Item 1.3</a></li>
    	  <li><a href="#">Sub Item 1.4</a></li>
      </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li><a href="javascript:vold(0)">Item 4</a>
      <ul>
    	  <li><a href="#">Sub Item 3.1</a></li>
    	  <li><a href="javascript:vold(0)">Sub Item 3.2</a></li>
      </ul>
    </li>
    <li><a href="https://twitter.com/ddrivegeorge">Twitter</a></li>
    </ul>
    </div>
    
    
        
    </body>
    </html>
    Last edited by keyboard; 02-01-2018 at 11:29 PM. Reason: Format: HTML Tags

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    508
    Thanks
    9
    Thanked 59 Times in 57 Posts

    Default

    Can someone place this in a wrapper please...?
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  3. #3
    Join Date
    Mar 2011
    Location
    N 11 19' 0.0012 E 142 15' 0
    Posts
    1,634
    Thanks
    59
    Thanked 100 Times in 98 Posts
    Blog Entries
    4

    Default

    Quote Originally Posted by Deadweight View Post
    Can someone place this in a wrapper please...?
    Done. As a future note to anyone who didn't know you can use [html][/html] around your code to put it in a code block. Makes it super easy to read.

  4. #4
    Join Date
    Jan 2018
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Sorry, but except for the little bit for the Header (which is the only thing I that I added), that entire code was copied directly out of Dynamic Drive CSS
    as you can tell from the link that I happened to mention at the top of my post.
    Didn't mean to bother you. Thanks anyway, I won't both you again. JD

  5. #5
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    469
    Thanks
    0
    Thanked 61 Times in 57 Posts

    Default

    Quote Originally Posted by keytoner View Post
    Sorry, but except for the little bit for the Header (which is the only thing I that I added), that entire code was copied directly out of Dynamic Drive CSS
    as you can tell from the link that I happened to mention at the top of my post.
    Didn't mean to bother you. Thanks anyway, I won't both you again. JD
    Have you run your code through the W3C.org validator? I suspect not as there are numerous errors.

    Firstly you are missing the opening <html> tag and you have no <title> tag in the head section which is mandatory for HTML4 & HTML5.

    There are plenty of other errors which it might be wise to fix before you give us a link to your non-working page.

  6. #6
    Join Date
    Jan 2018
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hello again. I just typed out a reply but for some reason I got logged out, so I'll do it again.
    I wanted to tell you that all of you are absolutely correct. I didn't validate, I am aware that I am so un-familiar with proper coding that it is very important
    "Put the cart before the horse" you could say.
    I am not considering anything finished from now on until the page passes the W3C validator. That way, I'll get to learn the right way to do things.
    And...I will not be a hot-head any more.
    Thank all of you for jerking me up short, and for your patience with me. JD

  7. #7
    Join Date
    Jan 2018
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Yes, I had no intention of ever coming back to this Forum.
    However, I have changed my decision.
    I feel that you "Supreme" "Senior Coders" and whatever... might want to look again.
    All of you brilliant people have told me that (over & over) that I don't have an <html> or a closiing </html> tag.
    It could be that maybe you may need to learn to read again.
    You can easily look at what I posted and (if you try to read it slowly and careful) you will see that
    The little "snippet" of code at the beginning is simply a "snippet" of code which I had added. (I did explain that, by the way)
    I will leave all of you "Gurus" to try looking for the forest....(hint.. It is behind the trees)
    Good luck

  8. #8
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    469
    Thanks
    0
    Thanked 61 Times in 57 Posts

    Default

    Quote Originally Posted by keytoner View Post
    Yes, I had no intention of ever coming back to this Forum.
    However, I have changed my decision.
    I feel that you "Supreme" "Senior Coders" and whatever... might want to look again.
    All of you brilliant people have told me that (over & over) that I don't have an <html> or a closiing </html> tag.
    It could be that maybe you may need to learn to read again.
    You can easily look at what I posted and (if you try to read it slowly and careful) you will see that
    The little "snippet" of code at the beginning is simply a "snippet" of code which I had added. (I did explain that, by the way)
    I will leave all of you "Gurus" to try looking for the forest....(hint.. It is behind the trees)
    Good luck
    So, your words "This is complete coding-" in post #1 are not true?

  9. #9
    Join Date
    Jan 2018
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by styxlawyer View Post
    So, your words "This is complete coding-" in post #1 are not true?
    Now you have gotten me laughing!
    As I mentioned, you probably should read it again, (maybe with some help this time) bye bye.

  10. #10
    Join Date
    Jan 2018
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi Everyone,
    I want to apologize to all of you
    I have been a complete jerk!
    This Forum is ( and should be used for ) helping other to learn and grow.
    What I have done with this Forum is foolish and childish.
    I am sorry and ashamed.
    Please try to forgive me.

Similar Threads

  1. HV Menu Centered?
    By chickyleigh in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 10-07-2011, 03:34 PM
  2. menu not centered
    By dustnbones in forum CSS
    Replies: 3
    Last Post: 11-12-2010, 09:41 PM
  3. Replies: 2
    Last Post: 01-28-2010, 11:42 AM
  4. css menu should be centered
    By paulc201 in forum CSS
    Replies: 3
    Last Post: 08-25-2009, 04:31 PM
  5. centered dropdown menu
    By Chadi in forum JavaScript
    Replies: 3
    Last Post: 02-28-2006, 03:58 PM

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
  •