CSS problem, could anyone help resolve this issue?

82 Posts

goldeagle Reply #1, 18 years, 8 months ago

Hello all.

I am currently turning a table site into a tabless site for a friend so it would be easier to use MODx (and fewer headaches).

So far I have encounterd a few problems, such as the div not adjusting its height tot he height of the background image.
The other biggest problem I have however is that the within the nav bar I have a background image with repeat-x. I then have some css so that when the link is active it displays an alternative image. The problem is however that it does not sad

Here is what it all looks like...

<div id="nav"> [[MenuHori?id=0]] </div>

Oh I forgot to mention that MenuHori is something I have adapted from etomite to work in MODx as it is for me simple and easy, but effective.

Ok and the CSS is...

/* Main Navigation Menu, uses images as backgrounds */
#nav {
	height: 50px;
	background: #fff url(./images/menu-bg.gif) repeat-x top left;
	text-align: left;
	padding-left: 20px;
	padding-bottom: 3px;
	padding-top: 10px;
}
#nav a img {
	border: none;
}
#nav a {
	color: #777777;
	text-decoration: none;
}
#nav a:visited {
	color: #777777;
	text-decoration: none;
}
#nav a:hover {
	color: #000000;
	text-decoration: underline;
}
#nav a:active {
	color: #ffffff;
	background: #fff url(./images/current-bg.gif) repeat-x top left;
}

Does anyone have any ideas?

Many thanks,

Tom.

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 18 years, 8 months ago

What do you mean by "active"? Is this a class that is set on a link for where you are? Or do you mean that it’s active while it’s being clicked?

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 #3, 18 years, 8 months ago

well as im using div’s im using div id’s hence the #nav

but I didnt realise I am meant to use a class to make it work.

Basically what I want is so that when on that page that horizontal link has a different image to the rest of the navigation bar. So a user can tell easily what page they are on.

Regards,

Tom.

☆ A M B ☆
24,524 Posts

sottwell Reply #4, 18 years, 8 months ago

That means your menu generating snippet needs to add a class to the container and /or the link if its ID is the same as the current document. Then you style that class accordingly.

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

4,205 Posts

dev_cw Reply #5, 18 years, 8 months ago

What is the output of the snippet? How does it identify the active document?

Wayfinder by default (can be customized) will add a class of active to the <li> which you can then style it accordingly.

[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]

MODX Staff
2,502 Posts

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

First, I would seriously look at Wayfinder for a menu solution. It is dynamic and very customizable.

Second, a div or any block element will never stretch to accommodate a background image. If you want to size a block element to a particular size you need give it a width and height in your stylesheet.

Finally, this whole thing would be easier to debug if you could post the output HTML from the snippet you are using for the menu and possibly a screen cap of the page result.

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 #7, 18 years, 8 months ago

Thanks all for your responses.

I think the best thing would be to include a URL for you, this way you get to see the output yourself and then view source.

http://www.hsnetwork.org/modx/index.php?id=5

The way an active link ought to look should be like in the link below

http://www.sdcromwell.co.uk/

It is only active on that page as I am also currently busy moving my own site over to MODx and am having to adapt things.

I do realise wayfinder is very adaptive, and I am going to makes steps towards learning how to use it, but this at the moment has to wait until I have completed my current tasks.

If I remember rightly wayfinder can be set to display horizontally?

Regards,

Tom.

2,204 Posts

Dimmy Reply #8, 18 years, 8 months ago

try using this config file I posted yesterday:

http://modxcms.com/forums/index.php/topic,21788.0.html

just call wayfinder like this when you copied the files.
[!Wayfinder? &config=`cssplay_skeleton_dropdown` &startId=`0`!]

Dimmy

follow me on twitter: @dimmy01

4,205 Posts

dev_cw Reply #9, 18 years, 8 months ago

I see one problem off the bat, the menu does not assign an active state to the current page.

If you look at the working example the menu is an unordered list (in a table) and the current page has a class of ’current’:

<ul id='menu'>
<li ><a class='current' href='#'>Home</a></li>

<li ><a href='#'>About</a></li>
<li ><a href='#'>Web Hosting</a></li>
<li ><a href='#'>Reseller Hosting</a></li>
<li ><a href='#'>Support</a></li>
<li ><a href='#'>Contact</a></li>
</ul>

However in your not working version the navigation is just a string of links with pipe dividers and no assigned classes to define the state.

<div id="nav"><a href='index.php?id=1'>Ha ha</a>  |  <a href='index.php?id=2'>example</a>  |  <a href='index.php?id=3'>Speedtest</a>  |  <a href='index.php?id=4'>Search this site</a>  |  <a href='index.php?id=5'>EasyServe</a></div>

These are very different approaches. You can make it work as a string of links but you need to have a class or ID assigned to the active page to have it styled correctly. However you would be better off using an unordered list. This is a breeze in Wayfinder.

[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]

82 Posts

goldeagle Reply #10, 18 years, 8 months ago

dev_cw,

The output string that you see when looking at the source is manufactured by the following snippet

// --Config:--
// Insert what you would like to appear between
// the links in the " " below.

$seperator="  |  ";

// --End Config--

$children = $modx->getActiveChildren($id); $menu = ""; $childrenCount = count($children);
if($children==false) {
    return false;
}

for($x=0; $x<$childrenCount; $x++) {

//If its the last link/document, we don't want the seperator after it. (Thanks Alex)
	if($x==($childrenCount-1)){ 

$menu .= "<a href='[~".$children[$x]['id']."~]'>".$children[$x]['pagetitle']."</a>";

	} else {

$menu .= "<a href='[~".$children[$x]['id']."~]'>".$children[$x]['pagetitle']."</a>$seperator";
	
	}
}

return $menu;

The problem with the unordered list is that on the original site (sdcromwell.co.uk) it causes the quickedit menu to go mental and simple display as a list of links above the site when logged into the manager.