We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 9486
    • 39 Posts
    Howdy can anyone tell me how to remove the line breaks in the menu? site: http://www.jdmexcavating.com/

    Thanks for your time!

    Forgot this:

    /*
    Design by Free CSS Templates
    http://www.freecsstemplates.org
    Released for free under a Creative Commons Attribution 2.5 License
    */

    body {
    margin: 0;
    padding: 0;
    background: #311C00 url(../images/img1.jpg);
    text-align: justify;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: #9B8767;
    }

    h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #E8D6B4;
    }

    h2, h3 {
    margin: 0 0 20px 0;
    padding: 0 0 10px 0;
    background: url(../images/img3.gif) repeat-x left bottom;
    text-transform: none;
    letter-spacing: -1px;
    clear:both;
    }

    h2 {
    font-size: 25px;
    }

    h3 {
    font-size: 17px;
    }

    p, ol, ul {
    line-height: 160%;
    }

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

    ul li {
    padding: 2px 0 5px 0;
    background: url(../images/img4.gif) repeat-x;
    }

    ul li.first {
    background: none;
    }

    a {
    color: #D9C09A;
    }

    a:hover {
    text-decoration: none;
    }

    strong {
    color: #D9C09A;
    }

    .indent {
    margin-top: 0;
    margin-left: 130px;
    }

    .image {
    float: left;
    margin: 0;
    }

    #wrapper {
    background: url(../images/img2.jpg) repeat-x;
    }

    /* Header */

    #header {
    width: 730px;
    height: 250px;
    margin: 0 auto;
    }

    #header * {
    text-transform: lowercase;
    color: #FFFFFF;
    }

    #header h1 {
    float: left;
    padding: 90px 0 0 0;
    letter-spacing: -2px;
    font-size: 36px;
    }

    #header h2 {
    float: left;
    padding: 110px 0 0 6px;
    background: none;
    font-size: 12px;
    font-weight: normal;
    }

    #header h2 a {
    text-decoration: none;
    }

    #header ul {
    float: right;
    margin: 0;
    padding: left
    list-style: none;
    }

    #header li {
    display: inline;
    }

    #header li a {
    display: block;
    float: left;
    padding: 0 15px;
    border-left: 1px solid #7DD2FA;
    }

    #header li.first a {
    border: none;
    }

    /* Content */

    #content {
    width: 900px;
    margin: 0 auto;
    }

    #colOne {
    float: left;
    width: 500px;
    }

    #colTwo {
    float: right;
    width: 250px;
    text-align:left;
    }
    #colTwo ul li{
    padding-left:10px;
    }

    #colTwo h3 {
    margin-top: 10px;
    }

    /* Footer */

    #footer {
    clear: both;
    width: 730px;
    margin: 20px auto;
    padding: 20px 0;
    background: url(../images/img4.gif) repeat-x;
    }

    #footer p {
    margin: 0;
    padding: 0;
    text-transform: lowercase;
    text-align: center;
    }
      • 5340
      • 1,624 Posts
      1. Change

      <ul id=”menu”>

      to

      <ul id="menu">

      Different quotes

      2. Add to the css

      #menu ul li {
      display:inline;
      }
        • 9486
        • 39 Posts
        Excuse my stupidity where are do you see <ul id=”menu”>?

        In the CSS?
          • 18913
          • 654 Posts
          When I inspect the element using Firebug, I see this
          <ul id="”menu”">

          right after the img tag for the banner. That inner set of quotes should be deleted. So if this is a Wayfinder menu, you might have those in one of your chunks.

          And when the display:inline code is added, the menu does in fact end up on one line.
          MattC
            • 9486
            • 39 Posts
            thanks for the clarification they are now bunched up on 3 lines is there anything else I can do? Here is the edited CSS:
              • 18913
              • 654 Posts
              In your styling for "ul" add the line
              display:inline
              (credit cipa for these thoughts...)
              MattC
                • 5340
                • 1,624 Posts
                Quote from: fastmule at Mar 05, 2010, 05:32 PM

                thanks for the clarification they are now bunched up on 3 lines is there anything else I can do? Here is the edited CSS:

                Can you give a print screen of your right side of your manager. I want to see the structure of your site because I do not get why Land for Sale is nested in Convenant which is nested in Other Services which is nested in Contact Us (this is why you 4 lines)

                It might be the case that your html is incorrect.

                Together with the print screen of your left manager side(make sure all docs are visible) provide a short explanation of what you want to do.
                  • 9486
                  • 39 Posts
                  I got it thank you, thank you, thank you! This community rocks! One last question shocked

                  How would I center the menu on the page?

                  Thanks again Modx is the best.
                    • 27708 MODX Staff
                    • 2,502 Posts
                    Looks to me like you have a couple of issues.

                    1. For some reason you are calling 2 default.css files in your document head. This may cause problems.
                    2. If you are using Wayfinder the default UL wrapper has a class of menu not an id. You have inserted Wayfinder (I am guessing here) into a UL that you placed there. If you want to do that (which I do) I change the &outerTpl chunk to just have the wrapper [+wf.wrapper+] in it. Otherwise what you are outputting now is
                    <ul id="menu">
                        <ul>
                            <li>...
                        </ul>
                    </ul>
                    


                    Hope this helps.

                    BTW to center the menu on the page you will have to do some tricks as it is not simple to center a left alined menu. You can assign it a fixed width for the #menu and then margin:0 auto;
                      Author of zero books. Formerly of many strange things. Pairs well with meats. Conversations are magical experiences. He's dangerous around code but a markup magician. Blog ✦ Twitter ✦ LinkedIn ✦ GitHub
                      • 9486
                      • 39 Posts
                      Is this where you are seeing the two default css calls? Also, this is where Wayfinder is being placed..

                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                      <base href="[(site_url)]" />
                      <link href="assets/templates/my templates/earthling/styles/default.css" rel="stylesheet" type="text/css" />
                      <meta http-equiv="Content-Type" content="text/html; charset=[(modx_charset)]" />
                      <html xmlns="http://www.w3.org/1999/xhtml">
                      <head>
                      <title>[*pagetitle*] - [(site_name)]</title>
                      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
                      <link href="default.css" rel="stylesheet" type="text/css" />
                      </head>
                      <body>
                      <div id="wrapper">
                      <div id="banner">

                      <img src="assets/templates/my templates/earthling/images/jdmNEW_1440pix.jpg" alt="banner" title="banner" />
                      <ul id="menu">
                      [[Wayfinder? &startId=`0`]]
                      </ul>
                      </div>