|
CSS - Making The Active Tab & Panel One
Hi All.
I am just trying to figure out how to make the bottom border of the active tab disappear so it looks like the active tab is part of the active panel. For example: http://wiki.modxcms.com/images/a/aa/Tabs3.png THE CSS Code:
<style>
#tabs {
padding: 10px;
}
#tabs #nav {
margin-bottom: 0px;
margin-left: 8px;
}
#tabs ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#tabs #nav ul li {
display: inline;
padding: 3px 7px;
cursor: default;
background-color: #eeeeee;
border: 1px solid #cccccc;
border-bottom: none;
margin-right: 2px;
}
#tabs #nav ul li.active {
border: 1px solid #000066;
border-bottom: 1px solid white;
background-color: #ffffff;
}
#tabs #nav ul li:hover {
background-color: #ffffff;
}
#tabs #data {
margin-top: 3px;
}
#tabs #data div {
display: none;
border: 1px solid #000066;
padding: 10px;
}
#tabs #data div.active {
display: block;
}
</style>
THE javascript: Code:
<script type="text/javascript" language="javascript">
function navAllInactive() {
oNav = document.getElementById('nav');
oLis = oNav.getElementsByTagName('LI');
for (i = 0; i < oLis.length; i++) {
oLis[i].className = '';
}
}
function hideAllData() {
oData = document.getElementById('data');
oDivs = oData.getElementsByTagName('DIV');
for (i = 0; i < oDivs.length; i++) {
oDivs[i].style.display = 'none';
}
}
function doShow(o, pageId) {
hideAllData();
navAllInactive();
o.className = 'active';
oData = document.getElementById(pageId);
oData.style.display = 'block';
return false;
}
</script>
THE HTML: Code: <div id="tabs"> <div id="nav"> <ul> <li onclick="javascript:doShow(this, 'relevance');" class="active">Relevance</li> <li onclick="javascript:doShow(this, 'added');">Date Added</li> <li onclick="javascript:doShow(this, 'recorded');">Date Recorded</li> <li onclick="javascript:doShow(this, 'rating');">Rating</li> </ul> </div> <div id="data"> <div id="relevance" class="active">Relevance</div> <div id="added">Date Added</div> <div id="recorded">Date Recorded</div> <div id="rating">Rating</div> </div> </div> Similar TutorialsWhats' wrong with this? a:active doesn't seem to work at all: Code: <style type="text/css">
#navcontainer
{
margin: 5px 0 0 5px;
padding: 0;
height: 20px;
}
#navcontainer ul
{
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li
{
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}
#navcontainer ul li a
{
background: #000000;
width: 80px;
height: 18px;
border-top: none;
border-left: 1px solid #9B9B9B;
border-bottom: none;
border-right: none;
padding: 0;
margin: 0 0 5px 0;
font-family:Arial, Helvetica, sans-serif;
color: #26DC18;
font-weight:bold;
text-decoration: none;
display: block;
text-align: center;
}
#navcontainer ul li a:hover
{
color: #930;
background: #f5d7b4;
}
#navcontainer ul li a:active
{
background: #000000;
color: #fff0000;
}
</style>
HTML [CODE<div id="navcontainer"> <ul id="navlist"> <li><a href="index.php">Home</a></li> <li><a href="inventory.php">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> <li><a href="#">Item five</a></li> </ul> </div> [/CODE] P.S. I just include this menu in a PHP page. We'll that will work iff you put # on the target page but that must not be. Thanks! Hello! I hope someone can help me! Im trying to adapt a bigcartel css style sheet to make it a 4 row product column rather than 3. I just cant seem to get it correct when playing with the wrap, content and main content. The width seems to jump only from 3 to about 8! Im not actually hosting the theme myself to edit but just simply copied and pasted the css from a link provided straight into the basic design section in big cartel. It seems to be doing the trick but i cant get the spacing perfect to make it 4 columns wide!? Does anyone know if its because i need to actually host the template and images on my own server to be able to get it perfect? Any help to perfect this would be very much appreciated! Thanks so much in advance, Weesy Hi im new to using css and iv come across a problem. Im trying to create a css tab panel and I came across a site which had a template ready to use! Iv modified the css and html slightly to suit the style of the site im designing, however the css tab panel renders incorrectly in IE Here is what iv managed to create: http://starrbuckk.googlepages.com/tab.html http://starrbuckk.googlepages.com/tabs.css Now I have no idea how to fix the problem for IE! As you can see its the 1 pixel just below the introduction tab. The problem is that the bottom border for the tab is white and it extends all the way to the edge. Im wondering if there is there anyway to get the left border to 'override' the bottom border so that it show up ontop on the bottom border? Thanks! This topic may have been covered before, but I have searched and can't find anything. I think it is a unique topic. My boyfriend and I have a php site, http://biggt.mybesthost.com, we are having trouble that only shows up in the administrator part. For example, when a topics post is made, the font is different like the comment.link _DATESTRING The chatters is different. Any help to solve this would be greatly appreciated. Thanks Hey Everyone! I'm having issues with a custom sliding panel showing correctly in IE. It works EXACTLY as I'd like in Firefox, but breaks in Internet Explorer. I tried different positioning items, and tweaking everything I could think of, but it would appear that I'm stumped. knockoutsadvertising[dot]com/gaptest/ In the right hand sidebar, clicking 'Learn More' will open the panel. There's a link within the panel to close it again. Any help on how to get this thing positioned correctly in IE would be awesome. Brad If you have a second..... Doing a design for my brother and I have this idea that seems so simple but I can't figure it out. I attached a image that explains it better than I could in an a post. Here is the site: anthemcompanies.com/index2.html Here is the image to explain it (can't insert an image so it is a link) anthemcompanies.com/screen.png I would like to use just CSS to accomplish it but I have no idea how. I have searched everywhere online. I have tried adapting some jquery scripts and some js stuff but nothing has worked for me. Advice, links, completely explained solution, or I have no idea, would be most appreciated. Ive got a couple navigation blocks on the left hand side of the page, now when i use: <form> <div> A couple menu links go here </div> </form> then in Mozilla no gap is displayed, yet in IE a gap at the top and bottom appear outside the div tags, as it is written in the code. if i place the form tags within the div tags then the gap is at the top and bottom of the menu links, (for IE). Yet for Mozilla only a gap appears below the links when the form tags are within the div tags. Is there any way to get rid of these gaps? you can check the site he http://wiganyac.hellrazer.net/ Hi, I have created my website but I'm having problems with the a:active link in my CSS. When I go to my site I would like the currently viewed pages link to be blanked out and unclickable, (until I view a different page.) I have tried to change the a:active part of my CSS but to no avail. The only part that seems to work in the CSS is the a:hover part, all the others seem to be ignored. Still relating to the question above, I have made the links width 229px. This seems to display fine with IE6, however NS7 compresses the layers background to the size of the text. How do I avoid this? I have tried adding an absolute position style to the layer in CSS, but I then lose the 'fluidity' of the website when the browser is resized. I have pasted my CSS below: #waita, #waitb { text-decoration:none; color:#FFFFC0; border-style:solid; border-color: #000000; border-width:2px; background-color:#000000; layer-background-color:#000000; font:bold; font-weight:bold; font-family:arial; font-size:14px; height:22px; width:230px; z-index: 100; margin: 5; } .image { border-width: 2; border-color: #000000; border-style: solid; margin: 10; } .class1 a:link { text-decoration:none; color:#000000; border-style:solid; border-color: #000000; border-width:2px; background-color:#FFFFC0; layer-background-color:#FFFFC0; font:none; font-weight:none; font-family:arial; font-size:14px; line-height:18px; width: 229px; z-index: 20; margin: 5; } .class1 a:active { text-decoration:none; color:#000000; border-style:solid; border-color: #000000; border-width:2px; background-color:#FFFFC0; layer-background-color:#FFFFC0; font:none; font-weight:none; font-family:arial; font-size:14px; line-height:18px; width: 229px; z-index: 20; margin: 5; } .class1 a:visited { text-decoration:none; color:#000000; border-style:solid; border-color: #000000; border-width:2px; background-color:#FFFFC0; layer-background-color:#FFFFC0; font:none; font-weight:none; font-family:arial; font-size:14px; line-height:18px; width: 229px; z-index: 20; margin: 5; } .class1 a:hover { text-decoration:none; color:#FFFFC0; border-style:solid; border-color: #000000; border-width:2px; background-color:#000000; layer-background-color:#000000; font:bold; font-weight:bold; font-family:arial; font-size:14px; line-height:18px; width: 229px; z-index: 20; margin: 5; } I have tried to change the two line in the a:active part: {background-color:#FFFFC0; layer-background-color:#FFFFC0;} but it seems to do nothing. Cheers, Andy I have menu that uses its own CSS and I am having some problems with the a:active. I have accomplished changing the font color but have been unable to change the background color of the cell. See the code below.... Any help is greatly appreciated! By the way, the active link has to be used as a div. I am using a specialized menu with specific requirements :S The background command below only colors the background of the text but in the OVER css, it colors the background of the CELL.... Code: #dm_t-active_link {
font-weight: 900;
color: gold;
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 0px;
background-color: #440000;
width:125px;
border : 0px solid black;
}
.dm_t-0_over {
font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 4px;
color: #BC8D31;
background-color: #550000;
border : 1px solid black;
height: 16px;
cursor: hand;
}
is there a method similar to active, so when the user clicks the link it changes style but keeps the style change (after the mouse button is released) until the link is clicked a 2nd time at which point it goes back to its initial state and so on. i hope that makes sense I have a navigation bar similar to the one on this site. I want whatever current button that is clicked on to be a different color just like the site I linked. I thought this was done using the a:active tag but it doesn't seem to be working. It quickly changes back to whatever the default a tag specifies. Is there a trick to this? Thanks in advance. Hello Im trying to find a way to force :active and :focus from temporary states to permanent effects in safari ? basically make them behave just like they behave on internet explorer. As of right now, if you go to the website using safari, you will have to press and hold the mouse button in order to see the image. is there any hack ? or fix to do this ? thanks the website is http://www.danielyanez.com and the css is http://www.danielyanez.com/Stylesheet.css it works well on IE and even in firefox, but in safari you have to keep pressing the button. Hi, I have implemented an Apple Style CSS menu however I cannot apply the active state on this. When the current page is displayed, I would like to the button to be highlighted (as if hovering) Can anyone help me please? HTML Code:
<ul id="nav">
<li id="list1"><a href="#"><span>Home</span></a></li>
<li id="list2"><a href="#"><span>Special Offer</span></a></li>
<li id="list3"><a href="#"><span>Help</span></a></li>
<li id="list4"><a href="#"><span>Delivery Information</span></a></li>
<li id="list5"><a href="#"><span>Technical</span></a></li>
<li id="list6"><a href="#"><span>About Us</span></a></li>
<li id="list7"><a href="#"><span>Contact</span></a></li>
</ul>
CSS Code:
* { margin: 0px; padding: 0px; }
#nav {
background: url(nav.png);
height: 38px;
width: 960px;
margin: 0 auto;
}
#nav span {
display: none;
}
#nav li {
list-style-type: none;
float: left;
}
#nav a {
height: 38px;
display: block;
}
#list1 { width: 114px; }
#list2 { width: 164px; }
#list3 { width: 112px; }
#list4 { width: 206px; }
#list5 { width: 130px; }
#list6 { width: 122px; }
#list7 { width: 112px; }
#list1 a:hover {
background: url(nav.png) 0px -38px no-repeat;
}
#list2 a:hover {
background: url(nav.png) -114px -38px no-repeat;
}
#list3 a:hover {
background: url(nav.png) -278px -38px no-repeat;
}
#list4 a:hover {
background: url(nav.png) -390px -38px no-repeat;
}
#list5 a:hover {
background: url(nav.png) -596px -38px no-repeat;
}
#list6 a:hover {
background: url(nav.png) -726px -38px no-repeat;
}
#list7 a:hover {
background: url(nav.png) -848px -38px no-repeat;
}
Hi, I need some help to design an image based menu. I have been trying it for a week now but still could not achieve and going little bit mad. (Ive rewritten the same problem clearly this time hope someone can help me out) My menu image consists of 4 sections and 3 layers which looks like this: img26.imageshack.us/img26/1268/menux.gif 1.home 2.archives 3.news 4.about - (layer 1 unvistided link) 1.home 2.archives 3.news 4.about - (layer 2 hover link: mouse over) 1.home 2.archives 3.news 4.about - (layer 3 active: shows what section the visitor on afer clicking and going to that page) and my problem is with the last layer. I created the pages via admin panel of wordpress but give the links in the header.php manually myself without using codes. so the links of each section are like this home=http://localhost/wordpress/ archives=http://localhost/wordpress/?page_id=2 news=http://localhost/wordpress/?page_id=35 about=http://localhost/wordpress/?page_id=31 You can see my codes for CSS and PHP files below. Could you please have a look at my codes and provide the right code. The menu at the moment works ok except from the active side of it. I tried to give class id like "active" but failed to get it worked so please please change my wrong codes. PHP code: Code: <ul id="nav"> <li id="home"><a href="http://localhost/wordpress/">home</a></li> <li id="archives"><a href="http://localhost/wordpress/?page_id=2">archives</a></li> <li id="news"><a href="http://localhost/wordpress/?page_id=35">news</a></li> <li id="about" class="last"><a href="http://localhost/wordpress/?page_id=31">about</a></li> </ul> CSS Code: Code: #nav {
list-style: none;
padding: 0;
margin: -105px 25px;
width: 332px;
height: 30px;
background: url('images/menu.gif');
position: relative;
}
ul#nav li { width: 80px;
height: 30px;
padding: 0 4px 0 0;
text-indent: -900px;
float: left;
}
ul#nav li.last { padding: 0; }
ul#nav li a, ul#nav li a:visited, ul#nav li a:hover { display: block; width: 80px; height: 30px; background: transparent url('images/menu.gif') no-repeat; outline: none; }
ul#nav li#home a, ul#nav li#home a:visited { background-position: 0 0; }
ul#nav li#archives a, ul#nav li#archives a:visited { background-position: -84px 0; }
ul#nav li#news a, ul#nav li#news a:visited { background-position: -168px 0; }
ul#nav li#about a, ul#nav li#about a:visited { background-position: -252px 0; }
ul#nav li#home a:hover { background-position: 0 -30px; }
ul#nav li#archives a:hover { background-position: -84px -30px; }
ul#nav li#news a:hover { background-position: -168px -30px; }
ul#nav li#about a:hover { background-position: -252px -30px; }
.home ul#nav li#home a, .home ul#nav li#home a:visited, .home ul#nav li#home a:hover { background-position: 0 -60px; cursor: default; }
.archives ul#nav li#archives a, .archive ul#nav li#archives a:visited, .archives ul#nav li#archives a:hover { background-position: -84px -60px; cursor: default; }
.news ul#nav li#news a, .news ul#nav li#news a:visited, .news ul#nav li#news a:hover { background-position: -168px -60px; cursor: default; }
.about ul#nav li#about a, .about ul#nav li#about a:visited, .about ul#nav li#about a:hover { background-position: -252px -60px; cursor: default; }
The main problem i can understand from the earlier discussion is that i need to give id class for active links in header.php code but i also need to rewrite the last four lines of css code according to the codes i wrote in php file. Can someone please help? Can someone please add or rewrite the active bit (in css codes - last 4 lines from the bottom) and in php file. please. Hi there, Kindly have a look on below CSS property. What i want to ask is: when i'll click on a button, it should be look active. I mean it would have to get property of .sidebar_menu:active But it doen't works. Please elp me out from this. Code: <!--Sidebar menu button start-->
.input {
color : #FF9000;
font-size:20px;
;
}
.sidebar_menu{
border: 0px;
background: url('images/word-real.jpg') no-repeat top left;
font-size:18px;
font-weight:bold;
text-decoration:none;
color:#FFFFFF;
font-family: Verdana, Arial, Helvetica;;
width:97px;
height:42px
}
.sidebar_menu:hover {
border: 0px;
background: url('images/word-over.jpg') no-repeat top left;
color:#009BC9;
}
.sidebar_menu:active {
border: 0px;
background: url('images/word-over.jpg') no-repeat top left;
color:#009BC9;
}
br { clear: left; }
<!--Sidebar menu button End-->
Code: <a rel="11"><input type="button" value="worship" class="sidebar_menu"/></a> <a rel="22"><input type="button" value="prayer" class="sidebar_menu"/></a> <a rel="33"><input type="button" value="cell" class="sidebar_menu"/></a> <a rel="44"><input type="button" value="city" class="sidebar_menu"/></a> <a rel="55"><input type="button" value="mission" class="sidebar_menu"/></a> Hi, I can't make my active tab look 'active' in my navigation. I have the following css: Code:
#tab_menu {
width: 200px;
margin-top: 10px;
}
#tab_menu li a {
height: 24px;
text-decoration: none;
color: #484848;
display: block;
background: url(../images/tab_menu.gif);
background-repeat: no-repeat;
padding: 8px 0 0 10px;
}
#tab_menu li a:hover {
color: #55880a;
background: url(../images/tab_menu.gif) 0 -32px;
background-repeat: no-repeat;
padding: 8px 0 0 10px;
}
.active {
color: #55880a;
background: url(../images/tab_menu.gif) 0 -32px;
background-repeat: no-repeat;
padding: 8px 0 0 10px;
}
with the following html: Code:
<div id="tab_menu">
<ul>
<li><a class="active" href="link.html">Link 1</a></li>
<li><a href="link2.html">Link 2</a></li>
<li><a href="link3.html">Link 3</a></li>
<li><a href="link4.html">Link 3</a></li>
</ul>
</div>
Any help welcomed! M. Some of my pages are long enough to cause the primary vertical scroll bar to become active but most of the pages are short enough so that it stays hidden. Because of this the entire content automatically shifts to the left to accommodate the width of the scroll bar. I don't like that. I would like it to stay in the same spot no matter what. (centered) my wrapper has margin: auto, 0px; so that the page stays centered when the window size changes. Is there a way to just bump the page to the right only when the scroll bar is active? (via my external css) Thanks a bunch. (if there is a thread about this already please feel free to just post the link to it) Also, I am going to add this head-banging dude because its just so flippin stupid. so what do each one do? Hey everyone, I am wondering if there is a way to get rid of the border that a:active has by default. Because I find that border annoying. I thought adding border: 0 would do the job, but doesn't appear to, anyone have any thoughts? |
|||||||