Member Avatar for ohtechie

Hello me again, hopefully this will be as easy as the last ones .... i'm trying to learn how to do horizontal menus using lists.

i've read a bunch of different "tutorials" online and even grabbed some examples. alas nothing seems to be working correctly. the below code was one i grabbed from a tutorial site on horizontal menus.. this is their example (except the link line). but it doesn't seem to work. i still get the vertical list/menu. i'm not understanding what i'm doing incorrect or missing since i'm copying this ... does there have to be a DTD or something. any pointers to a good tutorial or an explanation of why this doesn't work for me would be greatly appreaciated.

i'm using frontpage, IE6 and firefox to try and get this to work.

Thanks'

<html>

<head>
<title>Home</title>
<link href="menu.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
</html>
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
  • 2 Contributors
  • 1 Reply
  • 95 Views
  • 9 Hours Discussion Span
  • Latest Post Latest Post by csshacker
Member Avatar for csshacker

Hello, ohtechie here is the solution of your problem n i hope u understand this.

## this is your page where gose horizontal menus

<html>
<head>
<title>Home</title>
<link href="menu.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

</body>
</html>

## This is CSS file ( menu.css )

#navlist li
{
display: inline;
list-style-type: none;
padding: 5px;
background: #004080;
margin-left: 2px;

}

a
{ text-decoration: none;
	color:yellow;
	font-weight: bolder;
}

<snipped>

/* End of Css File */

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.