Wayfinder Positioning Problem

16 Posts

ahdigital Reply #1, 17 years ago

Hello all,

My first post here, enjoying Modx so far but have run into a problem that’s been driving me up the wall for a few hours now.

I sliced up a design of mine into html and css and it looked fine in both IE and FF. Next, I wanted to make it a template to use in Modx which was going great untill I used Wayfinder. When I use WF the padding on my navigation in FF jumps further down the page than it should, but in IE appears to be correct.

So far the only way I can fix the navigation is by using this css:

* {margin:0;padding:0;}

But this is a pain as it removes margins and padding from all style elements. Is there anything else I can do to fix my navigation? It worked before I removed my static list of links and replaced with the dynamic version.

HTML

<div id="headerDrop">
       <div id="menu">[[Wayfinder? &startId=`0`  &level=`1`]]</div>
</div>

CSS

#headerDrop {
	background-image: url(../images/header-drop.jpg);
	background-repeat: no-repeat;
	width: 950px;
	height: 139px;
	margin: 0 auto;
}
#menu {
	padding-top: 104px;
	width: 836px;
}
#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;
}

Help appreciated,
Thanks

1,390 Posts

kongondo Reply #2, 17 years ago

Hi ahdigital,

First, welcome to MODx!

About your issue, I can assure you that WF does not affect your CSS in that way, apart from outputting markup and CSS classes, such as "active" and "last" for the for the currently selected document, and the last menu item respectively. These can be overridden though. Anyway, back to the issue...

I have a feeling it has to do with CSS specificity (I could be wrong). Instead of

#menu a

..try something like..

#menu li a

or even better

div#menu li a

cheers/k

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

16 Posts

ahdigital Reply #3, 17 years ago

Thanks for the fast reply. I thought it might be my CSS, but wasn’t sure since it worked before I tried WF.

I used your suggestion as above, but unfortunately it didn’t solve my problem.

I hate to clog up the thread but maybe if I post my HTML and CSS it might help to fix. I don’t have a live demo to work from at the moment.

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Homepage – Ah!Digital</title>
<base href="http://localhost/ahdigital/" />
<link href="assets/templates/darkblue/css/main.css" rel="stylesheet" type="text/css" />
<link href="assets/templates/darkblue/css/screen.css" rel="stylesheet" type="text/css" media="screen" />	
	<script type="text/javascript" src="assets/templates/darkblue/js/jquery.js"></script>
	<script type="text/javascript" src="assets/templates/darkblue/js/slider.js"></script>
</head>

<body>

<div id="container">
	
	<div id="header">
    
    	<div style="position:absolute; width:323px; left: 208px;"><img src="assets/templates/darkblue/images/ahdigital-logo.jpg" alt="ah!digital Logo" /></div>
    
    	<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>


        </div>
		<div id="main" class="clearfix">
	
 	<div id="slideContainer">

	<div id="content">

		<div id="slider">
			<ul>				
				<li><a href="#"><img src="assets/templates/darkblue/preview/01.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="#"><img src="assets/templates/darkblue/preview/02.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="#"><img src="assets/templates/darkblue/preview/03.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="#"><img src="assets/templates/darkblue/preview/04.jpg" alt="Css Template Preview" /></a></li>
				<li><a href="#"><img src="assets/templates/darkblue/preview/05.jpg" alt="Css Template Preview" /></a></li>		
			</ul>

		</div>
	</div>

</div>
  
    <div style="padding: 15px 0 15px 0;">

<div id="firstCol"><h2>Hey, Over here!</h2>
<p><strong>Welcome to  Ah!Digital</strong> - This is my personal webspace which includes examples of my 
work. What work you say? Well, I enjoy Website Design, Frontend Development, 
Graphic Design and anything else I can use my favourite application Photoshop 
for!</p>
<p>Stick around, I hope you enjoy what you see. If you’re impressed and would 
like to leave me a mesage please do so.</p>
<p>Have fun!</p></div>    

    <div id="secondCol">
    <h2>Latest Thoughts</h2>
    
<div id="date"> 
<p>Mon</p> 
<p>24/08/09</p>  
</div>
<p id="blogEnt">When was your last project started, finised?</p>
<p>Was there a beginning, middle and end or did your bright idea just become a non-starter? I was thinking yesterday about...</p>

<div id="date"> 
<p>Sat</p> 
<p>22/08/09</p>  
</div>
<p id="blogEnt">10 Enviro-friendly designs</p>
<p>For a while I've really wanted to design an environmental awareness or energy focused website. Whilst browsing through what's out there I thought I'd publish my findings...</p>

</div>

</div>   
    
</div>

</div>

<div id="footer">
  <div id="footWrap">
	<div id="footerLeft">
	  <h3>Favourite Sites</h3>
	</div>
	<div id="footerMiddle">
	<h3>Tool Cloud</h3>
	</div>
	<div id="footerRight">
	<h3>Other Stuff</h3>
	</div>

  </div>
</div>

</body>
</html>

CSS

<!--
/** {margin:0;padding:0;} */

html, body, #container {
	margin: 0px;
	height: 100%;
}
body > #container {
	height: auto;
	min-height: 100%;
	font: 75% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
	background-color: #0b0c0e;
	color: #74838d;
	
}
#main {
	padding-bottom: 166px;
	margin: 0 auto;
	width: 836px;
		margin-bottom: 20px;
}
#footer {
	position: relative;
	margin-top: -166px;
	height: 166px;
	width: 100%;
	clear:both;
	background-image: url(../images/footer-bg.jpg);
	background-repeat: repeat-x;
}
#header {
	background-image: url(../images/header-bg.jpg);
	background-repeat: repeat-x;
	padding-bottom: 15px;

}
#headerDrop {
	background-image: url(../images/header-drop.jpg);
	background-repeat: no-repeat;
	width: 950px;
	height: 139px;
	margin: 0 auto;
}
#menu {
	padding-top: 104px;
	width: 836px;
}
#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;
}
#firstCol {
	float:left;
	width: 45%;
	padding: 10px 10px 20px 0;
}
#secondCol {
	width: 45%;
	float: right;
	padding: 10px 30px 0px 10px;
	background-image: url(../images/tr.jpg);
	background-position: right top;
	background-repeat: no-repeat;
}
h2 {
	font: "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
	color: #0063a5;
	font-size: 1.5em;
}
h3 {
	font: 1em "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
	color: #82aac8;
}
div#date { 
float:left; 
margin: 0 20px 50px 0; 
padding:0; 
background-image: url(../images/calendar.jpg);
background-repeat: no-repeat;
width: 55px;
height: 34px;
}

div#date p { 
margin:0 auto; 
padding:0; 
text-align:center; 
font-size:x-small; 
}
#blogEnt {
	font-weight: bold;
	color: #0064a2;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
#footWrap {
	width:896px;
	margin: 0 auto;
	padding-top: 10px;
}
#footerLeft {
	float:left;
	width:278px;
}
#footerMiddle {
	float:left;
	width:278px;
	margin-left:20px;
}
#footerRight {
	float:left;
	width:278px;
	margin-left:20px;	
}
.clearfix {
	display: inline-block;
}
/* Start hide from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* End hide from IE-mac */
-->

I’d really like to solve this without resetting every margin element to 0px! lol
Thanks

1,390 Posts

kongondo Reply #4, 17 years ago

OK,

Please also post your WF tpl chunks. (just for good measure)

Could there be a clash in the CSS?

Can you confirm the CSS is actually being applied, i.e. are the links correct, etc?

FF and IE versions?

cheers/k

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

16 Posts

ahdigital Reply #5, 17 years ago

Sorry,

What is the ’tpl’ in WF tpl chunks?

Yes, the links are styled how they are meant to be in both browsers and function properly too.

I’m testing in IE 7 and FF 3.5.2.

I’ve uploaded a link to a picture to illustrate the problem http://www.domonline.co.uk/bugs.jpg

Hope this helps.

1,390 Posts

kongondo Reply #6, 17 years ago

Quote from: ahdigital at Sep 05, 2009, 05:58 PM

Sorry, What is the ’tpl’ in WF tpl chunks?

tpl - template chunks.

Have you read up on WF?

Thx for the screens..

cheers/k

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

16 Posts

ahdigital Reply #7, 17 years ago

Oh - Thanks.

This is the chunk I’ve setup for the header and navigation, with the WF snippet within it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=[(modx_charset)]" />
<title>[*pagetitle*] – [(site_name)]</title>
<base href="[(site_url)]" />
<link href="assets/templates/darkblue/css/main.css" rel="stylesheet" type="text/css" />
<link href="assets/templates/darkblue/css/screen.css" rel="stylesheet" type="text/css" media="screen" />	
	<script type="text/javascript" src="assets/templates/darkblue/js/jquery.js"></script>
	<script type="text/javascript" src="assets/templates/darkblue/js/slider.js"></script>
</head>

<body>

<div id="container">
	
	<div id="header">
    
    	<div style="position:absolute; width:323px; left: 208px;"><img src="assets/templates/darkblue/images/ahdigital-logo.jpg" alt="ah!digital Logo" /></div>
    
    	<div id="headerDrop">
       <div id="menu">
[[Wayfinder? &startId=`0`  &level=`1`]]
        </div>
    </div>


        </div>

I’ve only been using Modx for about 7 hours so I’ve not read up on WF much at all. laugh

I kind of stopped at the basics as I don’t have a need (yet) to display child links etc.

Thanks

1,390 Posts

kongondo Reply #8, 17 years ago

Aah, I see..

That’s not the chunk I meant, but never mind...you will get to know snippets tpl chunks as you continue to learn. For now just know WF is using its default tpl chunks to build you menu, i.e. what is constructing the unordered list that is your menu.

Having a look at your CSS now...

btw, just curious why have you mixed inline and external files CSS?

cheers/k

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

1,390 Posts

kongondo Reply #9, 17 years ago

Btw,

I don’t know if QuickEdit is the problem, maybe not...but have you tried viewing the site in FF whilst not logged into the manager?

cheers/k

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

16 Posts

ahdigital Reply #10, 17 years ago

Only mixed inline and external temporarily. Will all be external eventually.

It’s funny you should should mention the logging out thing. Earlier on my javascript wasn’t working, spend ages trying to find out why then logged out and it worked again.. lol

I have tried it again for this problem but no luck.