I am working on jQuery mobile on intel-xdk and trying to set navbar in footer with custom icons. I have tried so many codes and tried to change the icons. With jquery.mobile-1.4.1 i am unable to find and set custom properties for nav bar icons. Now i tried my code with different versions which are not the latest ones:
1)1.2.1 and 1.8.1 these are working and allowing custom nav bar icons. When i used latest jQuery which is 1.4.1 I find ui-icon attribute in css but I found that it is applying through 1.4.1.js. I am stuck with that and want to use jQuery also for the slider. For this I have to use jQuery1.4.1 but with that I am unable to get custom nav bar icons. Any solution?
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--First try with it(its not working)-->
<!-- <link rel="stylesheet" href="jquery.mobile-1.4.1.min.css" />
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery.mobile-1.4.1.min.js"></script> -->
<!--Second try with it(its working)-->
<!-- <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script> -->
<!--third try with it(its not working)-->
<!-- <link rel="stylesheet" href="jquery.mobile-1.4.1.min.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.1.min.js"></script> -->
<style>
.ui-icon-taifun {
background-image: url("taifun.png");
}
.nav .ui-btn .ui-btn-inner {
padding-top: 40px !important;
}
.nav .ui-btn .ui-icon-taifun {
width: 45px!important;
height: 35px!important;
margin-left: -24px !important;
box-shadow: none!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-webkit-border-radius: none !important;
border-radius: none !important;
}
#programas .ui-icon {
background-image: url(taifun.png);
background-position: 0 0;
background-repeat: no-repeat;
}
</style>
<title>Test</title>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
<h2><img src="favicon.ico"> Pets</h2>
<ul data-role="listview">
<li>Canary</li>
<li>Cat</li>
<li>Dog</li>
</ul>
</div><!-- /collapsible -->
<div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
<h2><img src="favicon.ico"> Farm animals</h2>
<ul data-role="listview">
<li>Chicken</li>
<li>Cow</li>
<li>Duck</li>
</ul>
</div><!-- /collapsible -->
</div>
<div data-role="footer">
<div data-role="navbar" class="nav" data-grid="d">
<ul>
<li>Programas</li>
<li>Noticias</li>
<li>Radio</li>
<li>Eventos</li>
<li>More</li>
</ul>
</div>
</div>
</div>
</body>
</html>
For 1.4.x, custom icon background is assigned to the :after css selector:
.ui-icon-taifun:after {
background-image: url("taifun.png");
}
Then to use this icon in your buttons, data-icon should be set to "taifun" or whatever text you use after ui-icon-
<li>Programas</li>
<li>Noticias</li>
<li>Radio</li>
<li>Eventos</li>
<li>More</li>
Here is a DEMO
Related
my web app has an ng-animate transition applied to it in the style.css:
.ng-enter, .ng-leave {
position: absolute;
top: 8em;
left: -100%;
width: 100%;
transition: left .5s;
}
.ng-enter.ng-enter-active {
left: 0%;
}
.ng-leave {
left: 0%;
}
.ng-leave-active {
transition: left .5s;
left: 100%;
}
Unfortunately, this has resulted in it being applied to my navigation bar as well, which results in it causing a weird glitch where, whenever I log in or out, the links slide across the view for a half a second before appearing in the proper place:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="mainApp" ng-cloak>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=UnifrakturMaguntia" />
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="http://tappedout.net/tappedout.js"></script>
<!-- Latest compiled and minified CSS -->
</head>
<body id="background" ng-controller="mainController">
<div class="ourNav no-animate">
<div class="logo">Deckster</div>
<div>
<i class="fa fa-bars fa-3x" aria-hidden="true"></i>
</div>
<ul id="links">
<li ng-if="loginStatus !== true">
<div>
<a class="active" ui-sref="home" ui-sref-active="active">Home</a>
</div>
</li>
<li>
<div>
<a class="active" ui-sref="cardSearch" ui-sref-active="active">Card Search</a>
</div>
</li>
<li ng-if="loginStatus == true">
<div>
<a class="active" ui-sref="deckBuilder" ui-sref-active="active">Deck Builder</a>
</div>
</li>
<li ng-if="loginStatus == true">
<div>
<a class="active" ui-sref="deckCollection" ui-sref-active="active">Deck Collection</a>
</div>
</li>
<li ng-if="loginStatus == true">
<div class="logout">
<a class="active" ng-click="logout()" ui-sref-active="active">Log Out</a>
</div>
</li>
</ul>
</div>
<div ui-view class="view-container" ></div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<script src="./node_modules/angular/angular.js"></script>
<script src="./node_modules/#uirouter/angularjs/release/angular-ui-router.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"></script>
<script src="./dropDownMenu.js"></script>
<script src="./app.js"></script>
<script src="./service.js"></script>
<script src="./controller.js"></script>
<script src="./cardSearchController.js"></script>
<script src="./deckBuilderController.js"></script>
<script src="./deckCollectionController.js"></script>
<script src="./homeController.js"></script>
<script src="./loginSuccessController.js"></script>
<script src="http://tappedout.net/tappedout.js"></script>
</body>
</html>
I've tried to add the class "no-animate" in hopes of having the links not slide around, but it hasn't helped despite being important.
.no-animate {
-webkit-transition: none !important;
transition: none !important;
}
what do I need to do to make my "ourNav" class not be effected by transitions? Note that I'm using bootstrap, so I don't know if that could be causing it.
edit: I don't know if the z-index might make a difference, but the styling has the navigation bar at z-index: 1, so it can drop down as a hamburger menu when viewed on tablet or mobile:
.ourNav {
background-color: black;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 5em;
align-items: center;
z-index: 1;
}
You can use :not(.no-animate) in your css to exclude those element wich have no-animate class. Like this:
.ng-leave:not(.no-animate) {
transition: left .5s
}
In this case the .ng-leave.no-animate wont have the transition effect
Edit:
window.onclick = () => {
const elements = document.getElementsByClassName("element");
for (let i = 0; i < elements.length; i++) {
const element = elements[i];
element.classList.add("black");
}
}
.element {
background-color: blue;
}
.element:not(.not-me) {
transition: background-color 2s;
}
.element.black {
background-color: black;
}
<div class="element" > me </div>
<div class="element not-me" > not-me </div>
<div class="element" > me </div>
Look what happens on click. The elements with the not-me class don't get a transition. There is no need to use !important, just watch for the specifity. Hope it helps
I have a collapsable list that works perfectly fine in Chrome, but when I open up FireFox and view it, it looks all wonky. I opened up the debugger and there were no declaration errors, is there something I'm missing?
(Cant post images yet!)
How it looks in Firefox ->
(http://i.imgur.com/SbcTnGU.png)
How it looks in Chrome ->
(http://i.imgur.com/ofYp755.png)
.collapsibleList li>input+* {
display: none
}
.collapsibleList li>input:checked+* {
display: block
}
.collapsibleList li>input {
display: none
}
.collapsibleList li list-group-item>.badge {
float: right
}
.collapsibleList label {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: 0px;
background-color: #fff;
border: 1px solid #ddd;
cursor: pointer
}
Using Firefox 49 with the snippets below, the code you pasted above worked flawlessly with some minor HTML parsing tweak.
<html data-ember-extension="1" class="fa-events-icons-ready" lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="https://use.fontawesome.com/b703330c8c.css" media="all" rel="stylesheet"></head>
<body>
<style>
.collapsibleList li>input+* {
display: none
}
.collapsibleList li>input:checked+* {
display: block
}
.collapsibleList li>input {
display: none
}
.collapsibleList li list-group-item>.badge {
float: right
}
.collapsibleList label {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: 0px;
background-color: #fff;
border: 1px solid #ddd;
cursor: pointer
}
</style>
<h1>Hello, world!</h1>
<ul class="collapsibleList">
<li><label class="list-group-item" for="mylist-node6">Highest Win Ratio<span class="badge">Click Me!</span></label>
<input id="mylist-node6" type="checkbox">
<ul>
<li class="list-group-item">
<img src="avatar”"> #1 Name <span class="badge">61.76% </span>
</li>
<li class="list-group-item">
<img src="avatar"> #2 Name <span class="badge">50.75% </span>
</li>
<li class="list-group-item">
<img src="avatar"> #3 Name <span class="badge"> 44.59%</span>
</li>
</ul>
</li>
<li class="list-group-item ">
<i class="fa fa-gamepad"></i> ClassicHG Leaderboards
</li>
</ul>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/b703330c8c.js"></script>
</body></html>
I have a situation in which I want to change an HREF in an unordered list in HTML when a CSS media query is true. Specifically I want to change an HREF from
calendar.html to calendar2.html in the following page. Is this even possible?
Here is the code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/cliffsteele.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=11;IE=10; IE=9; IE=8; IE=7; IE=EDGE" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<style>
#media only screen
and (max-device-width : 667px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2)
{
.header {
display:none;
}
.maincontent{
text-align:left;
}
.content {
width: 100%;
}
.footer {
display:none;
}
.sidebar1 {
float:none;
display:none;
}
.maincontent div {
text-align:left;
}
.calendar {
width=550%;
}
}
</style>
<title>Untitled Document</title>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Cliff's Show Schedule</title>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
-->
</style>
<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; }
ul.nav a { zoom: 1; }
</style>
<![endif]-->
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />
<link href="cliff.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<script type="text/javascript" src="p7pm3/p7PM3scripts.js"></script>
<link href="p7pm3/p7PM3-01.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div class="container">
<div class="header"><img src="Pictures/logo.gif" alt="Logo" name="Insert_logo" width="81" height="63" id="Insert_logo" style="background: #8090AB; display:block;" />
<!-- end .header --></div>
<div class="content">
<div id="p7PM3_1" class="p7PM3-01 p7PM3 p7PM3noscript horiz menu-centered rounded auto-subs sub-left">
<ul>
<li>Home</li>
<li>Resort
<ul>
<li>Our Facility</li>
<li>Boarding & Daycare</li>
<li>Grooming</li>
<li>Rates</li>
<li>Our Guests</li>
</ul>
</li>
<li>Show Handling
<ul>
<li>Info</li>
<li>Rates</li>
<li>Schedule</li>
</ul>
</li>
<li>Photo Gallery</li>
<li>About Me</li>
<li>Contact Me</li>
</ul>
<script type="text/javascript">P7_PM3op('p7PM3_1',1,8,-5,-5,0,1,0,1,0,1,1,1,0,900,1,0)</script>
</div>
<br />
<!-- InstanceBeginEditable name="heading" -->
<h1 style="margin: 10px; clear: both; text-align:center; font-size: xx-large; font-family: Georgia, 'Times New Roman', Times, serif; padding-top:20px;">Cliff's Show Schedule</h1>
<!-- InstanceEndEditable -->
<div class="maincontent"><!-- InstanceBeginEditable name="content" -->
<iframe class="calendar" src="https://www.keepandshare.com/calendar28/show.php?i=2585375&ifr=y&colorreset=y&nw=y&vw=week28&themeChoice=0&md=30&nopopup=n&fsz=11&noviewmenu=y&noname=y&nobreak=y&noprint=y&norequest=n&nosearch=n&norss=y&noovl=y¬z=y&fd=n&sa=y&exedit=n&nonav=n&scroll=y" width="700" height="600" scrolling="Yes" frameborder="1"></iframe><p align="center">View a Mobile Version of this Calendar</p><!-- For help on embedding calendars go to http://support.keepandshare.com/support/solutions/97807 -->
</iframe>
<!-- InstanceEndEditable --></div>
<!-- end .content --></div>
<div class="sidebar1"><!-- InstanceBeginEditable name="sidebar" -->
<p style="font-size:larger; font-family:'Comic Sans MS', cursive"> </p><p style="font-size:16pt; font-family:'Comic Sans MS', cursive"> Most shows close two weeks prior to show date on Wednesday.</p>
<p style="font-size:16pt; font-family:'Comic Sans MS', cursive"> Call early if you would like me to handle your dog.</p>
<p><a style="font-size: small;" href="http://www.infodog.com/showinfo/showCal.htm" title="Infodog" target="_new">Enter a show via Infodog</a
></p>
<!-- InstanceEndEditable -->
<!-- end .sidebar --></div>
<div class="footer">
<div style="float:right">
<p> <a href="MAILTO:rickzipser#hotmail.com" >Site Designed by Fredric M. Zipser</a><br />
</p>
</div>
<div class="clearfloatleft">
<p>Clifford W. Steele Professional Handler <br />
1395 Rt. 6<br />
Carmel, NY 10512-1627<br />
United States<br />
ph:(845) 225-2463<br />
Cell:(845) 661-0010<br />
<a href="MAILTO:happydayskennelinc#hotmail.com" >happydayskennelinc#hotmail.com</a></p>
</div>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
<!-- InstanceEnd --></html>
</body>
I think it will easy if you create both link in html
<li id="schedule_link_mobile">
<a href="calendar2.html" >Schedule</a>
</li>
<li id="schedule_link_pc">
<a href="calendar.html" >Schedule</a>
</li>
and then use the css to hide the one that you don't want to show
#schedule_link_mobile{
display: none;
}
#schedule_link_pc{
display: inline-block;
}
#media only screen
and (max-device-width : 667px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2)
{
#schedule_link_mobile{
display: inline-block;
}
#schedule_link_pc{
display: none;
}
}
I don't think CSS can alter HTML attributes
you can just "hide" it, and display the other one
#media only screen and (...) {
.your-default-calendar {
display: none;
}
.your-calender2 {
display: inline-block;
}
}
but why not just use JavaScript? you can change a attribute easily in JavaScript.
if (window.matchMedia("your media queries").matches) {
// ...
}
On a related note... You can manipulate HTML using CSS content ...
The following taken from Chris Coyier at CSS-tricks.com
.email-address:before {
content: "Email address: "; }
<ul>
<li class="email-address">chriscoyier#gmail.com</li>
</ul>
And the output would be like:
• Email address: chriscoyier#gmail.com
The question to ask is: How will the hidden content be used.
The display CSS property hides HTML that is already built. If you have mobile, tablet, and desktop HTML, the application can be building HTML and applying CSS 3x while only displaying once.
If it will be turned on and off, display works. If it will use either a mobile or a tablet or a desktop display and never use the others, using Javascript to add the content is better.
Note that AngularJS has ngIf and ngSwitch directives that accomplish that only using HTML attributes.
I'm trying to build a HTML5 page with respsonsive design, but notice there is spacing between some elements (see JSFiddle here: http://jsfiddle.net/LWQg2/):
Notice how the organge header are is displayed between some elements internationalization and mymenu, also between mainnav and sitesearch. I don't know how to remove this space.
<!DOCTYPE html>
<html class="no-js grid">
<head>
<meta charset="utf-8">
<title>TT-Design</title>
<link rel="stylesheet" href="css/global.css" media="all">
<link rel="stylesheet" href="css/layout.css" media="all and (min-width: 36.236em)">
<!-- These styles are for presentation only -->
<link rel="stylesheet" href="css/presentation-global.css" media="all">
<link rel="stylesheet" href="css/presentation-layout.css" media="all and (min-width: 36.236em)">
<meta http-equiv="cleartype" content="on">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/css/style.css?v=1" />
</head>
<body>
<header>
<section id="social">
FB+Social
</section>
<section id="internationalization">
lang/curr
</section>
<section id="mymenu">
<ul>
<li>login</li>
<li>myaccount</li>
</ul>
</section>
<img src="/images/logo.png" />
<section id="bc_dialog">
</section>
<nav id="mainnav">
<ul>
<li>Home</li>
<li>Directory</li>
<li>Shop</li>
</ul>
</nav>
<section id="sitesearch">
Searchbox
</section>
</header>
<div id="container">
<header>
<h1>Pagetitle</h1>
</header>
<!-- page specific content -->
<aside id="facets">
facet navigation
</aside>
<aside id="leftside">
left side menu
</aside>
<div id="pagecontent">
<p>
some regular content on the page. This is not a newsarticle page.
</p>
</div>
<aside id="rightside">
related content
</aside>
<!-- end of page specific content -->
</div><!--! end of #container -->
<footer id="sitefooter">
Advertise | Contact | About
</footer>
<section id="sitemap">
sitemap links
</section>
</body>
</html>
body {
margin:2px;
}
body header{
background-color:orange;
}
#social{
background-color:blue;
}
#internationalization{
background-color:yellow;
}
#mymenu{
background-color:grey;
padding:0px;
}
#bc_dialog{
}
#mainnav{
background-color:#FF00DC;
}
#sitesearch{
background-color:#CDCDCD;
}
#container{
background-color:#FFF;
}
#container header{
background-color:#FFB7BF;
}
#container header h1{
margin:0px;
}
#facets{
background-color:purple;
}
#pagecontent{
background-color:#FFD7AD;
}
#leftside{
background-color:#FF0C00;
}
#rightside{
background-color:#60FFEF;
}
#sitefooter{
background-color:#BCE0FF;
}
#sitemap{
background-color:#C5AAFF;
}
It is because of marging of ul elements.
Remove it with ul { margin:0; } or declare #mainnav, #mymenu { overflow: auto; } to fix it.
The spacing is caused by the default top and bottom margins of ul elements.
Change your margin to 0 and you may also float everything left.
margin:0;
float:left;
You can use the F12 in your browser to help you identify such problems.
I've inserted an image below showing were I currently stand (css version) and where I want to be (tabled based version).
I originally created this layout with tables and I would like to move to a css based version. I have a long way to go.
I'm using Blueprint CSS.
Current issues:
There is a gap between the tabs that I'd like to get rid of. How do I get rid of this gap?
I would like to put more padding inside each tab. How do I do this without pushing the tabs onto the next line?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Heatmap using BluePrint</title>
<!-- Framework CSS -->
<link rel="stylesheet" href="/heatmap/styles/blueprint/screen.css" type="text/css"
media="screen, projection">
<link rel="stylesheet" href="/heatmap/styles/blueprint/print.css" type="text/css"
media="print">
<!--[if IE]><link rel="stylesheet" href="/heatmap/styles/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
<style type="text/css">
body{font-size:70%;font-family:Verdana, "Helvetica Neue", Arial, Helvetica, sans-serif;padding:5px;}
table.heatmap td {border: 1px solid black;}
table.heatmap{border-collapse:collapse;}
a {color:black;text-decoration: none;}
a:hover {text-decoration: underline;}
.list-as-tabs
{
margin-left:0px;
}
.list-as-tabs, .list-as-tabs li
{
display: inline;
}
.hover-links
{
background-color:#fffdbf;
}
.hover-links li a:hover
{
background-color:yellow;
}
table.heatmap tr td {text-align:center;}
</style>
</head>
<body>
<div class="container">
<div class="span-20">
<div class="prepend-5 span-10">
<h3>
Issuer Heatmap</h3>
</div>
<div class="span-5 last">
<ul class="list-as-tabs">
<li>Legend</li>
<li><img src="/heatmap/images/lightbulb.gif" alt="Send Feedback about Heatmap." /></li>
<li><input type="image" src="/heatmap/images/excel-mini.gif" alt="Export Heatmap to Excel." /></li>
<li><img src="/heatmap/images/printer.gif" alt="Print this page." /></li>
</ul>
</div>
<div class="prepend-5 span-15 last">
<ul class="list-as-tabs hover-links">
<li>View Draft Heatmap</li>
<li>Manage Security</li>
<li>Edit Heatmap and Platforms</li>
<li>View Revision History</li>
</ul>
</div>
</div>
</div>
</body>
</html>
There's no gap between tabs in the screenshot you posted.
As for adding padding to the tabs, you can do this:
.list-as-tabs li a {
padding: 3px 5px;
}
That gives the link top and bottom padding of 3px and left and right padding of 5px. This is nice because it gives you a bigger click target.
You state that you don't want to wrap but from what I can tell on the screenshot, there simply isn't enough room. You'll either have to make the font smaller or use shorter phrases for the tabs. Maybe this?
<ul class="list-as-tabs hover-links">
<li>Draft Heatmap</li>
<li>Security</li>
<li>Edit Heatmap/Platforms</li>
<li>Revision History</li>
</ul>