Solved

css horizontal menu - equally spacing menu items and right edge alignment

Posted on 2009-07-15
8
786 Views
Last Modified: 2012-05-07
I am using a list for a menu, and I need  all <li> items equally spaced withing given container. Plus the last item of menu (contact) should be aligned against the right edge of container.  So the last letter of the last word is actually touching the right edge.
I tried to do float and use padding, but it is obviously not what i need.

Thank you,

Stacy
0
Comment
Question by:ctasik
  • 4
  • 3
8 Comments
 
LVL 14

Expert Comment

by:flob9
ID: 24863459
Please, provide a sample of the html page.
0
 

Author Comment

by:ctasik
ID: 24863524
<div id="header">
    <h1>portfolio</h1>
             
    <ul>
   
    <li><a href="index.htm" class="current">HOME</a></li>
    <li><a href="curr_act.htm">CURRENT ACTIVITIES</a></li>
    <li><a href="gallery.htm">GALLERY</a></li>
    <li><a href="theatre.htm">THEATRE</a></li>
    <li><a href="teaching.htm">TEACHING</a></li>
    <li><a href="contact.htm" class="last">CONTACT</a></li>
         
    </ul>
  </div> <!--header-->


css
------------------------------------------
#header ul {
      margin: 0;
      padding: 0;
      list-style: none;
      position: absolute;
      bottom: 0px;
      width:700px;
      font-size: 1.1em;
      right: 0px;
            }
      
#header li {
      float: left;
      }
      
#header li a:link, #header li a:visited {
      display:block;
      background: #FFFFFF;
      padding: .2em 0em;
      text-decoration: none;
      color:#000000;
      /*margin-right: .5em*/
      margin-left:20px;
      font-family: Arial, Helvetica, sans-serif;
      }            

      
#header li a:hover, #header li a:active {
      color:#666666;
      background:#FFFFFF;
            }
      
#header li a.current, #header li a.current:hover, #header li a.current:active {
      color:#666666;
      background: #FFFFFF;
      cursor: default;
   }
   
0
 
LVL 14

Accepted Solution

by:
flob9 earned 125 total points
ID: 24863638

#header ul {

      margin: 0;

      padding: 0;

      list-style: none;

      position: absolute;

      bottom: 0px;

     /* width:700px;*/

      float:right; /* added */

      font-size: 1.1em;

      right: 0px;

}

Open in new window

0
 

Author Comment

by:ctasik
ID: 24863679
* width:700px;*/
      float:right; /* added */
I tried to float it right, but then Firefox puts all menu items <li> backwards... and Safari doesn't.

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 14

Expert Comment

by:flob9
ID: 24863787
It is working for me with safari 4 and firefox 3.5.

"Firefox puts all menu items <li> backwards" <<< what do you mean ?
0
 
LVL 3

Expert Comment

by:russianryebread
ID: 24863848
If the elements are backwards, float them the other way...  You can re-arrange the order of a floated list by the direction you float the <li> elements inside the <ul>
0
 

Author Comment

by:ctasik
ID: 24865457
Actually it didn't work:)
The distance between menu item is control by margin-left: 20 px
ul float right & il float left  still leaves a distance to the right, because the space occupied by font of <li> items + space in between them still doesn't equal 100%.

I need somehow to tell them to occupy all the space inside ul edge to edge, 100 %. I tryed using percentage value, but each word is different length. So equal percentage method doesn't work.
0
 

Author Comment

by:ctasik
ID: 24865481
so my question now is

How to make <li> items

<li><a href="index.htm" class="current">HOME</a></li>
    <li><a href="curr_act.htm">CURRENT ACTIVITIES</a></li>
    <li><a href="gallery.htm">GALLERY</a></li>
    <li><a href="theatre.htm">THEATRE</a></li>
    <li><a href="teaching.htm">TEACHING</a></li>
    <li><a href="contact.htm" class="last">CONTACT</a></li>

spread inside lu edge to edge with equal spaces between them.

0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Where to define breakpoints for responsive CSS 2 31
Javascript create file issue 4 48
Need to click button twice to get results 2 33
CSS z-index issue 3 20
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

896 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now