|
CSS - Active Tab Problem In Css Tab Navigation
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. Similar TutorialsI 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. There are 2 problems with my site's CSS that I can't resolve. 1) space showing under my <active> navigation that I want to get rid of 2) The text "Home" is actually moving when it is <active> and non active, but it shouldn't The site is duanademus.com . Any help would be much appreciated, and I say thanks now. My CSS for the Nav menu is listed below. Demaster /* Content > Sidebar > Menu */ #menu { margin-bottom: 30px; border-bottom: 4px solid #C7894C; } #menu ul { margin: 0; list-style: none; line-height: normal; } #menu li { display: inline; } #menu a { display: block; border-top: 1px solid #C7894C; font-weight: bold; } #menu p { background: #C7894C; display: block; margin-bottom: 0px; border-top: 1px solid #C7894C; font-weight: bold; color: #FFFFFF; } #menu a:hover, #menu a:active, { background: #C7894C; margin-bottom: 0px; font-weight: bold; color: #FFFFFF; } Hello I am having a little bit of trouble with an active state on my navigation. The navigation has been created with a sprite image for normal and hover states. I am now trying to make my active state the same as my hover state. I have been trying to add multiple classes to the li element since the nav background image is a class. Honestly I can't believe I haven't figured it out yet, but I'm sure this is a resolution I will not soon forget once I know the answer. I've posted my code and links to the site and code below. Many thanks in advance! Website: http://174.120.172.92/~techsol/ CSS File: http://174.120.172.92/~techsol/styl...ediatype=screen My navigation code: Code:
<!-- nav start -->
<ul id="nav">
<li class="excursions active"><a href="index.php?page=excursions">EXCURSIONS</a></li>
<li class="live"><a href="index.php?page=live-entertainment">LIVE ENTERTAINMENT</a></li>
<li class="restaurants"><a href="index.php?page=restaurants">RESTAURANTS</a></li>
<li class="top"><a href="index.php?page=top-ten">TOP 10</a></li>
<li class="hostoric"><a href="index.php?page=cannery">HISTORIC CANNERY</a></li>
<li class="shopping"><a href="index.php?page=shopping">SHOPPING</a></li>
<li class="days"><a href="index.php?page=juneau-days">JUNEAU DAYS</a></li>
<li class="access"><a href="index.php?page=local-access">LOCAL ACCESS</a></li>
</ul>
<!-- nav end -->
My navigation CSS Styles: Code: #nav{
width:542px;
position:absolute;
top:134px;
left:320px;
margin:0;
padding:0;
list-style:none;
overflow:hidden;
}
#nav li{
float:left;
margin:0 0 5px;
height:40px;
overflow:hidden;
}
#nav a{
background:url(uploads/template/bg-nav.jpg) no-repeat;
text-indent:-9999px;
display:block;
overflow:hidden;
height:40px;
}
#nav .excursions a{
width:122px;
margin:0 8px 0 0;
}
#nav .live a{
width:197px;
background-position:-130px 0;
margin:0 3px 0 0;
}
#nav .restaurants a{
width:130px;
margin:0 5px 0 0;
background-position:-330px 0;
}
#nav .top a{
width:77px;
background-position:-465px 0;
}
#nav .hostoric a{
width:173px;
background-position:0 -45px;
margin:0 9px 0 0;
}
#nav .shopping a{
width:110px;
background-position:-182px -45px;
}
#nav .shopping{margin:0 8px 0 0;}
#nav .days{margin:0 12px 0 0;}
#nav .days a{
width:103px;
background-position:-300px -45px;
}
#nav .access a{
width:126px;
background-position:-415px -45px;
}
#nav .excursions a:hover {background-position:0 -88px;}
#nav li.excursions li.active {background-position:0 -88px !important;}
#nav .live a:hover{background-position:-130px -88px;}
#nav .restaurants a:hover{background-position:-330px -88px;}
#nav .top a:hover{background-position:-465px -88px;}
#nav .hostoric a:hover{background-position:0 -133px;}
#nav .shopping a:hover{background-position:-182px -133px;}
#nav .days a:hover{background-position:-300px -133px;}
#nav .access a:hover{background-position:-415px -133px;}
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. I have a problem I can't resolve as I'm out of my depth with this CSS positioning issue on a joomla site with a bespoke template I have customised. The problem is that the client (a graphic designer) created a menu design where the top level menu buttons overlap with a curve. I have assigned a background image on hover and it works well. You can see it he I can't post an image of the menu as it won't let me, being a new poster, which is a pain... Code: #horiz-menu a:hover {
display: block;
z-index: 100;
line-height: 22px;
left:-53px;
position: relative;
background: url("../images/style9/menu-bar-hover.png") no-repeat scroll 0 0 transparent;
padding-left:63px;
height:27px;
width:162px;
border-bottom:1px solid #fff;
margin-bottom:-3px;
}
To achieve the overlap, the background has to sit behind the button to its left and that is achieved by moving it a fixed amount of pixels leftward. The menu text is then put back in place with the padding. However the client now wants the hovered image to stick in the parent position when the submenu items are hovered over. I've achieved this with: Code: #horiz-menu li.parent.active a {
background: url("../images/style9/menu-bar-hover.png") no-repeat scroll 0 0 transparent;
z-index: 100;
line-height: 22px;
left:-53px;
position: relative;
padding-left:63px;
height:27px;
width:162px;
border-bottom:1px solid #fff;
}
The trouble is that although the background image is positioned correctly, it has a knock-on effect on all the submenu list items which are being positioned to the beginning of the background image, 53 pixels to the left... I cannot pad the submenu items over to the right as it causes all the other submenus items under the other parents to move to the right too. I suppose my question is twofold: is there any way of setting the active parent list item background image position without the children items inheriting the position change? ; is there a better way of doing what I am attempting to do? If the client had not specified overlapping buttons I would be in the clear but my client was a graphic designer who designed without any thought as to the css implications. The requirements have been signed off and I have to find a way of implementing it. Please, any thoughts? I am not a css coder and I find css to be impenetrable, arcane whilst being slow and difficult to debug. All help really appreciated. Hi, I have problem with my code here and need someone to tell me what i am doing wrong here is the url www.epicindex.com/newmain.shtml on the left hand side there is a link called history and when i select Husker power you will see the page for husker power now when you move your mouse on the history link it shows the sub links but those sub links are hidden behind the pic can someone tell me what i am doing wrong here is the code for the page for husker power Code:
<!-- #Include virtual="/webcontent/doctype.txt" -->
<html>
<head>
<!-- #Include virtual="/tagsm.htm" -->
<!-- #Include virtual="/webcontent/cssinclude.htm" -->
<title>EPIC Performance</title>
<SCRIPT LANGUAGE="JavaScript" SRC="/webcontent/nav.js">
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="/webcontent/verticalnav.js">
</SCRIPT>
</head>
<body>
<div class="wrapper">
<div class="lefthandnav">
<!-- #Include virtual="/webcontent/lefthandfile.htm" -->
</div>
<div class="righthandnav">
<!-- #Include virtual="/webcontent/righthand.htm" -->
<h1>History of Talent Identification Index</h1>
<p class="imageleft"><img src="/images/histhusker.jpg"></p>
<p>Left :<b>Tom Osborne</b><br/> 255 wins as Nebraska Head Football coach<br/> Three National Championships</p>
<p>
Right:<b>Bob Devaney</b><br/>
101 wins as Nebraska HEad Football Coach<br/>
Two National Championships
</p>
</div>
</div>
</body>
</html>
and here is the code for the css Code:
body
{
margin: 0;
padding: 0;
font-family: arial;
color: #000;
}
#wrapper {
width: 900px;
height:605px;
}
.lefthandnav
{
float: left;
width: 145px;
background-color:white;
padding:0px 5px 0px 0px;
}
.righthandnav
{
float: left;
width: 745px;
background-color:white;
padding: 0px 0px 0px 5px
}
.headerimgleft
{
height:75px;
padding:0px 0px 5px 0px;
}
.clearing
{
clear:both;
}
.headingtitle
{
font-weight: bold;
font-size: 15;
text-align:center;
}
.topline
{
margin: 0;
padding: 0;
width:94.3%;
margin:0px;
color: #CC0000;
background-color: #CC0000;
height: 5px;
}
.bl {background: url(bl.gif) 0 100% no-repeat #e68200;}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; text-align:center;padding:5px}
.clear {font-size: 1px; height: 1px}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
padding:5px 0px 0px 0px;
}
#menu dl {
float: left;
width: 8.7em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: left;
font-weight: bold;
background: #CC0000;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: left;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
#site {
position: absolute;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
a {text-decoration: none;
color: black;
color: #222;
}
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 145px; /*WIDTH OF MAIN MENU ITEMS*/
background-color:#CC0000;
text-align:center;
}
.glossymenu li{
position: relative;
background-color:#CC0000;
}
.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 190px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
}
.glossymenu li a{
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu .arrowdiv{
position: absolute;
right: 2px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
}
/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */
.sponsordiv
{
background-color:#CC0000;
}
.sponsortexthead
{
text-decoration:underline;
font-weight:bold;
text-align:center;
}
.firstimage
{
float:left;
}
.secondfirstimage
{
float:left;
}
.thirdimage
{
float:left;
}
.mainpageholder
{
width:730px;
padding:30px 10px 10px 10px;
}
h1 {
color: #386cae;
font-family: Arial, Helvetica, Geneva, sans-serif;
font-size: 150%;
font-weight: bold;
margin: 20px 0 0 0;
padding:25px 0px 0px 0px;
}
.imageleft {
float: left;
margin: 10px 20px 10px 0;
position: relative;
}
.imageright {
float: right;
margin: 10px 0 10px 20px;
position: relative;
}
.noting {
background-color: #f7f5f6;
color: #000;
font-size: 80%;
margin-top: 10px;
padding: 5px 15px 0 5px;
border: 1px groove #000;
}
.noting p {
margin-top: 0;
}
i would appreciate any help i have spent a lot of time trying to figuring out what i am doing wrong thanks, todd I am trying to create the navigation from this site: http://www.cougarsoftware.com/content/partners/overview.aspx in CSS. However, I have 2 problems. 1) getting the second (or third) column to always align to the top of the first 2) keeping the second column open when there are few items in the list ex: try choosing Partners and then a second column option. This design is currently in Flash, and thus is not accessible, however, hovering over 'dead' space, area without links, the bottom of column 2 closes the column 2 nav Thanks for any help! HTML Code: <div id="access" role="navigation">
<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
<div class="menu-header"><ul id="menu-level1" class="menu">
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-34">
<a href="http://localhost/wordpress/about/">About</a>
</li>
<li id="menu-item-30" class="menu-item menu-item-type-post_type current-page-ancestor current-menu-ancestor current_page_ancestor menu-item-30">
<a href="http://localhost/wordpress/products/">Products</a>
<ul class="sub-menu">
<li id="menu-item-29" class="menu-item menu-item-type-post_type current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-29">
<a href="http://localhost/wordpress/products/hand-tools/">Hand Tools</a>
<ul class="sub-menu">
<li id="menu-item-28" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-14 current_page_item menu-item-28">
<a href="http://localhost/wordpress/products/hand-tools/hammers/">Hammers</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-33">
<a href="http://localhost/wordpress/contact/">Contact</a>
<ul class="sub-menu">
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-31">
<a href="http://localhost/wordpress/contact/phone/">Phone</a>
</li>
<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-32">
<a href="http://localhost/wordpress/contact/email/">Email</a>
</li>
</ul>
</li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-27">
<a href="http://localhost/wordpress/other/">Other</a>
</li>
</ul>
</div> </div><!-- #access -->
CSS Code: /* =Menu
-------------------------------------------------------------- */
#access {
background: #000;
display: block;
float: left;
margin: 0 auto;
/*width: 940px;*/
width: 192px;
}
#access .menu-header,
div.menu {
font-size: 13px;
margin-left: 12px;
/*width: 928px;*/
width: 180px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}
#access .menu-header li,
div.menu li {
/*float: left;*/
position: relative;
}
#access a {
color: #aaa;
display: block;
line-height: 38px;
padding: 0 10px;
text-decoration: none;
}
#access ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 0px;
left: 180px;
float: left;
width: 180px;
z-index: 99999;
}
#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
background: #333;
color: #fff;
}
#access ul li:hover > ul {
display: block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #fff;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
color: #fff;
}
Hi, Please can you take a look at my navigation bar on my site http://www.prohost.ie - on Internet Explorer it looks just about fine but in Opera the links go outsite of the <div> that theyre in. Please could anyone help with this? Also does anyone know how to get the content div center aligned in Opera like it is on IE. It has a text-align:center attribute set in its outer div but it only seems to work on IE. Anyone know a way round this? thanks Navigation buttons appear just fine with Firefox but they stand 2 pixels down of their original location when viewed with internet explorer. I assigned almost everything margin:0px but did not fix my problem. Click here to view. Red navigation bar.: http://www.refinethetaste.com/html/ Whats' 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! This time, problem is at the left navigation menu. There should be a 10px border on the left side of Denim. It appears fine with firefox but it does not appear at all with ie. Please view the attached image. Or view at : http://www.refinethetaste.com/html/...s&CATEGORYID=16 i have set up my navigation menu like so: PHP Code: <style type='text/css'> div#nav { border:1px solid #000000; background-color:#F2F2F2; height:auto; } div#nav a { display:block; color:black; border:1px solid #FFFFFF; } div#nav a:hover { color:red; border:1px solid #000000; background-color:white; } </style> <div class='nav'> <a href='page1.html'>Page 1</a> <a href='page2.html'>Page 2</a> <a href='page3.html'>Page 3</a> <a href='page4.html'>Page 4</a> </div> the above works perfectly in Firefox, but doesnt in IE. IE seems to keep around the fact that the <a> tag only encapsulates the text: Page 1, so the rollover effect only works in IE when the user hovers over the text and not anywhere in the row. Does IE not understand the display:block? as i think this is whats causing it... Hi guys, I hope someone can help me resolve this issue with my navigation. It is fine in IE7, FF and Safari but in IE6 my nagivation looks like this: instead of this: Here is the code: 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
font-family: Georgia, Times New Roman, Times, serif;
font-size: 12px;
color: #333333;
}
body {
margin-left: 0px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 0px;
}
a:link {
color: #CC0000;
}
a:visited {
color: #CC0000;
}
a:hover {
color: #3399CC;
}
a:active {
color: #CC0000;
}
#container {
width:850px;
margin:0 auto 0 auto;
}
#header {
width:850px;
height:187px;
background:url(images/bg_header.jpg) top left no-repeat;
}
#navcontainer
{
margin: 0px;
padding: 0px;
background:url(images/bg_nav.jpg) top left no-repeat;
width:850px;
height:40px;
text-align:center;
}
#navlist {
padding:0;
margin:0;
margin-left:8px;
}
#navcontainer ul li
{
list-style-type: none;
padding: 0;
margin: 0;
display: block;
float: left;
background: url(images/orig_nav.jpg) repeat-x 20px;
font: 13px verdana, sans-serif;
text-align: center;
}
#navcontainer a
{
color: #FFF;
font-weight:bold;
font-size:13px;
text-decoration: none;
display: block;
padding-right:12px;
padding-left:12px;
height:40px;
line-height:40px;
text-align:center;
}
#navcontainer li#active { background: url(images/orig_nav.jpg) repeat-x 20px; }
#navcontainer a:hover { background: url(images/hover_nav.jpg) repeat-x 20px; }
-->
</style></head>
<body>
<div id="container">
<div id="header"></div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">The Club</a></li>
<li><a href="#">Membership</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Sites</a></li>
<li><a href="#">Flight Log</a></li>
<li><a href="#"> Resources</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Gear Sales</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
Thanks for any help, Mike Hi, I really need help with something!... I'm currently designing a website, with a verticle tabbed navigation bar (using CSS & Javascript). I need it so that when the user hovers over a tab, the content related to that tab, displays until another tab is hovered over. At the moment, when ever you move the mouse into the content area for a certain tab, the content disappears and goes back to the default 'Welcome' layer underneath. But the content layers will have links in them, and this need to be 'active', as it were. Please take a look (I would post a link, but I'm new here... ) Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<script type="text/javascript"><!--
function showLayer(layerName, shadowLayerName)
{
if (document.getElementById) // Netscape 6 and IE 5+
{
var targetElement = document.getElementById(layerName);
var shadowElement = document.getElementById(shadowLayerName);
targetElement.style.top = shadowElement.style.top;
targetElement.style.visibility = 'visible';
}
}
function hideLayer(layerName)
{
if (document.getElementById) {
var targetElement = document.getElementById(layerName);
targetElement.style.visibility = 'hidden';
}
}
// -->
</script>
<style type="text/css"><!--
.buttonBar
{ width:125px; padding: 0; margin: 0;
}
.shadow
{
position: relative; visibility: hidden;
}
.button
{
background:width:125px; height: 100px;
}
.bg {display: block; width:125px; height: 100px;}
.bg#about:hover {background:url(...) no-repeat;}
.bg#destinations:hover {background:url(...) no-repeat;}
.bg#cruiselines:hover {background:url(...) no-repeat;}
.bg#specialoffers:hover {background:url(...) no-repeat;}
.bg#about:focus {background:url(...) no-repeat;}
.information
{
visibility: hidden; position: absolute; padding: 0; margin: 0; background-color: #891344; height: 400px; width: 575px;}
body {
text-align: center;
min-width: 700px;
}
#content {
margin:0 auto;
width:700px;
text-align: left;
}
-->
</style>
</head>
<body>
<div id="content">
<div id="header" style="width:700px; height: 110px; text-align: right;"><img src="..." width="171" height="100"></div>
<div class="buttonBar">
<div style="height: 400px; width: 575px; position: absolute; margin-left:125px; border: #891344 1px solid; ">
<img src="...">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent non elit. Donec porttitor. Ut in ligula. Mauris tortor. Vivamus at odio. Curabitur rhoncus vulputate neque. Praesent elit sapien, pellentesque non, adipiscing vel, pulvinar consectetuer, ante. Morbi semper pede ut nisl. Nam porttitor fermentum nisl. Mauris viverra malesuada neque. Vivamus aliquam pharetra ligula. Suspendisse quis orci et velit pharetra bibendum. Aenean turpis. Donec vel ipsum. Vivamus pharetra. Aliquam ut turpis non erat sagittis tincidunt.</p>
<p>Nam pellentesque egestas libero. Duis lobortis. Mauris egestas luctus urna. Nunc venenatis lectus in quam. Nulla gravida sem at massa. Quisque tortor. Donec id dui quis justo porta fermentum. In iaculis lacus non tellus. Morbi nunc enim, mattis eu, sollicitudin vel, placerat vel, magna. Pellentesque volutpat. Nam mi.</p>
</div>
<div style="position: absolute; width: 575px; height: 400px; margin-left: 125px; border: #891344 1px solid;">
<div id="shadowLayer" class="shadow"></div>
<div class="infoArea">
</div>
<div>
<div id="HoverArea1Info" class="information" onmouseover="showLayer('HoverArea1Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea1Info')" >
<img src="..."><div style="float: right; width: 200px; height: 267px; background-color: gray;">PICTURES GO HERE</div>
</div>
<div id="HoverArea2Info" class="information" onmouseover="showLayer('HoverArea2Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea2Info')">
<img src="..."><div style="float: right; width: 200px; height: 267px; background-color: gray;">PICTURES GO HERE</div>
</div>
<div id="HoverArea3Info" class="information" onmouseover="showLayer('HoverArea3Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea3Info')">
<img src="..."><div style="float: right; width: 200px; height: 267px; background-color: gray;">PICTURES GO HERE</div>
</div>
<div id="HoverArea4Info" class="information" onmouseover="showLayer('HoverArea4Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea4Info')">
<img src="..."><div style="float: right; width: 200px; height: 267px; background-color: gray;">PICTURES GO HERE</div>
</div>
</div>
</div>
<div style="position: absolute; height: 400px; width: 125px; background:url(...) no-repeat; border: #891344 1px solid;">
<div class="button" onmouseover="showLayer('HoverArea1Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea1Info')" >
<a href="about.phtml" class="bg" id="about">
</a></div>
<div class="button" onmouseover="showLayer('HoverArea2Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea2Info')" >
<a href="destinations.phtml" class="bg" id="destinations">
</a></div>
<div class="button" onmouseover="showLayer('HoverArea3Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea3Info')" >
<a href="cruise_lines.phtml" class="bg" id="cruiselines">
</a></div>
<div class="button" onmouseover="showLayer('HoverArea4Info', 'shadowLayer')" onmouseout="hideLayer('HoverArea4Info')" >
<a href="special_offers.phtml" class="bg" id="specialoffers">
</a></div>
<div id="footer" style="width:700px; height: 20px; text-align: right;">
</div>
</div>
</div>
</div>
</body>
</html>
There must be some way to adapt the code already used, to do what I want. Where am I going wrong and what do I need to do?? Any help would be much appreciated! Many thanks, Britcanuck. I'm working on the navigation the navigation for an image gallery I'm working on, but have run into some problems. It works fine in Firefox and Safari, but doesn't work in IE6, IE7, and Opera, and I can't for the life of me figure out why. The previous link and next link appears when they hover over the right and left side of the picture. I think it might be a problem with z-index, and the two link pictures getting stuck under the image in the image gallery, but I'm not sure. Any and all help is appreciated. This is the code for the gallery, minus the two navigation pictures and the image for the gallery. 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 profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example</title>
<style type="text/css" media="screen">
#test {
margin:0;
padding:0;
position:relative;
top:0;
left:0;
width:800px;
height:640px;
background-color: #000;
}
#nav{
position:absolute;
left:0;
top:0;
z-index:999;
width:100%;
height:100%;
}
#Next,#Prev{
position:absolute;
display:block;
width:50%;
height:100%;
outline:none;
top:0;
}
#Next{right:0;}
#Prev{left:0}
#Next:hover{
background:transparent url(next.gif) no-repeat 100% 30%;
}
#Prev:hover{
background:transparent url(prev.gif) no-repeat 0% 30%;
}
#image{
display:block;
}
</style>
</head>
<body>
<div id="test">
<div id="nav">
<a href="#" id="Prev"></a>
<a href="#" id="Next"></a>
</div>
<img id="image" src="grass.jpg" alt="image" />
</div>
</body>
</html>
Hi, I have a margin or spacing between the header image and the navigation bar. I'm unsure of how to remove it. I want the navigation to be directly underneath the header. This is the HTML Code: <div id="navbar"> <ul> <li><a href="index.html">Home</a></li> <li><a href="horses.html">Horses</a> <ul> <li><a href="stallions.html">Stallions</a></li> <li><a href="mares.html">Mares</a></li> <li><a href="geldings.html">Geldings</a></li> <li><a href="foals.html">Foals</a></li> </ul> </li> <li><a href="showteam.html">Show Team</a></li> <li><a href="showresults.html">Show Results</a></li> <li><a href="youths.html">Youths</a></li> <li><a href="sales.html">Sales</a></li> <li><a href="contactus.html">Contact Us</a></li> </ul> </div> This is the CSS Code:
#header {
background:#ddd;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
border-top:1px solid #FFF;
}
#navbar {
font-family: Edwardian Script ITC, Verdana, Arial, sans-serif;
font-size:36px;
width:100%;
margin-top:0px;
padding:0px;
height:63px;
background-color:#FFF;
}
#navbar li {
list-style: none;
float: left;
}
#navbar li a {
display: block;
padding: 7px 8px;
background-color: white;
color: black;
text-decoration: none;
}
#navbar li ul {
display: none;
width: 5em; /* Width to help Opera out */
background-color: white;
}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
background-color: white;
border-bottom: 1px solid #000;
color: #000; }
#navbar li li a:hover {
background-color:#FFC; }
Any help would be appreciated! It's really frustrating me. I've tried looking around other websites for help too. Kim Hi All, I am building a site that has the following structure for the navigation; Code:
<div id="navigation">
<ul id="navlist">
<li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
<li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
<li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
<ul>
<li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
<li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
<li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
<li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
<li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
</ul>
</li>
<li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
<li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
</ul>
</div>
The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;. Edit: Just noticed that I can't link to the full site that I have uploaded for preview. What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another? Your help would be much appreciated! 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;
}
|
|||||||