Wayfinder Positioning Problem

1,390 Posts

kongondo Reply #21, 17 years ago

Quote from: ahdigital at Sep 05, 2009, 06:50 PM

I’m starting to think maybe scrap my css menu styling and start again.. lol I just can’t see what’s wrong.

The dynamic menu source is:

    <div id="headerDrop">
    <div id="menu">
<ul><li class="active"><a href="http://localhost/ahdigital/" title="Homepage" >Homepage</a></li>
<li class="last"><a href="/ahdigital/index.php?id=2" title="About" >About</a></li>
</ul>
    </div>
    </div>

And the static was this:

    	<div id="headerDrop">
                    <ul id="menu"> 
                    <li><a href="#" title="Homepage">Homepage</a></li>
                    <li><a href="#" title="About">About</a></li>
                    </ul>   
        </div>
    
        </div>

Does that help?

is that a typo? There is a missing <div> in the static code..Then the id ="menu" for ul in static and in the dynamic one it is for the div..
cheers/k

Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

16 Posts

ahdigital Reply #22, 17 years ago

Yeah, sorry. My mistake.

2,877 Posts

mrhaw Reply #23, 17 years ago

You have a <ul id="menu"> and a <div id="menu"> !!

//As kongondo beat me pointing out! laugh

@hawproductions | http://mrhaw.com/

Infograph: MODX Advanced Install in 7 steps:
http://forums.modx.com/thread/96954/infograph-modx-advanced-install-in-7-steps

Recap: Portland, OR (PDX) MODX CMS Meetup, Oct 6, 2015. US Bancorp Tower
http://mrhaw.com/modx_portland_oregon_pdx_modx_cms_meetup_oct_2015_us_bancorp_tower

1,390 Posts

kongondo Reply #24, 17 years ago

Quote from: mrhaw at Sep 05, 2009, 07:00 PM

You have a <ul id="menu"> and a <div id="menu"> !!

//As kongondo beat me pointing out!

Though the CSS is not specific (it’s just #menu)...so it shouldn’t be a problem?

cheers/k

Wayfinder Lessons: The (almost) Complete Guide to Creating Menus in MODx Using Wayfinder

16 Posts

ahdigital Reply #25, 17 years ago

Your right it shouldn’t be and I’ve just rewritten the menu css which now works in both! Appears to be a margin issue.

Old menu CSS:

#menu {
	padding-top: 104px;
}
#menu li {
	float: left;
	list-style: none;
}
#menu a {
	color: #ccc;
	display: block;
	float: left;
	padding: 8px 12px 0 0;
	text-decoration: none;
}
#menu a:hover {
	background: url("../images/menu-hover.jpg") bottom center no-repeat;
	color: #fff;
	padding-bottom: 8px;
}

New menu CSS:

#menu {
	padding-top: 104px;
	width : 836px;
}
#menu ul {
	float : left;
	width : 836px;
	padding-left : 0;
	margin: 0;
	color : #fff;
}
#menu ul li {
	display : inline;
}
#menu ul li a {
	color: #ccc;
	display: block;
	float: left;
	padding: 8px 12px 0 0;
	text-decoration: none;
}
#menu ul li a:hover {
	background: url("../images/menu-hover.jpg") bottom center no-repeat;
	color: #fff;
	padding-bottom: 8px;
}

Thanks for help guys,
Think I need to go sleep now! lol

I’m sure I’ll be back with more questions soon.
Thanks again.