Menu On One Line

Trying to get a menu on one line with mouseover

[aitf311]

I am very new to CSS, I woke up the other day and just decided to redo my site in CSS. I am wanting to make a menu on one line and change the backround color when the user mouseovers. I have borrowed a lot of the css for the menu from this forum, as my code kept displaying a block.

The links are not in the right order, and it pops a repeated word on the bottom of the first line (IE6)

CSS:
a:link, a:visited, a:hover, a:active {
font-weight: bold;
text-decoration: none;
color: #ffffff;
}
#topmenu p{
background:#000080;
text-align:center;
font: 0.9em ariel,sans-serif;
font-weight: normal;
}
.mainmenu{
width:100%;
}
.mainmenu a{
float: right;
display: inline;
text-align: center;
width: 16.7%;
height: 21px;
padding-top: 0px;
padding-bottom: 0px;
border-style: solid;
border-width: 1px;
border-color: #000080 #000080 #000080 #000080
}
.mainmenu a:hover{
background:#fc0;
}

HTML:
<div id="topmenu"><p class="mainmenu">
<a href="#">intro</a>
<a href="#">aid programs</a>
<a href="#">scholarships</a>
<a href="#">electronic fasfa</a>
<a href="#">related links</a>
<a href="#">contact info</a></p>
</div>

<Eeek!>

[edited by: Nick_W at 4:53 pm (utc) on Sep. 3, 2003]
[edit reason] no urls please / thanks! [/edit]

[Ryan8720]

It is better to add a class to each <a> in your menu. You don't want to put it in a paragraph (<p>) tag, because it is not a paragraph, it's a menu.

After you have done that, change the display: inline; to display: table-row; . Delete the all the floats. That should fix your problems.

[aitf311]

Did now work, what I have is now this

HTML:
<div id="topmenu">
<a href="#" class="mainmenu">intro</a>
<a href="#" class="mainmenu">aid programs</a>
<a href="#" class="mainmenu">scholarships</a>
<a href="#" class="mainmenu">electronic fasfa</a>
<a href="#" class="mainmenu">related links</a>
<a href="#" class="mainmenu">contact info</a>
</div>

CSS:
a:link, a:visited, a:hover, a:active {
font-weight: bold;
text-decoration: none;
color: #ffffff;
}
#topmenu p{
background:#000080;
text-align:center;
font: 0.9em ariel,sans-serif;
font-weight: normal;
}
.mainmenu{
width:100%;
}
.mainmenu a{
display: table-row;
text-align: center;
width: 16.7%;
padding-top: 0px;
padding-bottom: 0px;
border-style: solid;
border-width: 1px;
border-color: #000080
}
.mainmenu a:hover{
background:#fc0;
}

What this did was take the mouseover off, and display the links in a list, I changed the display back to inline and it was still a list, I am guess I need the <p> tag, will try

[aitf311]

yea
<div id="topmenu"><p class="mainmenu">
<a href="#">intro</a>
<a href="#">aid programs</a>
<a href="#">scholarships</a>
<a href="#">electronic fasfa</a>
<a href="#">related links</a>
<a href="#">contact info</a></p>
</div>

does what i want it to do, just have to figure out the width of each <a> now 16.7% makes 2 lines, 16% has too much room left on one line =>

[mirthe_v]

I find it makes good practice to use a list for menus. Like so:

<style>
.mainmenu li {display: inline;}
</style>

and the html:

<ul class="mainmenu">
<li>option</li>
<li>option</li>
<li>option</li>
<li>option</li>
<li>option</li>
<li>option</li>
</ul>

see also: http://www.alistapart.com/stories/taminglists/

good luck.

[edited by: Nick_W at 4:39 pm (utc) on Sep. 5, 2003]
[edit reason] de-linked [/edit]