My page, for the most part, should be extending the main container div of my page to the full height of the window, although I must be missing something, as i believe all the right CSS elements needed are present.. Any Help?
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Programming Languages Concept Home</title>
<link type="text/css" href="unicss.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<script src="Script/jquery.js"></script>
<script src="Script/main.js"></script>
<noscript>Your browser has javascript disabled, please turn it on then refresh to take full advantage of this site</noscript>
</head>
<body>
<div id="header"><h1 class="headover">Home.</h1>
<div class="nav">
<ul class="navigation">
<li>Home</li>
<li>Object Or.
<ul>
<li>Java</li>
<li>ATT</li>
<li>Sprint</li>
<li>T-Mobile</li>
<li>International</li>
</ul>
</li>
<li>Array
<ul>
<li>Verizon</li>
<li>ATT</li>
<li>Sprint</li>
<li>T-Mobile</li>
<li>International</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="container"><br><br><br><p style="color:#666; margin-left:10px; margin-right:10px; text-align:center; text-indent:5px; font-size:24px;"><b>Programming has many faces and names. Java, C++, Perl, HTML, are all languages that can be used to program, to solve a problem that the programmer needs to solve. The tools in a programmers tool book are the languages he knows, all with different syntax, and different ways of going about to reach a solution. Whether the programmer uses the easiest language, or the one he is most familiar with, it is all personal choice. Find all the history and information about any programming language right here to help you pick the language that best suits you.</b></p>
<!--<button>Screenshots</button>
<p id="hide">Pretend these are some images yo.</p>-->
</div>
</body>
</html>
CSS:
body {
background-image:url(Images/backgroundmain.jpg);
min-width:100%;
min-height:100%;
font-family: Arial, Helvetica, sans-serif;
font-size:15px;
margin:0;
margin-bottom:-1px;
}
.headover{
color:#333;
float:right;
}
.headover:hover{
color:white;
}
#gfamily{
margin:auto;
margin-bottom:0px;
padding-bottom:0px;
}
#header{
position:fixed;
text-align:center;
background-color:#666;
margin:auto;
width:100%;
height:54px;
display:block;
min-width:1000px;
}
#container{
background-color:#FFF;
margin:auto;
width:70%;
min-height:100%;
margin-bottom:-1px;
}
.nav{
margin-left:5px;
text-align:center;
background-color:#999;
}
.navigation {
position:fixed;
display:block;
margin-top:15px;
padding:0;
list-style:none;
}
.navigation li {
float:left;
width:150px;
position:relative;
}
.navigation li a {
background:#262626;
color:#fff;
display:block;
padding:8px 7px 8px 7px;
text-decoration:none;
border-top:1px solid #FFF;
border-bottom:1px solid #FFF;
text-align:center;
text-transform:uppercase;
}
.navigation li a:hover {
color:#666;
}
.navigation ul {
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
border-bottom:1px solid #FFF;
}
.navigation ul li {
width:150px;
float:left;
border-top:none;
}
.navigation ul a {
display:block;
height:15px;
padding:8px 7px 13px 7px;
color:#fff;
text-decoration:none;
border-top:none;
border-bottom:1px solid #FFF;
}
.navigation ul a:hover {
color:#666;
}
#hide{
display:none;
}
#extlink{
color:#666;
}
#extlink:hover{
color:#333;
}
#pics:hover{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color:white;
background-color:#666;
border:none;
}
#pics{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color:#666;
background-color:white;
border:none;
}
It appears that you need the following CSS:
html,body {
height:100%;
{
Your body will only fill up what the html fills and the html does not appear to be 100%.
I've added
body, html{
height: 100%;
}
to your CSS, as highlighted in this bin: http://jsbin.com/wefir/1/edit
Also check this SO post for more info: Make body have 100% of the browser height
Related
I need to align all p element in a single line.But its not aligned.Its scroll append in vertical.But i need horizontal.And all the content align inline.
I Try with display:inline but no use.
see the below snippet:
$('.pin_box p').map(function () { $(this).html(katex.renderToString("\\displaystyle{"+$(this).text()+"}"));
})
.pin_box{
z-index:1;
width:300px;
height:40px;
background-color:#fcfcfc;
overflow:auto;
}
.pin_box p{
position:relative;
float:left;
display:inline-block;
height:40px;
width:40px;
border-right:1px solid #ccc;
margin:0;
font-size:12px;
text-align:center;
line-height:40px;
padding:0px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://khan.github.io/KaTeX/bower_components/katex/dist/katex.min.css">
<script src="https://khan.github.io/KaTeX/bower_components/katex/dist/katex.min.js"></script>
<div class="pin_box">
<p>x^{2}</p>
<p>{x}_{0}</p>
<p>\frac{10}{20}</p>
<p>\frac{d}{dx}{()}</p>
<p>\int{}</p>
<p>\int{}{()}dx</p>
<p>\int_{0}^{0}</p>
<p>\int_{0}^{0}{()}dx</p>
</div>
Any one help me to solve my problem.
Thanks in advance.
You can use CSS Flexbox if you need your a fixed width (as you've right now - 300px). Just make your .pin_box a flex container.
Just like:
.pin_box {
display: flex;
}
Have a look at the snippet below:
$('.pin_box p').map(function () { $(this).html(katex.renderToString("\\displaystyle{"+$(this).text()+"}"));
})
.pin_box{
display: flex;
z-index:1;
width: 300px;
height: 60px;
background-color:#fcfcfc;
overflow:auto;
}
.pin_box p{
position:relative;
float:left;
display:inline-block;
height:40px;
width:40px;
border-right:1px solid #ccc;
margin:0;
font-size:12px;
text-align:center;
line-height:40px;
padding:0px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://khan.github.io/KaTeX/bower_components/katex/dist/katex.min.css">
<script src="https://khan.github.io/KaTeX/bower_components/katex/dist/katex.min.js"></script>
<div class="pin_box">
<p>x^{2}</p>
<p>{x}_{0}</p>
<p>\frac{10}{20}</p>
<p>\frac{d}{dx}{()}</p>
<p>\int{}</p>
<p>\int{}{()}dx</p>
<p>\int_{0}^{0}</p>
<p>\int_{0}^{0}{()}dx</p>
</div>
Hope this helps!
You can make the width as auto in your css and increase the height to 50px
$('.pin_box p').map(function () { $(this).html(katex.renderToString("\\displaystyle{"+$(this).text()+"}"));
})
.pin_box{
z-index:1;
width:auto;
height:50px;
background-color:#fcfcfc;
overflow:auto;
}
.pin_box p{
position:relative;
float:left;
display:inline-block;
height:40px;
width:40px;
border-right:1px solid #ccc;
margin:0;
font-size:12px;
text-align:center;
line-height:40px;
padding:0px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://khan.github.io/KaTeX/bower_components/katex/dist/katex.min.css">
<script src="https://khan.github.io/KaTeX/bower_components/katex/dist/katex.min.js"></script>
<div class="pin_box">
<p>x^{2}</p>
<p>{x}_{0}</p>
<p>\frac{10}{20}</p>
<p>\frac{d}{dx}{()}</p>
<p>\int{}</p>
<p>\int{}{()}dx</p>
<p>\int_{0}^{0}</p>
<p>\int_{0}^{0}{()}dx</p>
</div>
I have done a very basic layout for my website. Now the site gets displayed perfect in Chrome, Mozila and Opera as it should be.
But only remaining problem is with IE. Since I have two boxes which sits next to each other in my browser window, the IE just breaks them and place one below another, what I definitely don't want.
How to get rid of this trouble?
[NOTE: I haven't published my site in webserver yet. I am just running it in my localhost]
The following is my complete code:
.PHP:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>My site</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<h1>My site</h1>
</header>
<nav id="top_menu">
<ul>
<li>Opening Hours</li>
<li>Registration</li>
</ul>
</nav>
<div id="new_div">
<section id="main_section">
<article>
<hgroup>
<header>
<h1>Title of article1</h1>
<h2>subTitle of article1</h2>
</header>
</hgroup>
<p>This is a best aricle1</p>
<footer>
<p> Written by...1</p>
</footer>
</article>
<article>
<hgroup>
<header>
<h1>Title of article2</h1>
<h2>subTitle of article2</h2>
</header>
</hgroup>
<p>This is a best aricle2</p>
<footer>
<p> Written by...2</p>
</footer>
</article>
</section>
<aside id="side_news">
<h4>News</h4>
Put your news
</aside>
</div>
<footer id="the_footer">
Put your footer
</footer>
</div>
</body>
</html>
.CSS:
*{
margin:0px;
padding:0px;
}
h1{
font:bold 20px Tahoma;
}
h2{
font:bold 14px Tahoma;
}
header,section,footer,aside,nav,article,hgroup{
display:block;
}
body{
width:100%;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
box-pack:center;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-box-pack:center;
-ms-box-pack:center;
/*
text-align:center;
*/
}
#big_wrapper{
max-width:1200px;
margin-top:20px;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
box-orient:vertical;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
-ms-box-orient:vertical;
box-flex:1;
-webkit-box-flex:1;
-moz-box-flex:1;
-ms-box-flex:1;
}
#top_header{
background:yellow;
border:3px soild gray;
padding:20px;
}
#top_menu{
border:green;
background:gray;
color:white;
}
#top_menu li{
display:inline-block;
list-style:none;
padding:5px;
font:bold 14px Tahoma;
}
#new_div{
display:-webkit-box;
display:-moz-box;
display:-ms-box;
box-orient:horizontal;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
-ms-box-orient:horizontal;
}
#main_section{
border:1px solid blue;
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
margin:20px;
padding:20px;
}
#side_news{
border:1px solid blue;
width:220px;
margin:20px 0px;
padding:30px;
background:#66CCCC;
}
#the_footer{
text-align:center;
padding:20px;
border-top:2px solid green;
}
The issue is with the float of the boxes and the display status
Try this, it should work fine..
http://jsfiddle.net/4sdvk8gL/
*{
margin:0px;
padding:0px;
}
h1{
font:bold 20px Tahoma;
}
h2{
font:bold 14px Tahoma;
}
header,section,footer,aside,nav,article,hgroup{
display:block;
}
body{
width:100%;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
box-pack:center;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-box-pack:center;
-ms-box-pack:center;
/*
text-align:center;
*/
}
#big_wrapper{
max-width:1200px;
margin-top:20px;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
box-orient:vertical;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
-ms-box-orient:vertical;
box-flex:1;
-webkit-box-flex:1;
-moz-box-flex:1;
-ms-box-flex:1;
}
#top_header{
background:yellow;
border:3px soild gray;
padding:20px;
}
#top_menu{
border:green;
background:gray;
color:white;
}
#top_menu li{
display:inline-block;
list-style:none;
padding:5px;
font:bold 14px Tahoma;f
}
#new_div{
display:block;
display:-moz-box;
display:-ms-box;
box-orient:horizontal;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
-ms-box-orient:horizontal;
}
#main_section{
border: 1px solid blue;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
margin: 20px;
padding: 20px;
float: left;
width: calc(75% - 82px);
}
#side_news{
border: 1px solid blue;
width: 220px;
margin: 20px 0px;
padding: 30px;
background: #66CCCC;
float: left;
display: block;
width: calc(25% - 62px);
}
#the_footer{
text-align:center;
padding:20px;
border-top:2px solid green;
}
My header is set to a width of 100%, yet on the left side of the page there is a big gap although this isn't present on the right side of the page. Any thoughts?
Here is my code:
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GS4 Concept Home Page</title>
<link type="text/css" href="unicss.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<script src="Script/jquery.js"></script>
<script src="Script/main.js"></script>
</head>
<body>
<div id="header">
<div class="nav">
<ul class="navigation">
<li>Home</li>
<li>Galaxy S4
<ul>
<li>Verizon</li>
<li>ATT</li>
<li>Sprint</li>
<li>T-Mobile</li>
<li>International</li>
</ul>
</li>
</ul>
</div>
</div>
<div id="container">
</div>
</body>
</html>
CSS:
#charset "utf-8";
/* CSS Document */
body{
background-image:url(Images/backgroundmain.jpg);
min-width:100%;
font-family: Arial, Helvetica,sans-serif;
font-size:15px;
}
#header{
position:fixed;
text-align:center;
background-color:#474747;
margin:auto;
width:100%;
height:50px;
display:block;
min-width:1000px;
}
#container{
background-color:#FFF;
margin:auto;
width:70%;
}
.nav{
text-align:center;
background-color:#999;
}
.navigation {
position:fixed;
display:block;
margin-top:15px;
padding:0;
list-style:none;
}
.navigation li {
float:left;
width:150px;
position:relative;
}
.navigation li a {
background:#262626;
color:#fff;
display:block;
padding:8px 7px 8px 7px;
text-decoration:none;
border-top:1px solid #666;
border-bottom:1px solid #666;
text-align:center;
text-transform:uppercase;
}
.navigation li a:hover {
color:#666;
}
.navigation ul {
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
border-bottom:1px solid #666;
}
.navigation ul li {
width:150px;
float:left;
border-top:none;
}
.navigation ul a {
display:block;
height:15px;
padding:8px 7px 13px 7px;
color:#fff;
text-decoration:none;
border-top:none;
border-bottom:1px solid #666;
}
.navigation ul a:hover {
color:#666;
}
JavaScript (If it matters..?):
// Executes the function when DOM will be loaded fully
$(document).ready(function () {
// hover property will help us set the events for mouse enter and mouse leave
$('.navigation li').hover(
// When mouse enters the .navigation element
function () {
//Fade in the navigation submenu
$('ul', this).fadeIn(); // fadeIn will show the sub cat menu
},
// When mouse leaves the .navigation element
function () {
//Fade out the navigation submenu
$('ul', this).fadeOut(); // fadeOut will hide the sub cat menu
}
);
});
You need to remove the default margin on the body by adding margin:0:
body {
background-image:url(Images/backgroundmain.jpg);
min-width:100%;
font-family: Arial, Helvetica, sans-serif;
font-size:15px;
margin:0;
}
jsFiddle example
Try setting *{margin: 0; padding: 0;} to remove any padding/margin the browser automatically puts on elements.
you are using a padding and margin on body element the sum is 30 px
delete the padding and margin or make it 0
to fill the width
How to define that by default there should be shown the content of "submenu11" under ther "menu1"?
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul id="css3menu1" class="menu">
<li class="topfirst"><a class="pressed" href="#menu1" style="height:40px;line-height:40px;"><span><img src="menu_files/css3menu1/db.png"/>MENU1</span></a>
<ul>
<li>SUBMENU11</li>
<li>SUBMENU12</li>
<li>SUBMENU13</li>
<li>SUBMENU14</li>
</ul></li>
<li class="menu"><img src="menu_files/css3menu1/schedule.png"/>MENU2</li>
<li class="menu"><img src="menu_files/css3menu1/analysis.png"/>MENU3</li>
<li class="toplast"><img src="menu_files/css3menu1/gps.png"/>MENU4</li>
</ul>
<div id='submenu11'>
<p> Content </p>
</div>
<div id='submenu12'>
<p> Content </p>
</div>
<div id='submenu13'>
<p> Content </p>
</div>
<div id='submenu14'>
<p> Content </p>
</div>
<script>
$('ul.menu').each(function() {
var $active, $content, $links = $(this).find('a');
$active = $links.first().addClass('active');
$content = $($active.attr('href'));
$links.not(':first').each(function() {
$($(this).attr('href')).hide();
});
$(this).on('click', 'a', function(e) {
$active.removeClass('active');
$content.hide();
$active = $(this);
$content = $($(this).attr('href'));
$active.addClass('active');
$content.show();
e.preventDefault();
});
});
</script>
</body>
CSS stylesheet:
html,body {
font: normal .8em/1.5em Arial, Helvetica, sans-serif;
background: #ffffff;
width: 100%;
margin: 0px auto;
}
p {
margin: 0 0 2em;
}
h1 {
margin: 0;
font:bold 12px Arial;
}
h2 {
margin:0;
color: #55aaff;
font:bold 12px Arial;
}
h3 {
margin:0;
font:normal 10px Arial;
}
h4 {
margin:0;
font:normal 12px Arial;
}
a {
color: #339;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
div#header {
padding:1em;
background:#00557f 100% 10px no-repeat;
border-bottom:6px double gray;
}
div#header p {
font:normal 10px Arial;
text-align:right;
color:#b7ddf2;
margin:0;
}
div.scrollbar {
height: 300px;
overflow: auto;
border: solid 1px #000;
padding: 5px;
}
div#content {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#content p {
text-align:justify;
padding:0 1em;
}
div#footer {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
padding:1em;
background:#ddd 98% 10px no-repeat;
border-bottom:6px double gray;
}
div#footer p {
font-style:italic;
font-size:1.1em;
margin:0;
}
/* ----------- Menu ----------- */
ul#css3menu1,ul#css3menu1 ul{
margin:0;
list-style:none;
padding:0;
background-color:#dedede;
border-width:1px;
border-style:solid;
border-color:#b7ddf2;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
ul#css3menu1 ul{
display:none;
position:absolute;
left:0;
top:100%;
-moz-box-shadow:3.5px 3.5px 5px #000000;
-webkit-box-shadow:3.5px 3.5px 5px #000000;
box-shadow:3.5px 3.5px 5px #000000;
background-color:#FFFFFF;border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-color:#d4d4d4;
padding:0 10px 10px;
}
ul#css3menu1 li:hover>*{
display:block;
}
ul#css3menu1 li{
position:relative;
display:block;
white-space:nowrap;
font-size:0;
float:left;
}
ul#css3menu1 li:hover{
z-index:1;
}
ul#css3menu1{
font-size:0;
z-index:999;
position:relative;
display:inline-block;
zoom:1;
*display:inline;
}
ul#css3menu1>li{
margin:0;
}
* html ul#css3menu1 li a{
display:inline-block;
}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;
}
ul#css3menu1 a{
display:block;
vertical-align:middle;
text-align:left;
text-decoration:none;
font:bold 12px Arial;
color:#000000;
text-shadow:#FFF 0 0 1px;
cursor:pointer;
padding:10px;
background-color:#ebf4fb;
background-image:url("mainbk.png");
background-repeat:repeat;
background-position:0 0;
border-width:0 0 0 1px;
border-style:solid;
border-color:#C0C0C0;
}
ul#css3menu1 ul li{
float:none;
margin:10px 0 0;
}
ul#css3menu1 ul a{
text-align:left;
padding:4px;
background-color:#FFFFFF;
background-image:none;
border-width:0;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
font:11px Arial;
color:#000;
text-decoration:none;
}
ul#css3menu1 li:hover>a,ul#css3menu1 a.pressed{
background-color:#b7ddf2;
border-color:#C0C0C0;
border-style:solid;
color:#000000;
text-decoration:none;
text-shadow:#FFF 0 0 1px;
background-position:0 100px;
}
ul#css3menu1 img{
border:none;
vertical-align:middle;
margin-right:10px;
}
ul#css3menu1 img.over{
display:none;
}
ul#css3menu1 li:hover > a img.def{
display:none;
}
ul#css3menu1 li:hover > a img.over{
display:inline;
}
ul#css3menu1 li a.pressed img.over{
display:inline;
}
ul#css3menu1 li a.pressed img.def{
display:none;
}
ul#css3menu1 span{
display:block;
overflow:visible;
background-position:right center;
background-repeat:no-repeat;
padding-right:0px;
}
ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{
background-color:#b7ddf2;
background-position:0 100px;
border-style:solid;
border-color:#C0C0C0;
color:#000000;
text-decoration:none;
text-shadow:#FFF 0 0 1px;
}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li>a.pressed{
background-color:#FFFFFF;
background-image:none;
color:#868686;
text-decoration:none;
}
ul#css3menu1 li.topfirst>a{
border-radius:5px 0 0 5px;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px;
-webkit-border-top-right-radius:0;
-webkit-border-bottom-right-radius:0;
}
ul#css3menu1 li.toplast>a{
border-radius:0 5px 5px 0;
-moz-border-radius:0 5px 5px 0;
-webkit-border-radius:0;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-right-radius:5px;
}
/* --------- End of Menu --------- */
EDIT1: I included the script and stylesheet.
EDIT2: Please look at the picture. It should clarify the issue.
The problem is in this line:
$active = $links.first().addClass('active');
It takes the first link in your menu and makes it active. Your first <a> tag in the ul with class menu is not the first menu item, but:
<a class="pressed" href="#menu1" style="height:40px;line-height:40px;"><span><img src="menu_files/css3menu1/db.png"/>MENU1</span></a>
So you need to make sure you target the first menu item. You can for example assign an id to it:
<li>SUBMENU11</li>
and then you have to rewrite that line of javascript to:
$active = $('#submenu-default').addClass('active');
That should do the trick. Obviously you can use any other way to locate that link.
EDIT: Maybe even better solution would be to rewrite your html as follows:
<ul id="css3menu1">
<li class="topfirst"><a class="pressed" href="#menu1" style="height:40px;line-height:40px;"><span><img src="menu_files/css3menu1/db.png"/>MENU1</span></a>
<ul class="menu">
<li>SUBMENU11</li>
<li>SUBMENU12</li>
<li>SUBMENU13</li>
<li>SUBMENU14</li>
</ul></li>
<li class="menu"><img src="menu_files/css3menu1/schedule.png"/>MENU2</li>
<li class="menu"><img src="menu_files/css3menu1/analysis.png"/>MENU3</li>
<li class="toplast"><img src="menu_files/css3menu1/gps.png"/>MENU4</li>
</ul>
This way you don't have to change the javascript, as the first link in the menu now indeed is the first item of the menu. I leave it for you to find out what works best for you.
I guess you want something like this: http://www.cssmenus.co.uk/dropdown.html
If you show an example or drawing we could help you even better.
I've just discovered idTabs and I'm trying to get a simple one working on my webserver. I've copied the code on the page called 'Usual' and called the plugin file and jQuery but all I get is...
- Tab 1
- Tab 2
- Tab 3
This is tab 1.
Understandably this is un-styled as I'm yet to add CSS, but surely this is provided with idTabs? I don't see it anywhere. Where am I going wrong?
From http://www.sunsean.com/idTabs/main.css:
/* Style for Usual tabs */
.usual {
background:#181818;
color:#111;
padding:15px 20px;
width:500px;
border:1px solid #222;
margin:8px auto;
}
.usual li { list-style:none; float:left; }
.usual ul a {
display:block;
padding:6px 10px;
text-decoration:none!important;
margin:1px;
margin-left:0;
font:10px Verdana;
color:#FFF;
background:#444;
}
.usual ul a:hover {
color:#FFF;
background:#111;
}
.usual ul a.selected {
margin-bottom:0;
color:#000;
background:snow;
border-bottom:1px solid snow;
cursor:default;
}
.usual div {
padding:10px 10px 8px 10px;
*padding-top:3px;
*margin-top:-15px;
clear:left;
background:snow;
font:10pt Georgia;
}
.usual div a { color:#000; font-weight:bold; }