We help IT Professionals succeed at work.

Making vertical menu hortizonal and getting rid of bullet points

Rowby Goren
Rowby Goren asked
on
Hi

Please view this test page:

http://rowby.com/bad-menu.html

You will see a menu in the middle area of the page called "Bad Menu".

I need to format it into a hortizonal menu and also need to get rid of the bullet points.

Thanks for any help on this (most basic :) question!

Rowby
Comment
Watch Question

Commented:
http://cssmenumaker.com/horizontal_css_menu.php use this to build your horizontal menu /list.

there will be just too many items if laid out horizontally imho.
LZ1
Top Expert 2011

Commented:
I agree with dsine. There are a lot of items there and it would make for a very unusable menu. Is there anything you can condense and then we can explore drop down menus?
Make all items use the same class.
Add the following to that class:

float: left;
margin-left: 5px;
list-style:none;
Make all items use the same class.
Add the following to that class:

float: left;
margin-right: 5px;
list-style:none;

Author

Commented:
Well, then give me a basic HTML hortizonal menu with, say 5 generic titles, -- lined up hortizonally without bullets.  Also please style it as arial.  Just text, no submenus, no dropdowns.   Just a typical bottom text menu you'd find on a web page
 -- such as on the bottom of this experts exchange page.

I'd want the menu aligned left on the page.  And Pipes between each menu item.


Then I can work from there.

Thanks

Commented:
try the attached.
menu-033-05922.zip

Author

Commented:
Okay. I put it up (on a semi-live server)  Looks good.  I removed the background image and borders.  Now I just need to remove the bullets.

Attached is my current css, based on your example.
ul#menu
{
	margin:0;
	padding:0;
	list-style-type:none;
	width:auto;
	position:relative;
	display:block;
	height:30px;
	font-size:12px;
	font-weight:bold;

	font-family:Arial, Helvetica, sans-serif;
	
}

ul#menu li
{
	display:block;
	float:left;
	margin:0;
	padding:0;
}
	
ul#menu li a
{
	display:block;
	float:left;
	color:#ffffff;
	text-decoration:none;
	font-weight:bold;
	padding:8px 20px 0 20px;
}
	
ul#menu li a:hover
{	
	color:#ffffff;
	height:22px;
	
}
	

ul#menu li a.current
{
	display:inline;
	height:22px;
	background:transparent url(images/nav_bg.png) 0px -30px no-repeat;	
	float:left;
	margin:0;
}

Open in new window

Commented:

To remove a bullets use:
<div class="avr-footer-text">
<div class="avr-nostyle">
<a href="#">| Rental Home |</a>
<a href="http://rowby.com/los-angeles-location.html">Van Rental Los Angeles |</a>
<a href="http://rowby.com/van-rental-san-francisco.html">Van Rental San Francisco |</a>
<a href="http://rowby.com/new-san-jose-location.html">Van Rental San Jose |</a>
<a href="http://rowby.com/new-ontario-location.html">Van Rental Ontario |</a>
<a href="http://rowby.com/specials.html">Specials |</a>
<a href="http://rowby.com/#">Rental Policies |</a>

</div>

<div class="avr-nostyle">

<a href="http://rowby.com/#">| About |</a>
<a href="http://rowby.com/vans-for-every-occasion.html">Van Fans |</a>
<a href="http://rowby.com/locations.html">Locations |</a>
<a href="http://rowby.com/contact-us.html">Contact |</a>
<a href="#">Hotel Rebates |</a>
<a href="http://rowby.com/tourvans.html">Tour Van Rentals |</a>
<a href="http://rowby.com/collegiate-program.html">Collegiate Vans |</a>
<a href="http://rowby.com/discounts-for-non-profits.html">Non-Profits |</a>
<a href="http://rowby.com/usa-travel.html">USA Travel |</a>
<a href="http://rowby.com/mexico-insurance.html">Mexico Insurance |</a>

</div>
</div>

Open in new window

Author

Commented:
Hi, Nrisimha

I would want to base the removal of the bullets based on dsine's stylesheet.  And the attached HTML

ul#menu
{
      margin:0;
      padding:0;
      list-style-type:none;
      width:auto;
      position:relative;
      display:block;
      height:30px;
      font-size:12px;
      font-weight:bold;

      font-family:Arial, Helvetica, sans-serif;
      
}

ul#menu li
{
      display:block;
      float:left;
      margin:0;
      padding:0;
}
      
ul#menu li a
{
      display:block;
      float:left;
      color:#ffffff;
      text-decoration:none;
      font-weight:bold;
      padding:8px 20px 0 20px;
}
      
ul#menu li a:hover
{      
      color:#ffffff;
      height:22px;
      
}
      

ul#menu li a.current
{
      display:inline;
      height:22px;

      float:left;
      margin:0;
}


<div id="temp-bottom-menu">
    <ul id="menu">
        <li><a href="test1" target="_self">test</a> |</li>
        <li><a href="test2" target="_self">test2</a> |</li>
        <li><a href="test3" target="_self">test3</a> |</li>
        <li><a href="test4" target="_self">test4</a> |</li>
        <li><a href="test5" target="_self">test5</a> |</li>
        <li><a target="_self"></a></li>
    </ul>
</div>

Open in new window

Author

Commented:
HI

The bullets I was seeing was caused by another css style.  I fixed that and the bullets are gone.

Thanks!

Commented:

Thanks to God !!!

I have spent 2 hours analyzing all those CSS files :))))))))))

regards

Nrisimha