Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Horizontal lists 2

Status
Not open for further replies.
MrBelfry

MrBelfry

IS-IT--Management
May 21, 2003
289
Hey there Tek-Tippers

I'm designing a site with a horizontal menu bar along the top which I would like to align on the right of the page. The relevant css looks like this:
Code: 
#menu {
	width: 100%;
	text-align: right;
}

#menu ul {
	list-style: none;
	margin: 0;
}

#menu ul li {
	float: left;
}

and HTML looks like this:
Code: 
<div id="menu">
	<ul><li>Contacts</li><li>Message Centre |&nbsp;</li></ul>
</div>
The only way I can get it to align on the left is to change the float property BUT then that makes my HTML counter intuitive because I've got to put my menu items back to front. I'm probably missing something really obvious so please help!

MrBelfry
 
Sort by date Sort by votes

Is this what you're after? It works for me in IE6 and FireFox 0.8:

Code: 
<html>
<head>
	<style type="text/css">
	#menu {
		text-align: right;
		background-color: #FF0000;
	}

	#menu ul {
		list-style: none;
		margin: 0px;
	}

	#menu ul li {
		display: inline;
	}
	</style>
</head>

<body>
	<div id="menu">
		<ul>
			<li>Contacts | </li>
			<li>Message Centre</li>
		</ul>
	</div>
</body>
</html>

I've left the background-color in so you can see where the menu DIV goes.

Hope this helps,
Dan
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
646
PeDa
PeDa
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
822
pmonett
pmonett
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
701
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
233
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top