Hello everybody!
I guess this has been asked quite some times ( have read some) but i have a quick question.
I have been asked to set up a easy managed website and i therefore closed modx.
I have been playing around and got a result i am happy with on the design from even tho i am not a designer.
The only problem i am having is the menu. Its how i want it, but acts a little different than expected and was hoping some one here can se a css/html error i have made.
I have read the wayfinder wiki, but didn’t have enough time to really read it good so don’t kill me!
CSS:
#menu {
background: #333;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
}
#menu li {
float: left;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#menu a {
background: #333 url("assets/images/seperator.gif") bottom right no-repeat;
color: #ccc;
display: block;
float: left;
margin: 0;
padding: 8px 12px;
text-decoration: none;
}
#menu a:hover {
background: #2580a2 url("assets/images/hover.gif") bottom center no-repeat;
color: #fff;
padding-bottom: 8px;
}
.submenu {
list-style-type:none;
display: block;
position:static;
/* TESTING */
}
HTML:
<div id="menu-containe">
<ul id="menu"><li><a href="http://xxxxxxxxx.no/" title="Hovedside" >Hovedside</a></li>
<li><a href="/innlogging" title="Innlogging" >Innlogging</a></li>
<li><a href="/forretningside" title="Forretningside">Forretningside<!--[if IE 7]><!--></a><!--<![endif]-->
<ul class="submenu"><li>
</li></ul>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="/virksomhetsomraade" title="Virksomhetsområde">Virksomhetsområde<!--[if IE 7]><!--></a><!--<![endif]-->
<ul class="submenu"><li>
</li></ul>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li><a class="active" href="/mineraler" title="Mineraler">Mineraler<!--[if IE 7]><!--></a><!--<![endif]-->
<ul class="submenu"><li>
<ul id="menu"><li><a href="/feltspatt" title="Feltspatt" >Feltspatt</a></li>
<li><a href="/internasjonal-produksjon" title="Internasjonal Produksjon" >Internasjonal Produksjon</a></li>
<li class="last"><a href="/kvarts" title="Kvarts" >Kvarts</a></li>
</ul>
</li></ul>
<!--[if lte IE 6]></a><![endif]-->
</li>
</div>
Wayfinder code:
[[Wayfinder? &startId=`0` &level=`5` &outerTpl=`wfOuter` &parentRowTpl=`parentRow` &hideSubMenus=`TRUE`]]
wfOuter code:
<ul id="menu"[+wf.classes+]>[+wf.wrapper+]</ul>
ParentRowTpl code:
<li><a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]<!--[if IE 7]><!--></a><!--<![endif]-->
<ul class="submenu"><li>
[+wf.wrapper+]
</li></ul>
<!--[if lte IE 6]></a><![endif]-->
</li>
As i said everything is working perfectly, but when i click a link that have subpages it moves the main links.
Here are some images:
Without anything clicked (main page)
And when i click a link, the page refresh with the new content and the subpages shows. Just as i wanted, but the main links is beeing moved a little to the right. How can i stop that?
I apreasiate any answer, and have to say, i am not a design html/css main, but tries my best to get something that can be displayed.
If i am missing any information that could be helpfull, please let me know!.
And again, thanks for ModX. Simply the best.
Audun
☆ A M B ☆
