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>
Related
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.
In the process of updating a website, we are required to support IE in compatibility mode so as to not break existing functionality.
There is a new side menu, which uses Kendo UI's PanelBar. However if the content overflows and we have to scroll, the kendo controls do not scroll correctly - the items float on top in a fixed position.
IE Compatibility Mode vs IE Edge: (please ignore size difference)
I've created a fiddle here to replicate:
<!DOCTYPE html>
<html class="k-webkit k-webkit40">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Kendo UI - jsFiddle demo by paulcoghill</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.blueopal.min.css">
<script type="text/javascript" src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<style type="text/css">
h1{
margin-bottom: 30px;
}
#container{
height: 200px;
width: 200px;
padding 5px;
background-color: red;
overflow: auto;
}
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
$("#panelbar").kendoPanelBar({
expandMode: "single"
});
});
});//]]>
</script>
</head>
<body hola-ext-player="1">
<div id="container">
<h1>Header</h1>
<ul id="panelbar" data-role="panelbar" class="k-widget k-reset k-header k-panelbar" tabindex="0" role="menu">
<li class="k-item k-state-default k-first" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
<li class="k-item k-state-default" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
<li class="k-item k-state-default" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
<li class="k-item k-state-default" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
<li class="k-item k-state-default" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
<li class="k-item k-state-default k-last" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
</ul>
<div>
</div>
</div>
</body>
</html>
http://jsfiddle.net/paulcoghill/k4gqq2dk/7/
You can view the result in compatibility mode to test:
http://jsfiddle.net/paulcoghill/k4gqq2dk/7/embedded/result/
Can anyone find a workaround or resolve this?
I've tried messing about with difference overflows and z-indexes, updating kendo, but I can't figure out what's going on.
Paul, try adding "position: relative;" to the container. Found this on another question: IE7 CSS Scrolling Div Bug
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
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 am interested in putting a survey (using survey monkey) into a website. I want it to be in a fixed position as a side bar on the left and shrink the size of the survey box. I do not know much about CSS at all.
<!DOCTYPE html>
<html dir='ltr' lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<div>
<head>
<title>
Home
| qfo4produce
</title>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
<link href='css/inuit.css' media='all' rel='stylesheet'>
<link href='css/grid.inuit.css' media='all' rel='stylesheet'>
<link href='css/style.css' media='all' rel='stylesheet'>
</head>
<body class='wrapper'>
<div id='header'>
<a href='index.html' rel='home'>
<img src='images/banner.png' alt="" title='Home'>
</a>
</div>
<div>
<style type="text/css">
body{
margin:0;
padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
}
div#left-sidebar{
position:fixed;
top:0;
left:-30;
iframe { width: 250px !important; }
height:100%;
}
</style>
<div id="surveyInfo"> <div><script src="http://www.surveymonkey.com/jsEmbed.aspx?sm=wtvL1HViBjWad5DOwtqu7A_3d_3d"> </script>
</div>
<ul class='nav'>
<li class='first'>
<a href='what-is-qfo.html' title='What Is QFO?'>What Is QFO?</a>
</li>
<li>
<a href='team.html' title='Team'>Team</a>
</li>
<li>
<a href='examples.html' title='Examples'>Examples</a>
</li>
<li>
<a href='technology.html' title='Technology'>Technology</a>
</li>
<li class='last'>
<a href='mailto:info#franwell.com' title='Contact'>Contact</a>
</li>
</ul>
<a class='login' href='qfo.aspx.html' title='Login'>Login</a>
<div id='main'>
<p>
<img src='images/summary.png' alt="Summary of QfO Process" />
</p>
</div>
Copyright © 2011
</div>
</body>
</html>
What you are asking and the code you have presented is extremely unclear. If you are extremely new to html/css then drawing a picture instead of trying to explain it in words often helps.
Here is an example where the sidebar is in a fixed position on the left. Fixed means that it will always be there, no matter where the page scrolls to.
http://jsfiddle.net/Bceat/
Don't make CSS declarations inside of other CSS declarations. They should each be on their own.
/* BAD */
div#left-sidebar{
position:fixed;
iframe { width: 250px !important; }
}
/* GOOD */
div#left-sidebar {
position:fixed;
}
iframe { width: 250px !important; }
You've also declared your styles inside the body of your html. Don't do that. Declare styles between the <head></head> tags.
/* BAD */
<head>
</head>
<style type="text/css">
body{
margin:0;
padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
}
div#left-sidebar{
position:fixed;
}
</style>
/* GOOD */
<head>
<style type="text/css">
body{
margin:0;
padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
}
div#left-sidebar{
position:fixed;
}
</style>
</head>
You also have some invalid declarations like:
/* right-sidebar-<length> means nothing */
padding:0 right-sidebar-<length> 0 left-sidebar-<length>;
I know that you are new, but you are going to have to read up on the basics of html and css. That will allow you to do two things. One is pose questions using language that other developers will understand. The second is presenting at a minimum, code that is properly formatted. That way even if your terminology is incorrect, your code can speak for you. Right now you aren't getting any answers because everything is kind of a mess.
I think you must create a table layout like this
<table width ="100%">
<tr><td></td> </tr>
<tr ><td rowspan="3"></td></tr>
your monkey servey here
<tr><td>nav content</td></tr>
<tr><td> main content</td></tr>
</table>