|
CSS - Can't Activate Current Tab Through Onclick
Hi all. I've read through a lot of posts and for the life of me I can't figure out why this isn't working. I have navigation tabs at the top of the page, and my "tabber" function to change the clicked tab's className to 'on' for highlighting:
CSS #header li a { display: block; width: 100%; color: #fff; padding-top: 7px; } #header li a.on, #header li a:hover { background-color: #333; color: #9c0; height: 20px; } JavaScript <script language="JavaScript" type="text/javascript"> function tabber (tab) { if (document.getElementById('header')) { var getLinks = document.getElementById('header'); var links = getLinks.getElementsByTagName('a'); for (var i=0; i<links.length; i++) { if (links[i].name == tab) { links[i].className == 'on'; } else { links[i].className == ''; } } } } </script> HTML <div id="header"><div> <ul> <li><a href="#" name="home" class="on" onClick="tabber(this.name);">Home</a></li> <li><a href="#" name="stories" onClick="tabber(this.name);">Stories</a></li> <li><a href="#" name="featured" onClick="tabber(this.name);">Featured</a></li> <li><a href="#" name="contact" onClick="tabber(this.name);">Contact</a></li> </ul> </div></div> The tabber function is finding matches for the clicked link, but the matched tab is never highlighted. I can highlight a tab using onClick="className='on';" but I need to be able to turn all other tabs off with a blank className at the same time. Thank you! Similar TutorialsThis is what i am using as my page, and i only want to highlight the top part i.e only test and not the lowers. when i include the current page highlight class to the menu the whole section is highlighted, is there a way to highlight just the li and not the ul under the li that are contained within the same class. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title>Test</title> <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"> <style type="text/css" media="screen"> /* horizontal menu coding */ #nav { float: left; margin: 0 0 1em 0; padding: 0; list-style: none; } #nav li { float: left; } #nav li a { display:block; padding: 7px 23.9px; text-decoration: none; font-family:"Arial"; color: white; border-right: 1px solid #ccc; border-bottom: 1px dashed #ccc; font-size: 14px; background-color: #3f6fb7; } } #nav li a:hover { color: #3f6fb7; background-color: #d1cf9f; } #nav pageHorizontal a { background:#d1cf9f; color: white; } #nav ul.current-pagelowerHorizontal a { background:#d1cf9f; color: white; } #nav #nav-home a { background:#d1cf9f; color: white; /* declarations to style the current state */ } /* Print menu coding */ </style> </head> <body onLoad="preloadImages();" bgcolor="#ffffff"> <div class="ts-1-13"> <ul id="nav"> <li id="nav-home" > <a href="testnewMenu.html">test</a> <!--for the new menu --> <ul id="nav"> <a href="XXX.html">Lower 1 </a> </ul> <ul id="nav"> <a href="XXX.html">Lower 2</a> </ul> <ul id="nav"> <a href="XXX.html">Lower 3 </a> </ul> <ul id="nav"> <a href="XXX.html"> Lower 4</a> </ul> <!--for the new menu ul under a list --> </li> <li> <a href="XXX.html">Test2</a> </li> <li> <a href="XXX.cfm">test 3</a> </li> <li> <a href="About_Us.html">About Us</a> </li> </ul> </div> </body> </html>
I have the following:
PHP Code: <td id="nav-01" onmouseover="this.className='classover'" onmouseout="this.className=''">Home</td> I realise the "this.className" will produce a class of "classover" when I do a mouseover. However I already have an id="nav-o1" and therefore the class will not overwrite this.... they are both setting different background colours to the column. Can anyone help me? PHP Code: <td id="nav-01">Home</td> That is the basic code and I would like background colour to change when doing a mouseover and then revert to original when mouse goes away. As much CSS as possible and as little javascript... Please! I am a chef by trade, but am re-doing my website for a better online experience for my clients. I want to keep my same css coding, but for the life of me, I cannot change the active menu page to a different background to show the current active page...please help and thanks! Cheers ~Kat Menu bar at: (cater-express dot com) I am 99.99999% sure that there is no way to do this in pure CSS but just in case. I have tabbed navigation. When a user clicks on a link it loads that page from the server (a page refresh). The corresponding nav tab should then be in its active state. Does CSS support this at all? I am happy to run a server side script to set an item to "current" but I would like to know if there is any way around it. Thanks. I'm trying to use Eric Meyer's css tabbed navbar to navigate a form. It works, except that I can't seem to get the navbar to indicate the current tab by changing the tab background and bottom border to white. I've been reading and trying different css commands, but haven't been successful. I'm including my html and css below and would appreciate any help. Thanks, Keith Silva CSS: textarea{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 1.0em; } button{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 1.0em; } /*table{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 0.8em; }*/ caption{ font-size: 1.5em; } .add{ font-size: 0.6em; text-align: right; } .frm_tbl{ border-spacing: 5px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 0.8em; color: Navy; } #navlist { padding: 3px 0; margin-left: 0; border-bottom: 1px solid #778; font: bold 12px Verdana, sans-serif; } #navlist li { list-style: none; margin: 0; display: inline; } #navlist li a { padding: 3px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: none; background: #DDE; text-decoration: none; } #navlist li a:link { color: #448; } #navlist li a:visited { color: #667; } #navlist li a:hover { color: #000; background: #AAE; border-color: #227; } /*#navlist li:target*/ #mail_frm #mail_nav a, #loc_frm #loc_nav a, #other_frm #other_nav a{ background: white; border-bottom: 1px solid white; } #mail_frm{display: none} #mail_frm:target{display: block} #loc_frm{display: none} #loc_frm:target{display: block} #other_frm{display: none} #other_frm:target{display: block} HTML: // #include settings #cgivar id #cgitextvar notes #cgitextvar directions #if @id != "" //edit existing record #sql load select * from tbl_org where org_id = @id #else //new record #sqlblankrow tbl_org #endif <form method="POST" target="_self" name="org_form"> #formtarget org_save <div id="navcontainer"> <ul id="navlist"> <li id="mail_nav"><a href="#mail_frm">Mail</a></li> <li id="loc_nav"><a href="#loc_frm">Location</a></li> <li id="other_nav"><a href="#other_frm">Other</a></li> </ul> </div> <table id="mail_frm" class="frm_tbl" border="0"> <tr> <td colspan="2">Office<br><input name="office" type="text" size="45" maxlength="45" value="@office" title=""></td> <td>Type<br><select name="type" size="1" class=""> #optionlist selected=@type #options muni Municipality state State discharger Discharger consultant Consultant law_firm Law Firm dischgr_assoc Discharger Assoc elected Elected Official lab Laboratory public Public academia Academia tribe Tribe other Other </select></td> </tr> <tr> <td colspan="2">Division<br><input name="division" type="text" size="45" maxlength="45" value="@division" title=""></td> <td>Region<br><select name="region" size="1" class=""> #optionlist selected=@region #options none None north AZ-North central AZ-Central south AZ-South rb1 CA-North Coast(1) rb2 CA-San Francisco Bay(2) rb3 CA-Central Coast(3) rb4 CA-Los Angeles(4) rb5r CA-Central Valley North(5r) rb5s CA-Central Valley(5s) rb5f CA-Central Valley South(5f) rb6 CA-Lahontan(6) rb7 CA-Palm Desert(7) rb8 CA-Santa Ana(8) rb9 CA-San Diego(9) </select></td> </tr> <tr> <td colspan="2">Department<br><input name="dept" type="text" size="45" maxlength="45" value="@dept" title=""></td> <td>Mail Code<br><input name="mail_code" type="text" size="15" maxlength="15" value="@mail_code" title=""></td> </tr> <tr><td colspan="2">Organization<br><input name="org" type="text" size="45" maxlength="45" value="@org" title=""></td></tr> <tr><td colspan="2">Mailing Address<br><input name="mail_addr" type="text" size="45" maxlength="45" value="@mail_addr" title=""></td></tr> <tr> <td>Mailing City<br><input name="mail_city" type="text" size="20" maxlength="20" value="@mail_city" title=""></td> <td>State<br><input name="state" type="text" size="20" maxlength="20" value="@state" title=""></td> <td>Mailing Zip Code<br><input name="mail_zip" type="text" size="10" maxlength="10" value="@mail_zip" title=""></td> </tr> </table> <table id="loc_frm" class="frm_tbl" border="0"> <tr><td colspan="2">Location<br><input name="location" type="text" size="45" maxlength="45" value="@location" title=""></td></tr> <tr><td colspan="2">Location Address<br><input name="loc_addr" type="text" size="45" maxlength="45" value="@loc_addr" title=""></td></tr> <tr> <td>Location City<br><input name="loc_city" type="text" size="20" maxlength="20" value="@loc_city" title=""></td> <td>Location Zip<br><input name="loc_zip" type="text" size="10" maxlength="10" value="@loc_zip" title=""></td> </tr> <tr><td colspan="2">Directions<br><textarea name="directions" rows="7" cols="60"> #showtext ./directions/org_@org_id #+ </textarea></td> </tr> </table> <table id="other_frm" class="frm_tbl" border="0"> <tr><td colspan="2">Main Office<br><input name="main" type="text" size="45" maxlength="45" value="@main" title=""></td></tr> <tr><td colspan="2">Main Address<br><input name="main_addr" type="text" size="45" maxlength="45" value="@main_addr" title=""></td></tr> <tr> <td>Main City<br><input name="main_city" type="text" size="20" maxlength="20" value="@main_city" title=""></td> <td>Main Zip<br><input name="main_zip" type="text" size="10" maxlength="10" value="@main_zip" title=""></td> </tr> <tr><td colspan="2">Web Site<br><input name="web_site" type="text" size="45" maxlength="45" value="@web_site" title=""></td></tr> <tr><td colspan="2">Notes<br><textarea name="notes" rows="7" cols="50"> #showtext ./notes/org_@org_id #+ </textarea></td> <td><input name="selected" type="checkbox" value="y" title="">Select<br><br> <input name="archive" type="checkbox" value="y" title="">Archive</td> </tr> </table><br> org_id <input name="org_id" type="text" size="8" value="@org_id" title=""> <button name="save" class="save_org" onclick="save_form(this.form);return false;">Save</button> <button name="cancel" class="cancel_org" onclick="cancel_form(this.form);return false;">Cancel</button> </form> Hi There, Is it possible to highlight the current page without specifying a unique body id? I have been asked to implement current page style on a dynamic site where it is not possible to do this. Any ideas would be greatly appreciated. Thanks, I've been at this for hours and hours and I've tried about 50 different ways to get this to work but I'm totally stumped. I've switched the id and class around (in my site's theme.php and template.html) so often that I'm dizzy. I've searched Google and these forums (among others) for help but still, I'm getting nowhere. Maybe my CSS skills are lacking but this seems simple enough (or is it?). Anyway, here's the problem: The CSS (below) just won't work...so what's wrong with it? What am I missing? Code: ul#navigation {
list-style: none;
margin:0 auto;
padding:0;
font-family: Arial, Verdana, Serif;
font-weight:bold;
background:#32478A;
text-transform:uppercase;
height:25px;
line-height:25px;
font-size:12px;
}
ul#navigation li {
float:left;
margin:0;
padding:0;
list-style:none;
white-space:nowrap;
background:none;
}
ul#navigation li a {
display:block;
padding:0 15px;
text-transform:uppercase;
letter-spacing:1px;
border:none;
color:#fff;
}
ul#navigation li a:hover, ul#navigation li a:active, ul#navigation li.current_page_item a {
color:#242169;
background:#fff;
}
My template.html UL ID looks like this... Code: <ul id="navigation">
{SYS_MENU}
</ul>
...and the theme.php CLASS (login link for example) looks like this: Code: <!-- BEGIN login -->
<li><a href="{LOGIN_TGT}" title="Click here to log in" class="current_page_item"> Log in</a></li>
<!-- END login -->
Here's a link to my site: The hover and active bits seem to work but not the CURRENT...which is what I need to fix. Simply put, the current tab at the top of the page doesn't change to reflect what page you're on. I apologize in advance for the coding mess on my site but I'm just now getting around to cleaning things up. I could really use a hand fixing this little monster. Anyone with stellar CSS skills ready to school this lazy bum? Cheers. EDIT: The link (BBCode) above (to my site) doesn't work, so click my homepage in the drop-down menu under my user name. Thanks. I have a menu at the bottom of my page and want the menu item to be highlighted when the visitor is on that particular page so they know where they are. I want to embed this on a couple of pages because I have built a top level menu with drop downs using p7's Pop Menu Magic. Those menu items are highlighted when one is on a certain page. I don't know if I can do this by embedding. Could someone help me please. To see the example go to: www.coloradofoxden.com/deckscapes/index.html. The links at the bottom are what I am trying to fix. Thanks. I have a css list menu which uses background images in place of bullets. What I'd like is for the user to visit the 'about' page and have the 'about' links background image be different from the rest. So the user can see from looking at the menu, what page they are on. Anyone able to suggest any methods of doing this? Would be appreciated =D Hi, Is there any way to change the color of the menu text for that current page? For example when I'm on the 'About Us' page on my website, I want the text to be blue or #00175d to be precise. I am not very good at coding or editing HTML/CSS, so I don't know how to do this. All I know is that my website has a class on the body, and each menu item has a unique ID. My website is: http://firstcareambulance .org/ Any help is appreciated. Thanks Hey all, I have a webpage w/a top, left column, and content column. The page has been designed using CSS. Is there anyway to load a seperate HTML page (of which I have no control) in my content column and keep the top (and possibly left) columns in place? Is there a way to do this w/CSS? (Basically I want frame functionality using CSS). So far my instincts say no... but before I spend too much time on solution I thought I'd check here. Thanks! BB I have the following: Quote: <div class="video"> <h1>Header</h1> <p><a href="#" title="title"><img src="images/01.jpg" alt="alt" width="150" height="150" class="img-left border"/></a></p> <div class="redBG border" style="margin-left:180px;"> <p><strong>Content</strong></p> </div> </div> <div class="video"> <h1>Header</h1> <p><a href="#" title="title"><img src="images/01.jpg" alt="alt" width="150" height="150" class="img-left border"/></a></p> <div class="redBG border" style="margin-left:180px;"> <p><strong>Content</strong></p> </div> </div> Not the nicest of code but it'll do for now. I want each div with class=video to come under one another but at the moment, the 2nd div starts just after the text in the first div and not actually under it. This is in the middle column of a 3 column CSS layout. The bottom is what the .video class has. Quote: .video { margin-bottom:10px; } Any help? I'm a CSS newbie, so forgive me if I'm going about this the wrong way entirely. I'm trying to build a website with a menu that changes the source of an iFrame. So I have: Code: <html> <body> <div>**MENU**</div> <div><iframe id="contentFrame" src="home.htm"></iframe></div> </body> </html> Clicking a menu item, say "Contact Us", changes the src of the iFrame using: Code: <a href="javascript:document.getElementById('contentFrame').src='ContactUs.htm'">Contact Us</a>
The menu is pure CSS, with each item underlining as it's rolled over, and some submenus that show up when hovering. What I'm looking to do is have the selected menu item have a different text color. So when you click "Contact Us", that item will change color and stay that other color while navigating the ContactUs.htm page in the iFrame. Is that even remotely do-able? I saw some examples where you use body classes and id's to match the id of the menu item to the body class of the related page. However, I think that would require loading completely separate pages (with the same menu, header, and footer code). I want to avoid the entire page flickering when changing content. I don't seem to be able to access the body class value of the page being loaded in the iFrame. Is that possible to do? Thanks for any guidance you all could offer. Hi to all I am pasting here the code where i have problem [ 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=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> .mainUL { float: left; list-style: none; line-height: 1; font-weight: bold; padding:0; font-size:12px; margin:0; text-align:center; vertical-align:middle; border:2px solid #000000; border-bottom:none; /*border-left:none;*/ border-top:none; /*margin-left:63px;*/ border:1px solid red; width:294px; height:150px; margin-top:40px; margin-left:300px; } .mailULLI { background:#FFFF99; float: left; width: 12em; color:#000000; padding:5px 0 5px 0; border:2px solid #000000; border-left:none; border-bottom:none; text-align:center; margin:0; border:1px solid blue; height:15px; } .innerUL { width:100px; height:30px; border:1px solid red; display:none; margin-top:-52px; } </style> <script language="javascript"> function showpopup(id) { var id=document.getElementById(id); id.style.display='block'; } function hidepopup(id) { var id=document.getElementById(id); id.style.display='none'; } </script> </head> <body> <ul class="mainUL"> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 1</a> <ul id="popup" class="innerUL"> </ul> </li> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 2</a> <ul id="popup" class="innerUL"> </ul> </li> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 3</a> <ul id="popup" class="innerUL"> </ul> </li> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 4</a> <ul id="popup" class="innerUL"> </ul> </li> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 5</a> <ul id="popup" class="innerUL"> </ul> </li> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 6</a> <ul id="popup" class="innerUL"> </ul> </li> </ul> </body> </html> [/code] Currently when i mouseover the "click here 1" a popup open above it its fine I want when i mouse over the "click here 2 " pop up should open above it same when i mouse over the "click here 3 " the popup should open over the click here 1 cell .you can say it popup start at the end of "click here 3 " cell and go above when i mouseover the "click here 4 " then popup open over the "click here 2" and its left start at the start of "click here 2" cell thanks in advance Here's a format of my css script.. im under blogspot.com's url. I am changing some details of their template ive chosen... like the comments, dates, text header, archives and sorts instead of the common text header, i would like to change it with a full linear header embedded (left to right as displayed on the screen) i was browsing sites, but i could not any css script that could copy and change the image url.. here it goes... please do edit/add as to my preference are... by the way, i will still use blogspot.com's photo upload feature and posting.. lastly i would like to have a navigation bar (links) following the 'embedded' top linear header (jpeg.format,as supported by a web host). some what like thishovered) MAIN SEARCH SITEMAP .... the sequence would be: LINEAR HEADER (jpeg format) BACKGROUND( see below: ****) Within the background the Navigation Line will start.. ------ blogspot posts will follow... ( my current css format. ------------ Code: [CPAN][
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "(URL address blocked: See forum rules)">
<html xmlns="(URL address blocked: See forum rules)" xml:lang="en" lang="en">
<head>
<title><$BlogPageTitle$></title>
<$BlogMetaData$>
<style type="text/css">
/* IMAGE EFFECTS */
a:hover img { filter:none; }
img { filter:gray; }
body {
background-image:url ((URL address blocked: See forum rules)); background-position:center;
margin:0;
padding:45px 25px;
font:x-small trebuchet,verdana, serif;
text-align:center;
color:#cccccc;
font-size/* */:/**/small;
font-size: /**/small;}
/* IMAGE EFFECTS */
a:hover img { filter:none; }
img { filter:gray; }
a:link {
color:#ccc;
text-decoration:none;
}
a:visited {
color:#F0F0F0;
text-decoration:none;
}
a:hover {
color:#993300;
text-decoration:none;
}
a img {
border-width:0;
}
/* CURSOR: BODY */
body { cursor:crosshair; }
/* CURSOR: LINKS */
body { cursor:crosshair; }
/* Header
----------------------------------------------- */
@media all {
#header {
width:660px; length:1024px;
margin:0 auto 10px;
border:1px solid #333;
}
}
@media handheld {
#header {
width:90%;
length:100;
}
}
/* Content
----------------------------------------------- */
@media all {
#content {
width:660px;
margin:60 auto;
padding:0;
text-align:left;
}
#main {
width:410px;
float:left;
}
#sidebar {
width:210px;
float:right;
}
}
@media handheld {
#content {
width:90%;
}
#main {
width:50%;
float:none;
}
#sidebar {
width:100%;
float:left;
}
}
/* Headings
----------------------------------------------- */
/* Posts
----------------------------------------------- */
@media all {
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #444;
padding-bottom:1.5em;
}
}
@media handheld {
.post {
padding:0 1.5em 0 1.5em;
}
}
.post-title {
margin:.25em 0 0;
padding:0 0 4px;
font-size:120%;
line-height:1.4em;
color:#ad9;
}
.post-title a {
text-decoration:none;
color:#ad9;
}
.post-title a:hover {
color:#fff;
}
.post img {
padding:4px;
border:1px solid #222;
}
/* Comments
----------------------------------------------- */
/* Sidebar Content
----------------------------------------------- */
#sidebar ul {
margin:0 0 1.5em;
padding:0 0 1.5em;
border-bottom:1px dotted #444;
list-style:none;
}
#sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-align:left;
text-indent:-15px;
line-height:1.5em;
}
#sidebar p {
color:#999;
line-height:1.5em;
}
/* Profile
----------------------------------------------- */
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
}
#footer hr {
display:none;
}
#footer p {
margin:0;
padding-top:15px;
font:78%/1.6em "Trebuchet MS",Trebuchet,Verdana,Sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
}
</style>
</head>
<body>
<!-- Begin #content -->
<div id="content">
<bgsound src="(URL address blocked: See forum rules)"loop="-1" /> MUSIC background. as is!
<!-- Begin #main -->
<div id="main"><div id="main2">
<Blogger>
<!-- Begin .post -->
<div class="post"><a name="<$BlogItemNumber$>"></a>
<div class="post-body">
<div>
<$BlogItemBody$>
</div>
</div>
</p>
</div>
<!-- End .post -->
<!-- Begin #comments -->
<!-- End #comments -->
<!-- begin code provided by createblog.com -->
<script language="JavaScript">
var message=" You are viewing ?????.";
function click(e) {
if (document.all) {
if (event.button==2||event.button==3) {
alert(message);
return false;
}
}
if (document.layers) {
if (e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
// -->
</SCRIPT>
<!-- end code provided by createblog.com -->
</Blogger>
</div></div>
<!-- End #main -->
<!-- Begin #sidebar -->
<div id="sidebar"><div id="sidebar2">
<br> <br> <br> <br><br> <br><br> <br>
<ul>
< a href="http://other links"
style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px;" >HOME</a></li><br><br></a>
<a href="http://other links"
style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px;">SEARCH </a></li><br><br>
</ul> </MainOrArchivePage>
<MainOrArchivePage>
</MainOrArchivePage>
<!-- begin code -->
<a href>
<!-- end code -->
<!-- begin code -->
</a> <a href=style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 11px;" ></a>
<SCRIPT Language="JavaScript">
<!-- hide from old browsers
var curDateTime = new Date()
document.write(curDateTime)
//-->
</SCRIPT>
<!-- end code -->
<!--
<p>This is a paragraph of text that could go in the sidebar.</p>
-->
</div></div>
<!-- End #sidebar -->
</div>
<!-- End #content -->
<!-- Begin #footer -->
<div id="footer"><hr />
<p><!--Thank you for visiting!--> </p>
</div>
<!-- End #footer -->
</body>
</html>
</body>
</html>][/CPAN]
Hi to all I am pasting here the code where i have problem <!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=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> .mainUL { float: left; list-style: none; line-height: 1; font-weight: bold; padding:0; font-size:12px; margin:0; text-align:center; vertical-align:middle; border:2px solid #000000; border-bottom:none; /*border-left:none;*/ border-top:none; /*margin-left:63px;*/ border:1px solid red; width:294px; height:150px; margin-top:40px; margin-left:300px; } .mailULLI { background:#FFFF99; float: left; width: 12em; color:#000000; padding:5px 0 5px 0; border:2px solid #000000; border-left:none; border-bottom:none; text-align:center; margin:0; border:1px solid blue; height:15px; } .innerUL { width:100px; height:30px; border:1px solid red; display:none; margin-top:-52px; } </style> <script language="javascript"> function showpopup(id) { var id=document.getElementById(id); id.style.display='block'; } function hidepopup(id) { var id=document.getElementById(id); id.style.display='none'; } </script> </head> <body> <ul class="mainUL"> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 1</a> <ul id="popup" class="innerUL"> </ul> </li> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 2</a> <ul id="popup" class="innerUL"> </ul> </li> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 3</a> <ul id="popup" class="innerUL"> </ul> </li> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 4</a> <ul id="popup" class="innerUL"> </ul> </li> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 5</a> <ul id="popup" class="innerUL"> </ul> </li> <li class="mailULLI"> <a href="#" onmouseover="showpopup('popup')" onmouseout="hidepopup('popup')">Click Here 6</a> <ul id="popup" class="innerUL"> </ul> </li> </ul> </body> </html> Currently when i mouseover the "click here 1" a popup open above it its fine I want when i mouse over the "click here 2 " pop up should open above it same when i mouse over the "click here 3 " the popup should open over the click here 1 cell .you can say it popup start at the end of "click here 3 " cell and go above when i mouseover the "click here 4 " then popup open over the "click here 2" and its left start at the start of "click here 2" cell thanks in advance Hi all, Im new to the forum.....and quite new to all things web! Ive just inherited a website at work that I have to update but now im stuck! I have a menubar done as a <UL> <LI>, the cell names are populated from a database using php, as depending on the login depends on what the user sees. Theres quite a comprehensive CSS sheet for the site with various #nav tags relating to the menu bar. ok so ive worked out the css for the hover (it changes the text and background color) but what I now need it to do is stay in the hover colours onClick? this will show the user what page they are on. I would go down the javascript route however the php confuses me a little and i just want to modify whats there. Any help greatly recieved. Thanks Mike Hi Is it possible to make some kind of Div: onclick that it opens a link? I made a box with a link inside it of 200px wide and 30px high. Is it possible that if you click anywhere in the box that a link opens? Thanks -------------- EDIT: got it to work by just added <a href infront of the div tag.. So obvious, sorry. sorry for the double post - reworded the question and reposted. Good day to you all, I'm working on a piece of code which display an image and when you click on it a full size image appears on a css box. I was wondering how can I center it on the screen, knowing the size will be different for each.... Code:
<img src="Web/ThePonder/The Ponder.png" width="160" onmouseover='this.style.cursor="pointer" ' onfocus='this.blur();' onclick="document.getElementById('Ponder').style.display = 'block' " />
<div id='Ponder' class='Ponder' style='display: none; position: absolute; margin: 0px auto -1px auto; border: dashed black 1px; padding: 10px; background-color: rgb(255,255,225); text-align: justify; font-size: 12px; ' onfocus='this.blur();' onclick="document.getElementById('Ponder').style.display = 'none' " onmouseover='this.style.cursor="pointer" '>
<img src="Web/ThePonder/The Ponder.png" width="500" />
<br />
</div>
If someone can help me understand how I can do this. Thanks ! |
|||||||