Wayfinder line breaks

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;
}

1. Change

<ul id=”menu”>

to

<ul id="menu">

Different quotes

2. Add to the css

#menu ul li {
display:inline;
}

Excuse my stupidity where are do you see <ul id=”menu”>?

In the CSS?

When I inspect the element using Firebug, I see this

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

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

In your styling for "ul" add the line
display:inline
(credit cipa for these thoughts...)
MattC

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.

I got it thank you, thank you, thank you! This community rocks! One last question

How would I center the menu on the page?

Thanks again Modx is the best.

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


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;

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>