kaseytraeger Posted April 1, 2004 Posted April 1, 2004 Hi everyone, I'm trying to implement a horizontal menu at the foot of my pages using an unordered list. I'd like this horizontal menu to be perfectly centered within its content <div>. The sample page in question is a contact / email page located at http://www.kaseyscreations.com/villagepant...t-contactus.htm. If you scroll down to the bottom of the page, you will see two horizontal navigation menus containing the following links: [ Home ] [ Our Menu ] [ Directions ] [ Our Customers ] [ Contact Us ] The first menu was coded without using an unordered list and is perfectly centered within the content pane. It uses non-breaking spaces to set empty space between each menu item. Here is the code for that menu. ><div class="text_8pt centered"> [ <a href="test-index.htm" title="Home">Home</a> ] [ <a href="test-menu_breakfast.htm" title="Our Menu">Our Menu</a> ] [ <a href="test-directions.htm" title="Directions">Directions</a> ] [ <a href="test-customers.htm" title="Our Customers">Our Customers</a> ] [ <a href="test-contactus.htm" title="Contact Us">Contact Us</a> ]</div> The second menu is coded using an unordered list. I have used the CSS property of padding-right:15px on all but the last menu item to create visual empty space between each menu item. You will notice that this menu is shifted to the right and is not perfectly centered as is the menu above. Here is the code for that menu. ><div class="text_8pt centered"> <ul> <li style="list-style:none; display:inline; padding-right:15px;">[ <a href="test-index.htm" alt="Home">Home</a> ]</li> <li style="list-style:none; display:inline; padding-right:15px;">[ <a href="test-menu_breakfast.htm" alt="Our Menu">Our Menu</a> ]</li> <li style="list-style:none; display:inline; padding-right:15px;">[ <a href="test-directions.htm" alt="Directions">Directions</a> ]</li> <li style="list-style:none; display:inline; padding-right:15px;">[ <a href="test-customers.htm" alt="Our Customers">Our Customers</a> ]</li> <li style="list-style:none; display:inline; padding-right:0;">[ <a href="test-contactus.htm" alt="Contact Us">Contact Us</a> ]</li> </ul> </div> Has anyone experienced this before? What do I need to do to properly center the unordered menu? Please feel free to download the page's XHTML and CSS code, graphics, etc. and play around with it. I'd really like to use the unordered list because it conveys meaning of being, well, a list. The first menu, while it centers itself correctly, does not convey the meaning that it is a cohesive list of links. Thanks everyone! Quote
!!blue Posted April 1, 2004 Posted April 1, 2004 This link might help you: http*//css.maxdesign.com.au/listamatic/ (just swap out the '*' for a ':') and scroll down a bit to Horizontal Lists. They provide you a sample of how the list shows up and the HTML and CSS code. Hope that helps I know I've been to this site many o' times!! later, !!blue Quote
kaseytraeger Posted April 1, 2004 Author Posted April 1, 2004 Hi !!blue, Thanks for the link suggestion. That Listamatic tutorial web site was where I got the original idea for creating menus using lists. I just re-checked my code in comparison to what's offered on that web site, and if you look at the first tutorial "A Simple Horizontal List", my code is almost identical, except that I've used inline CSS instead of imported/linked CSS sheets or placing CSS between <style> and </style> in the <head> of the document. I looked at another list called "Centered List Navbar" and tested it on duplicate page. But still, the page will not center. I know something strange is going on. The containing <div> has been declared to have a 20px padding on the left. OK, so I adjusted for that by trying this as inline style for the <ul>: >style="position:relative; left:-20px; ... " This bit of code properly shifted the entire <ul> (I used a background color so I could see when the line containing the <ul> moved relative to it's container). For some reason, however, the actual list items were still shifted slightly to the right. I know the key is to figure out what's interacting with this <ul> so I can get it to center properly. It's all very strange. Quote
!!blue Posted April 1, 2004 Posted April 1, 2004 I added a class to your footer links (I downloaded ur CSS & HTML codes): ul#footerlinks {padding-top: 15px; margin: 0;} ul#footerlinks li{list-style: none; display: inline; padding: 4px; margin: 0;} and the list became: <ul id="footerlinks"> <li>[ <a href="test-index.htm" alt="Home">Home</a> ]</li> <li>[ <a href="test-menu_breakfast.htm" alt="Our Menu">Our Menu</a> ]</li> <li>[ <a href="test-directions.htm" alt="Directions">Directions</a> ]</li> <li>[ <a href="test-customers.htm" alt="Our Customers">Our Customers</a> ]</li> <li>[ <a href="test-contactus.htm" alt="Contact Us">Contact Us</a> ]</li> </ul> try something to that effect.... your idea about "something interferring with the UL" gave me the idea to force fix the UL. Padding on top to move it down a bit and a margin of 0 (usually padding:0 and margin:0 cleans it out a bit) and the same thing for all the LI's at once. hope that helps, !!blue Quote
kaseytraeger Posted April 1, 2004 Author Posted April 1, 2004 !!blue, I finally got it to work. It turns out that I needed to not only specify that the left padding was -20px (to accomodate for the padding in the container div), but I also needed to modify the styling of the very last link from padding-right:0px to padding-right:15px. Your suggested code for ul#footerlinks li{...} got me to thinking about the padding on each <li>, and I decided to try making the padding on each <li> the same. Now it works like a charm! Thanks! Quote
kaseytraeger Posted April 1, 2004 Author Posted April 1, 2004 OK ... another glitch... If I include the CSS styling within <head> and </head> of the page, it works fine. But as soon as I include it in my css file called test-base_style.css using a call to the file of: ><link rel="stylesheet" href="test-base_style.css" type="text/css" /> It no longer works. Instead, it lines them all up as a bulleted vertical navigation list instead of a non-bulleted horizontal navigation list. But ... it's still centered! Weird. Any thoughts? Since this piece of code will be included on all pages of the web site, I'd like to have it in a global CSS file instead of individually coded on each page. Quote
!!blue Posted April 2, 2004 Posted April 2, 2004 When u put CSS code in the head tags it's called "inline styles" and those overwrite any "linked styles" u may have. So.... now that u moved the inline styes to the linked styles...hm... something must be conflicting. Check that you have styles only for: html tags (UL, LI, H1, P, etc..); classes (.list, .header, .graytext, etc..); and ids (#container, #leftnav, #footer) only. Otherwise you may have something conflicting like two styles for the same thing. Otherwise I'm at a losss hopefully that helps, !!blue Quote
kaseytraeger Posted April 6, 2004 Author Posted April 6, 2004 Hey !!blue, I guess I was having computer problems the day I tried to move the CSS code from the <head> of my document into my global CSS file. I tried it the other day, and it seems to be working just fine. I'm going to keep my fingers crossed for now!!! Thanks for all your help! Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.