...

View Full Version : List-based navigation menu



aliceinwonderla
01-12-2010, 01:30 PM
My list-based navigation menu adds a new link to the right of the group for every list element/link I add.

eg.

<ul>
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3</li>
<ul>

becomes


LINK 1 - LINK 2 - LINK 3

Great! But I want these links centrally aligned to the page. The css for this menu is by default:



#Menu {
background:transparent none repeat scroll 0 0;
border-bottom:1px solid #CCCCCC;
clear:both;
display:inline;
float:left;
height:40px;
position:relative;
width:980px;
z-index:1;


I've tried putting the list html into a centrally aligned div to no success... it just sits left-aligned. When I take the float:left; out it stacks the links one on top of the other like a list traditionally does.

What do I need to alter to get it to sit in the middle? I don't want to use a position because I'd have to change it every time I added a new link.

abduraooft
01-12-2010, 01:35 PM
When I take the float:left; out it stacks the links one on top of the other like a list traditionally does.
Is that your actual code? I don't see any relation from that HTML to CSS.

aliceinwonderla
01-12-2010, 02:12 PM
Is that your actual code? I don't see any relation from that HTML to CSS.

LOL no, that's just an example.

The code is much more complicated because it's part of a template from a shopping cart system I am working with.

Basically the code is this:



<div id="Menu" align="center">
<ul>
<li class="First %%GLOBAL_ActivePageHomeClass%%"><a href="%%GLOBAL_ShopPathNormal%%/"><span>%%LNG_MainPage%%</span></a></li>
%%SNIPPET_PageMenu%%
</ul>
</div>


I'm sure you're aware that the %%_%% codes reference other pieces of code, but those codes aren't relevant to the alignment of the menu.

abduraooft
01-12-2010, 02:14 PM
One way to center them is

#Menu ul{
text-align:center;
}
#Menu ul li{
display:inline;
}

aliceinwonderla
01-12-2010, 02:45 PM
Ugh bugger. I delved into the style sheet (I copied/pasted from Firebug in the OP) and found MUCH more CSS for this Menu.


#Menu {
clear: both;
float: left;
width: 980px;
height: 40px;
display: inline;
position: relative;
z-index: 1;
}

#Menu ul {
margin: 0;
padding: 0;
text-align:center;
}

#Menu li {
float: left;
position: relative;
list-style: none;
margin: 0;
padding: 0;
}

#Menu li.First {
}

#Menu li a {
display: block;
float: left;
font-size: 1em;
text-decoration: none;
padding: 7px 10px 4px 20px;
height: 20px;
}

#Menu li a:hover {
text-decoration: none;
}

#Menu li ul {
width: auto;
position: absolute;
clear: left;
top: 30px;
left: 10px;
display: inline;
text-align: left;
font-size: 0.85em;
background: transparent;
z-index: 10;
}

#Menu li ul li {
clear: both;
text-align: left;
background: transparent;
}

#Menu li ul li a {
padding: 5px 10px 5px 10px;
font-size: 1em;
text-align: left;
margin: 0;
width: 120px;
height: auto;
}

#Menu li ul li a:hover {
}

#Menu li:hover a, #Menu li.over a{
text-decoration: none;
}

#Menu li ul li a, #Menu li.over li a {
text-decoration: none !important;
}

#Menu li:hover ul, #Menu li.over ul {
display: block;
}


I added the centre and inline into where you said but it hasn't helped; probably because some of this other css is preventing it?

Facepalm.

abduraooft
01-12-2010, 03:52 PM
#Menu li ul {
width: auto;
position: absolute;
clear: left;......... Now, this is a very different story! Post the generated html code(taken from browser's view source option) too Or a link to your page would be much better.

aliceinwonderla
01-13-2010, 02:51 AM
Mmm could I PM you the link? It's a semi-live environment so I'm just a bit cautious about posting it publicly.

Thanks! xo

brightyoursite
01-13-2010, 05:21 AM
oh you make it more and more complex.u just want to make the menu section(not the links ) center right ?
#menu
{
margin:0px auto;
}
thats will work.
if u still dont understand follow http://www.brightyoursite.com/blog/2009/11/20/how-to-code-a-w3c-valid-2-columns-xhtml-layout/
this u will know how make a div centered like a fixed with layout

aliceinwonderla
01-13-2010, 05:31 AM
Hi brightyoursite, this did not work unfortunately. The site is pretty complicated because it's template driven, with bits of code embedded in other bits of code embedded in other bits of code. :(

bazz
01-13-2010, 05:49 AM
I can't help without access to your page but, picking up on something you said in the first post, I think; if you are going to keep adding things to your nav menu, you may run out of horizontal space. Might be better to redesign now, with a vertical nav menu?

hth

bazz

aliceinwonderla
01-13-2010, 05:51 AM
Fair query! No I doubt I will add many more things, the font is quite small, I may only add one or two extra links in the future if I need to. There is still a fair amount of room for a few extras if I need them.

I am happy to show someone the page if they think they can help, let me know and I will PM you the site (which is currently live but in development).

bazz
01-13-2010, 05:54 AM
just about to go to bed but pm me and I'll look tomorrow.

bazz

abduraooft
01-13-2010, 08:08 AM
I am happy to show someone the page if they think they can help, let me know and I will PM you the site (which is currently live but in development). Why don't you just signup at a free host like freehostia.com and post a sample of your code there?

aliceinwonderla
01-14-2010, 02:02 AM
Why don't you just signup at a free host like freehostia.com and post a sample of your code there?

I can't it's part of a shopping cart package and I'd need to get a new development license and have someone install the software. I am happy to show someone, if I could PM them a link, the problem is that the cart is active, I've tried to turn it off but it's still possible to process sales. This wouldn't be a problem except this is in the development area and it could encourage database errors as the real cart and development cart are partially feeding off the same database. Some changes in one effects the other and some don't.

bazz
01-14-2010, 10:12 AM
I've tried to turn it off but it's still possible to process sales. This wouldn't be a problem except this is in the development area and it could encourage database errors as the real cart and development cart are partially feeding off the same database. Some changes in one effects the other and some don't.

Sounds like you have more important stuff to deal with than just the centering of your nav list. :eek: The public should never have access to uour development server/codes.

OK, I got your pm and I have responded with a solution.

bazz

abduraooft
01-14-2010, 10:20 AM
Why don't you just signup at a free host like freehostia.com and post a sample of your code there?


I can't it's part of a shopping cart package and I'd need to get a new development license and have someone install the software. I am happy to show someone, if I could PM them a link, the problem is that the cart is active, I've tried to turn it off but it's still possible to process sales. This wouldn't be a problem except this is in the development area and it could encourage database errors as the real cart and development cart are partially feeding off the same database. Some changes in one effects the other and some don't.
Again, I said about posting a sample of your code which contains the relevant HTML+CSS+ images(if any) ONLY and not the entire CMS or any other stuff. You may rename your links and other things to keep the privacy. Help us to help you. (Please keep this in mind for any future queries)

Hope, bazz's solution would be enough.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum