Previous Message
Next Message

Right Floated Nav & Source Order

Sent by Bill Brown on 26 March 2006 06:06


Hi Jono.

Brand new to the css-d list, and this is my first post, but I hope this
helps. This code should allow you to get the effect you're after. I already
had some of this code in my snippet collection, so it's not identical to
yours, but it should help. I've tried to make it emulate the look you're
after.

Let me know how it works out for ya...and if it fails miserably, remember:
new guy, first post.

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Right Floated Nav and Source Order for Jono (css-d list)</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
/*<![CDATA[*/
body {
  background: #fff;
  font: normal normal normal 11px/normal Verdana, Arial, sans-serif;
}
div.tabBox {
  background: #fff
url(http://www.charlestonwebsolutions.com/test_case/i/nav_bg.gif) repeat-x
bottom left;
  clear: both;
  zoom: 1.0; /* For clearing in IE */
}
div.tabBox:after { /* For clearing in Mozilla */
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
ul.tabs {
  display: inline;
  float: right;
  margin: 0;
  padding: 0;
}
ul.tabs li {
  display: inline;
  float: left;
  list-style: none;
}
ul.tabs li.label {
  display: inline;
  float: left;
  list-style: none;
}
ul.tabs li.label h2 {
  color: #666;
  font-size: 11px;
  margin: 0;
  padding: 8px 6px;
}
ul.tabs li.current a {
  background: #fff;
  border-top: 1px solid #999;
  border-right: 1px solid #f1f1f1;
  border-bottom: none;
  border-left: 1px solid #999;
  color: #000;
  display: block;
  float: left;
  margin: 0;
  padding: 9px 4px 7px 6px;
  text-decoration: none;
}
ul.tabs li.current a:visited {
  background: #fff;
  border-top: 1px solid #999;
  border-right: 1px solid #f1f1f1;
  border-bottom: none;
  border-left: 1px solid #999;
  color: #333;
  display: block;
  float: left;
  margin: 0;
  padding: 9px 4px 7px 6px;
  text-decoration: none;
}
ul.tabs li.current a:hover,
ul.tabs li.current a:active {
  background: #fff
url(http://www.charlestonwebsolutions.com/test_case/i/on_bg.gif) repeat-x
top left;
  border-top: 1px solid #999;
  border-right: 1px solid #f1f1f1;
  border-bottom: none;
  border-left: 1px solid #999;
  color: #000;
  display: block;
  float: left;
  margin: 0;
  padding: 9px 4px 7px 6px;
  text-decoration: none;
}
ul.tabs li a {
  background: #60a7c7
url(http://www.charlestonwebsolutions.com/test_case/i/off_bg.gif) repeat-x
top left;
  border-top: 1px solid #f1f1f1;
  border-right: 1px solid #999;
  border-bottom: none;
  border-left: 1px solid #f1f1f1;
  color: #000;
  display: block;
  float: left;
  margin: 0;
  padding: 8px 5px;
  text-decoration: none;
}
ul.tabs li a:visited {
  background: #60a7c7
url(http://www.charlestonwebsolutions.com/test_case/i/off_bg.gif) repeat-x
top left;
  border-top: 1px solid #f1f1f1;
  border-right: 1px solid #999;
  border-bottom: none;
  border-left: 1px solid #f1f1f1;
  color: #333;
  display: block;
  float: left;
  margin: 0;
  padding: 8px 5px;
  text-decoration: none;
}
ul.tabs li a:hover,
ul.tabs li a:active {
  background: #60a7c7
url(http://www.charlestonwebsolutions.com/test_case/i/on_bg.gif) repeat-x
top left;
  border-top: 1px solid #999;
  border-right: 1px solid #f1f1f1;
  border-bottom: none;
  border-left: 1px solid #999;
  color: #000;
  display: block;
  float: left;
  margin: 0;
  padding: 9px 4px 7px 6px;
  text-decoration: none;
}
/*]]>*/
</style>
</head>

<body>

<div class="tabBox"><ul class="tabs"
  ><li class="label"><h2>Tab Label:</h2></li
  ><li><a href="#">Tab One</a></li
  ><li><a href="#">Tab Two</a></li
  ><li class="current"><a href="#">Tab Three</a></li
  ><li><a href="#">Tab Four</a></li
  ><li><a href="#">Tab Five</a></li
></ul></div>

</body>
</html>



___________________________________________________________
$0 Web Hosting with up to 200MB web space, 1000 MB Transfer
10 Personalized POP and Web E-mail Accounts, and much more.
Signup at www.doteasy.com

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Possibly related: