CSS problem, could anyone help resolve this issue?

MODX Staff
2,502 Posts

Jay Gilmore Reply #21, 18 years, 8 months ago

Use your specificty to make sure you can get rid of the indents for ULs and Lis and not break quickedit.

You should have something like this in your CSS:

.nav ul{
    margin:0;
    padding:0;
}
.nav ul li{
    margin:0;
    padding:0;
    display:inline;
}
.nav ul li a{
    display:inline-block
    height:100%
}

lemme know if you have an updated version of your template to check.

Cheers,

Jay

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

82 Posts

goldeagle Reply #22, 18 years, 8 months ago

Hi Jay,

This is the page using wayfind for the side navigation. http://www.hsnetwork.org/modx/index.php?id=6

As you can see the indent is very much there.

☆ A M B ☆
24,524 Posts

sottwell Reply #23, 18 years, 8 months ago

Try getting rid of the bullets (list-style: none;)

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

82 Posts

goldeagle Reply #24, 18 years, 8 months ago

:(

Nopes. Either im calling this wrong or something else. Ok one sec let me show you how and what is bieng called.

Wayfinder within the template:

<div id="left">
			<div id="fullnav"><h1>Navigation</h1>[!Wayfinder? &startId=`0` &hereClass=`nav`!]
			</div>

The css that is relevant to both the DIV and the class for the wayfinder call:

#left {
	width: 17%;
	float: left;
	background-color: #C7C9B8;
	border-right: 1px solid #BBBEAB;
	border-bottom: 1px solid #BBBEAB;
	color: #4E4F43;
}
/* The links on the left side */
#fullnav a {
	padding-top: 2px;
	padding-bottom: 2px;
	display: block;
	padding-left: 7%;
	border-bottom: 1px solid #BBBEAB;
	border-top: 1px solid #D2D3C6;
	color: #1E2B31;
	text-decoration: none;
}
#fullnav a:hover {
	background-color: #D1D3C3;
}
/* Added to manipulate wayfinder to remove the indents */
.nav ul {
	margin: 0;
}
.nav ul li {
	margin: 0;
	display: inline;
	list-style: none;
}
.nav ul li a {
	padding-top: 2px;
	padding-bottom: 2px;
	display: block;
	padding-left: 7%;
	border-bottom: 1px solid #BBBEAB;
	border-top: 1px solid #D2D3C6;
	color: #1E2B31;
	text-decoration: none;
	display: inline-block;
	height: 100%;
	list-style: none;
}
.nav ul li a:hover {
	background-color: #D1D3C3;
	list-style: none;
}

I know some of this may now counteract each other and some make no sense at all.

MODX Staff
2,502 Posts

Jay Gilmore Reply #25, 18 years, 8 months ago

Susan, I forgot about the list-style:none;. embarrassed

@goldeagle:

With regard to the bullets. You have not placed any styles on the #fullnav ul or #fullnav li in your css file.

If you make #fullnav ul with a list-style:none; you should fix this.

Cheers,

Jay

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

MODX Staff
2,502 Posts

Jay Gilmore Reply #26, 18 years, 8 months ago

Add this to your layout.css:

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

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

82 Posts

goldeagle Reply #27, 18 years, 8 months ago

Hi Jay,

Thats now solved this one

,

Would I be right (and safe) to assume I could infact remove the class I created? Or would removing this bring it back on...

Just looking at removing any unneccesary styles etc.

Many thanks for the help so far, it is helping a lot

Regards

Tom

MODX Staff
2,502 Posts

Jay Gilmore Reply #28, 18 years, 8 months ago

Which class?

You could drop lots of divs and classes all over the place in your markup. One thing I noticed is that it looks like you are using DreamWeaver or somesuch to edit your CSS and it is placing extra/unneccessary properties in your declarations. for the #fullnav rule the list_style:none would replace any other reference to list-style properties here; the others are redundant.

As a rule of thumb if you have a block level element it is not necessary to wrap it in a div unless you need to have a wrapper for background images etc.

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

82 Posts

goldeagle Reply #29, 18 years, 8 months ago

Jay,

I am using Dreamweaver to create and edit the CSS file, however I am writing it directly as apposed to getting DW to write it for me.

There is a lot in it at the moment while trying to get things functional and then it is a case of removing the poarts which as you have said are redundant.

I am already looking at removing the following fromt he CSS file, but am unsure if it is going to create a problem.

.nav ul {
	margin: 0;
}
.nav ul li {
	margin: 0;
	display: inline;
	list-style: none;
}
.nav ul li a {
	padding-top: 2px;
	padding-bottom: 2px;
	display: block;
	padding-left: 7%;
	border-bottom: 1px solid #BBBEAB;
	border-top: 1px solid #D2D3C6;
	color: #1E2B31;
	text-decoration: none;
	display: inline-block;
	height: 100%;
	list-style: none;
}
.nav ul li a:hover {
	background-color: #D1D3C3;
	list-style: none;
}

I will have to keep the following though due to the way I do add some things to the site and will carry on to add things to the site.

#fullnav a {
	padding-top: 2px;
	padding-bottom: 2px;
	display: block;
	padding-left: 7%;
	border-bottom: 1px solid #BBBEAB;
	border-top: 1px solid #D2D3C6;
	color: #1E2B31;
	text-decoration: none;
}
#fullnav a:hover {
	background-color: #D1D3C3;
}
#fullnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

Going on what we have just done above I am assuming that I could use the same principle to create a horizontal menu?

Something like err;

#topnav ul {
list-style: none;
margin: 0
padding-left: 0
padding-right : 50px;
align: right;
}
#topnav li {
color: #777777
display: block;
float: right;
}
#topnav li a {
text-decoration: none;
padding-left: 5px;
padding-right: 5px;
}
#topnav li a:hover {
text-decoration: underline;
color: #ffffff;
}
#topnav li a.current {
color: #ffffff;
}

Or am I wrong ?

MODX Staff
2,502 Posts

Jay Gilmore Reply #30, 18 years, 8 months ago

Looks good. For your horizontal menu you should try the following:

#topnav ul {
list-style: none;
margin: 0;
padding: 0 50px 0 0;
text-align: right;
}
#topnav li {
color: #777;
display: inline;
}
#topnav li a {
text-decoration: none;
padding: 0 5px 0 5px;
display:inline-block;
}
#topnav li a:hover {
text-decoration: underline;
color: #fff;
}
#topnav li a.current {
color: #fff;
}

What I changed was to have the li as displayed inline. There is no property "align" so I changed this to text-align and finally in order to ensure cross-browser compatibility when you place an a inside an li and you want to be able to control the dimensions you need to use the property inline-block.

I also made some optimizations to the css and made sure that your semi-colons are at the ends of each line.

There may be some little tweaks to do here and there and I always have to test this stuff myself as sometimes I forget a property here and there.

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