Hi all, I have tried everything I know but I am finding it impossible to get this horiz css menu to float right, *without* reversing the order of the menu items. I know it was originally written to float left, but surely it can't be impossible to float it right without the reversal? Can anyone help please? Thanks a google in advance. Bialystock. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <META http-equiv=Content-Type content="text/html; charset=iso-8859-1"> <style type="text/css"> /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ .mattblacktabs{ width: 960px; overflow: hidden; border-bottom: 1px solid black; /*bottom horizontal line that runs beneath tabs*/ } .mattblacktabs ul{ margin: 0; padding: 0; padding-left: 10px; /*offset of tabs relative to browser left edge*/ font: bold 12px Verdana; list-style-type: none; } .mattblacktabs li{ display: inline; margin: 0; } .mattblacktabs li a{ float: right; display: block; text-decoration: none; margin: 0; padding: 7px 8px; /*padding inside each tab*/ border-right: 1px solid white; /*right divider between tabs*/ color: white; background: #414141; /*background of tabs (default state)*/ } .mattblacktabs li a:visited{ color: white; } .mattblacktabs li a:hover, .mattblacktabs li.selected a{ background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */ } </style> </head> <body> <div align=center> <div class="mattblacktabs"> <ul> <li><a href="index.htm">Home</a></li> <li><a href="aaa.htm">AAA</a></li> <li><a href="bbb.htm">BBB</a></li> <li><a href="ccc.htm">CCC</a></li> <li><a href="ddd.htm">DDD</a></li> <li><a href="eee.htm">EEE</a></li> </ul> </div> </div> </body> </html>
Float the list right but float the anchors left. You can also remove the anchor float and replace the list item display with left float, like this: .mattblacktabs ul{ float: right; margin: 0; padding: 0; padding-left: 10px; /*offset of tabs relative to browser left edge*/ font: bold 12px Verdana; list-style-type: none; } .mattblacktabs li{ float: left; margin: 0; } .mattblacktabs li a{ display: block; text-decoration: none; margin: 0; padding: 7px 8px; /*padding inside each tab*/ border-right: 1px solid white; /*right divider between tabs*/ color: white; background: #414141; /*background of tabs (default state)*/ } Code (markup): You can replace zero margins and paddings with a proper CSS Reset, or use the star selector reset: * { margin: 0; padding: 0; } Code (markup):
Cash Nebula you are a brightly shining star ;-) Many thanks indeed for that, I owe you a pint! Cheers, Bialystock -
Cheers to you too! Usually, I get told that I'm a cloud of smelly gas. Hopefully others will chip in and this thread will degenerate in a huge argument about the merits of display inline vs float. That is always lots of fun!
Hi Cash, After drinking your pint (well you weren't here..) I discovered that the 'selected' function (hover colour of button when on the selected page) works in Firefox but not in IE. Do you reckon there's a fix for that, or not? Many thanks, Bialystock
Works fine for me in FF and IE7/8, but i had to add the class to the list item first. The colors you are using are so similar that I had to change one. <li class='selected'><a href="index.htm">Home</a></li> Which version of IE are you using?
Hi C, That's weird. I have IE8, and it defo doesn't work in that. Works fine in FF and Opera, so its coded correctly. The colours I posted are the originals in the Dynamic Drive script - I have of course changed them for my purposes. Any other suggestions?? - B
I'll test your code if you post it. Some things you can try: Put ".mattblacktabs li.selected a" on its own. Remove <div align=center></div>, it's not used any more. The comments are obvious so they can go too. Turn things on and off in Developer Tools (F12), you might find the cause of the problem. Also, test the code with the browser mode changed to IE7. It could even be a single syntax error that throws IE8 but not the other browsers.
Hi Cash Nebula, I have discovered the problem - it is related to another problem I have :-(. I have some stupid 'illegal' js code *before* the DOCTYPE declaration. Unless I remove that I can see it causing all kinds of problems. I have posted about that problem in the Javascript forum, but a solution has not yet been suggested that works. Are you any good with Javascript? If so I would be grateful if you could take a peek. Can't post links yet, but searching my name will find it. Many thanks again, Bialystock. -
Hi again :-( OK all sorted. I solved my javascript problem, and therefore the css is now working fine! Many thanks, Bialystock.
Yes, that would throw a spanner in the works. IE8 was probably operating in quirks mode, which is something you want to avoid. Glad it's all working now.