oy...more confusion with Wayfinder

70 Posts

silverman63 Reply #1, 19 years ago

Ok, I started on a new template/design I want to use for another site, and this time I made it with a vertical menu (since I’m still having trouble with the horizontal). I don’t get what I’m doing wrong! For some reason my floats aren’t working right either...

html, body { 
	font-size: 12px; 
	font-family: Verdana, sans-serif; 
	background-image: url(images/bg.png);
	margin: 0px;
	text-align: center;
} 
h1, h2, h3, h4, h5, h6, h7 {
	font-family: Verdana, sans-serif;
}
p { 
	font-size: 1em; /* 12px */ 
	line-height: 1.5em; /* 18px */ 
	margin: 0 0 1.5em 0;
	}
#container {
	width: 700px;
	background-color: #FFFFFF;
	min-height: 100%;
	border: 3px solid #cccccc;
	position: relative;
	margin:auto;
}
.navigation ul {
         color: white; }
#banner {
	background-image: url(images/onr_02.gif);
	width: inherit;
	height: 99px;
}
#side {
	width: 164px;
        max-width: 164px;
	min-height: 100%;
	background-color: #669999;
	border: 1px solid #999999;
	float: left;
	}
.side { width: 164px; height: 100%; }
.sidebar {
	width: 164px;
	height: 20px;
	max-height: 20px; 
	background-image: url(images/onr_06.gif);
	border-bottom: 1px solid #999999;
	vertical-align: text-bottom;
	float: left;
	text-align: center;
}
a.navigation: link {
	color: White;
	text-decoration: none;
}
#navigation { width: 164px; max-width:164px; text-align: left; max-width: 164px; margin-top: 5px; }
#navigation ul {
   display: block;
}
p.sidebar {
	color: White;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1667em; /* 14px */
	font-weight: bold;
}
#mainbar {
	width: 532px;
	background-image: url(images/image_08.gif);
	height: 20px;
	border: 1px solid #999999;
	margin-bottom: 3px;
}
.mainbar {
	border: 1px solid #999999;
}
#content {
	width: 533px;
	height: inherit;
	margin-left: 10px;
        float: right;
}
#footer {
	font-size: 8px;
	clear: both;
	text-align: center;
}

Reg. wavefinder call:

<body><div id="container"><div id="banner"></div><div id="side" class="side"><div class="sidebar"><p class="sidebar">Navigation</p></div><div id="navigation" class="navigation">[!Wayfinder?startId=`0` &level=`1`!]</div></div><div id="content"><div id="mainbar"></div><center><h2>[*longtitle*]</h2><p></p>[*content*]</center></div><div id="footer"><h6>© 2007 Alex Silverman and the Ohio Northern Region</h6></div></div></body>

MODX Staff
1,535 Posts

Garry Nutting Reply #2, 19 years ago

Pretty difficult to tell by just looking at the CSS.

Could do with providing more information like the wayfinder call you’re using and an example of a rendered page to place the CSS in context (or at least how the wayfinder call is rendered in relation to the other content on the page).

Garry Nutting
Senior Developer
MODX, LLC

Email: [email protected]
Twitter: @garryn
Web: modx.com

70 Posts

silverman63 Reply #3, 19 years ago

K. Added html, and its at bsn70.com/modx

MODX Staff
1,535 Posts

Garry Nutting Reply #4, 19 years ago

Okay, for the floats, try this:

1. Add ’clear:left;’ to #navigation - this will stop the first navigation item appearing to the right of the navigation heading.
2. Remove the ’margin-left:10px;’ from #content as that’s preventing the content area from floating up to the right.

Hope that helps,
Garry

Garry Nutting
Senior Developer
MODX, LLC

Email: [email protected]
Twitter: @garryn
Web: modx.com

4,205 Posts

dev_cw Reply #5, 19 years ago

a.navigation: link {
	color: White;
	text-decoration: none;
}
#navigation { width: 164px; max-width:164px; text-align: left; max-width: 164px; margin-top: 5px; }
#navigation ul {
   display: block;
}

I don’t understand why you have some navigation as ID (#) and others as class (.)

This: a.navigation: link should be .navigation a:link

Regarding the floats, the most common problem is related to the need of a correct ’clear’ statement.

I hate to say it, but your code is a mess and a bit more complicated than is needed.
I recommend some reading at http://www.htmldog.com/ and becoming more familiar with styling lists which are the cornerstone for CSS navigation. I learned by taking apart list menus built using the List-o-Matic wizard: http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/

and also dissecting menus at CSSPlay: http://www.cssplay.co.uk/menus/

Hope this helps grin

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

70 Posts

silverman63 Reply #6, 19 years ago

Thanks for the tips guys! I’m bout to do em.

Quote from: dev_cw at Oct 17, 2007, 06:35 PM

Regarding the floats, the most common problem is related to the need of a correct ’clear’ statement.

I hate to say it, but your code is a mess and a bit more complicated than is needed.
I recommend some reading at http://www.htmldog.com/ and becoming more familiar with styling lists which are the cornerstone for CSS navigation. I learned by taking apart list menus built using the List-o-Matic wizard: http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/

and also dissecting menus at CSSPlay: http://www.cssplay.co.uk/menus/

Hope this helps

yep - that’s me. One of my many probs is that I just sorta go with the flow, and keep on adding css till it works... laugh

70 Posts

silverman63 Reply #7, 19 years ago

Two last things: if you look at the page, it’s still not extending all the way... I’ve given no definite heights, cept for the two separator bar things (bad wording I know). I’ve told the container to go to 100% height...I’ve given the sidebar 100%...

Any ideas?

4,205 Posts

dev_cw Reply #8, 19 years ago

100% height should work in theory, but CSS has a hard time with this. You need to work around the problems with css to achieve this. Take a look at this example page, it has a good explanaition for one method to get this working:

http://www.xs4all.nl/~peterned/examples/csslayout1.html

Make sure to look at the css that makes it work.

In your site you can set a height to the #content, you have it as inherit, change that to a measurement like 400px:

#content {
	width: 533px;
	height: 400px;
	margin-left: 10px;
        float: right;
}

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

70 Posts

silverman63 Reply #9, 18 years, 11 months ago

Hey, sorry bout postin again. But one last problemo. When I have my sidebar div/class set to 100% height, it goes outside of the main container for everything (wtf?) in both IE and FF. Not on bsn70.com/modx, i changed the heights to inherit and FF still messes up. IE messes up now in a diff way, not making the box go all the way down (really I can still work with that).

☆ A M B ☆
24,524 Posts

sottwell Reply #10, 18 years, 11 months ago

That is one issue that designers have with CSS, it doesn’t handle height very well. 100% ... of what? There is javascript that can do that, but CSS just doesn’t do it very well. Take a look at the different ways of having all columns be of the same height. There’s faux columns, there’s a very kludgy way described here. Sometimes you just have to compromise on your design; the web is not yet able to completely mimic print layouts.

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