|
CSS - Editing A Dynamic-fx Slide-in Menu
Hey all,
I downloaded this DHTML script for a Dynamic-Fx Slide-In Menu from http://www.dynamicdrive.com and i'm facing some trouble. The menu suits my needs perfectly with only 1 problem. I want to position the menu in a fixed location on my website somewhere other than the edge of the screen, so i adjust the xy coordinates in the ssmItems.js file to do so...the problem is that the menu changes location depending on whether the window is maximized or not and on the resolution of the monitor. I want it to stay in 1 place ALWAYS! How? PLEASE HELP! there are two .js files associated with this scrip, ssmItems.js & ssm.js and a bit of html in the <head> section of the file into which the menu is placed. Please find all 3 below: HTML code in <head> section: <STYLE> <!-- A.ssmItems:link {color:black;text-decoration:none;} A.ssmItems:hover {color:black;text-decoration:none;} A.ssmItems:active {color:black;text-decoration:none;} A.ssmItems:visited {color:black;text-decoration:none;} //--> </STYLE> <SCRIPT SRC="ssm.js" language="JavaScript1.2"> </SCRIPT> <SCRIPT SRC="ssmItems.js" language="JavaScript1.2"></SCRIPT> <script type="text/javascript"> Code from ssmItems.js file <!-- /* Configure menu styles below NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors */ YOffset=188; // no quotes!! XOffset=0; staticYOffset=30; // no quotes!! slideSpeed=20 // no quotes!! waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it. menuBGColor="feb300"; menuIsStatic="yes"; //this sets whether menu should stay static on the screen menuWidth=210; // Must be a multiple of 10! no quotes!! menuCols=2; hdrFontFamily="Arial"; hdrFontSize="2"; hdrFontColor="#feb300"; hdrBGColor="#000066"; hdrAlign="left"; hdrVAlign="center"; hdrHeight="15"; linkFontFamily="arial"; linkFontSize="2"; linkBGColor="white"; linkOverBGColor="#feb300"; linkTarget="_top"; linkAlign="Left"; barBGColor="#feb300"; barFontFamily="Arial"; barFontSize="2"; barFontColor="#000066"; barVAlign="center"; barWidth=20; // no quotes!! barText="RESOURCES MENU"; // <IMG> tag supported. Put exact html for an image to show. /////////////////////////// // ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header ssmItems[0]=["Apologetics Resources"] //create header ssmItems[1]=["Christ the Teacher Series", "http://www.lumenverum.org",""] ssmItems[2]=["Lord of History Series", "http://www.lumenverum.org",""] ssmItems[3]=["Other Booklets", "http://www.lumenverum.org", ""] ssmItems[4]=["Catholic Q&A Message Board", "http://www.lumenverum.org", ""] ssmItems[5]=["Ask us a question directly", "http://www.lumenverum.org", ""] ssmItems[6]=["LVA Catalogue"] //create header ssmItems[7]=["Books", "http://www.lumenverum.org", ""] ssmItems[8]=["Tapes / CD's", "http://www.lumenverum.org", ""] ssmItems[9]=["Other", "http://www.lumenverum.org", ""] ssmItems[10]=["Lumen Verum's..."] ssmItems[11]=["Consitution", "http://www.lumenverum.org", ""] ssmItems[12]=["Patron Saint", "http://www.lumenverum.org", ""] buildMenu(); //--> Code from ssm.js file NS6 = (document.getElementById&&!document.all) IE = (document.all) NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4") tempBar='';barBuilt=0;ssmItems=new Array(); moving=setTimeout('null',1) function moveOut() { if ((NS6||NS)&&parseInt(ssm.left)<0 || IE && ssm.pixelLeft<0) { clearTimeout(moving);moving = setTimeout('moveOut()', slideSpeed);slideMenu(10)} else {clearTimeout(moving);moving=setTimeout('null',1)}}; function moveBack() {clearTimeout(moving);moving = setTimeout('moveBack1()', waitTime)} function moveBack1() { if ((NS6||NS) && parseInt(ssm.left)>(-menuWidth) || IE && ssm.pixelLeft>(-menuWidth)) { clearTimeout(moving);moving = setTimeout('moveBack1()', slideSpeed);slideMenu(-10)} else {clearTimeout(moving);moving=setTimeout('null',1)}} function slideMenu(num){ if (IE) {ssm.pixelLeft += num;} if (NS||NS6) {ssm.left = parseInt(ssm.left)+num;} if (NS) {bssm.clip.right+=num;bssm2.clip.right+=num;}} function makeStatic() { if (NS||NS6) {winY = window.pageYOffset;} if (IE) {winY = document.body.scrollTop;} if (NS6||IE||NS) { if (winY!=lastY&&winY>YOffset-staticYOffset) { smooth = .2 * (winY - lastY - YOffset + staticYOffset);} else if (YOffset-staticYOffset+lastY>YOffset-staticYOffset) { smooth = .2 * (winY - lastY - (YOffset-(YOffset-winY)));} else {smooth=0} if(smooth > 0) smooth = Math.ceil(smooth); else smooth = Math.floor(smooth); if (IE) bssm.pixelTop+=smooth; if (NS6||NS) bssm.top=parseInt(bssm.top)+smooth lastY = lastY+smooth; setTimeout('makeStatic()', 1)}} function buildBar() { if(barText.indexOf('<IMG')>-1) {tempBar=barText} else{for (b=0;b<barText.length;b++) {tempBar+=barText.charAt(b)+"<BR>"}} document.write('<td align="center" rowspan="100" width="'+barWidth+'" bgcolor="'+barBGColor+'" valign="'+barVAlign+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD>')} function initSlide() { if (NS6){ssm=document.getElementById("thessm").style;bssm=document.getElementById("basessm").style; bssm.clip="rect(0 "+document.getElementById("thessm").offsetWidth+" "+document.getElementById("thessm").offsetHeight+" 0)";ssm.visibility="visible";} else if (IE) {ssm=document.all("thessm").style;bssm=document.all("basessm").style bssm.clip="rect(0 "+thessm.offsetWidth+" "+thessm.offsetHeight+" 0)";bssm.visibility = "visible";} else if (NS) {bssm=document.layers["basessm1"]; bssm2=bssm.document.layers["basessm2"];ssm=bssm2.document.layers["thessm"]; bssm2.clip.left=0;ssm.visibility = "show";} if (menuIsStatic=="yes") makeStatic();} function buildMenu() { if (IE||NS6) {document.write('<DIV ID="basessm" style="visibility:hidden;Position : Absolute ;Left : '+XOffset+' ;Top : '+YOffset+' ;Z-Index : 20;width:'+(menuWidth+barWidth+10)+'"><DIV ID="thessm" style="Position : Absolute ;Left : '+(-menuWidth)+' ;Top : 0 ;Z-Index : 20;" onmouseover="moveOut()" onmouseout="moveBack()">')} if (NS) {document.write('<LAYER name="basessm1" top="'+YOffset+'" LEFT='+XOffset+' visibility="show"><ILAYER name="basessm2"><LAYER visibility="hide" name="thessm" bgcolor="'+menuBGColor+'" left="'+(-menuWidth)+'" onmouseover="moveOut()" onmouseout="moveBack()">')} if (NS6){document.write('<table border="0" cellpadding="0" cellspacing="0" width="'+(menuWidth+barWidth+2)+'" bgcolor="'+menuBGColor+'"><TR><TD>')} document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+barWidth+2)+'" bgcolor="'+menuBGColor+'">'); for(i=0;i<ssmItems.length;i++) { if(!ssmItems[i][3]){ssmItems[i][3]=menuCols;ssmItems[i][5]=menuWidth-1} else if(ssmItems[i][3]!=menuCols)ssmItems[i][5]=Math.round(menuWidth*(ssmItems[i][3]/menuCols)-1); if(ssmItems[i-1]&&ssmItems[i-1][4]!="no"){document.write('<TR>')} if(!ssmItems[i][1]){ document.write('<td bgcolor="'+hdrBGColor+'" HEIGHT="'+hdrHeight+'" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'" WIDTH="'+ssmItems[i][5]+'" COLSPAN="'+ssmItems[i][3]+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+ssmItems[i][0]+'</b></font></td>')} else {if(!ssmItems[i][2])ssmItems[i][2]=linkTarget; document.write('<TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="'+ssmItems[i][5]+'" COLSPAN="'+ssmItems[i][3]+'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%" ALIGN="'+linkAlign+'"><DIV ALIGN="'+linkAlign+'"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+ssmItems[i][1]+'" target="'+ssmItems[i][2]+'" CLASS="ssmItems">'+ssmItems[i][0]+'</DIV></LAYER></ILAYER></TD>')} if(ssmItems[i][4]!="no"&&barBuilt==0){buildBar();barBuilt=1} if(ssmItems[i][4]!="no"){document.write('</TR>')}} document.write('</table>') if (NS6){document.write('</TD></TR></TABLE>')} if (IE||NS6) {document.write('</DIV></DIV>')} if (NS) {document.write('</LAYER></ILAYER></LAYER>')} theleft=-menuWidth;lastY=0;setTimeout('initSlide();', 1)} Similar TutorialsHi All, I've got one of those wonderful CSS/javascript flyout menu's running on my website which is causing me a little bit of grief in Firefox and Safari. Firefox and Safari seem to be placing the 2nd and 3rd level items of the menu underneath all the other content on the page and therefore can't be seen. Seems to work well on Opera and IE. Here are the screen shots of what is happening in each browser: http://dev.platforminteractive.com.au/cssissue/css_ff.jpg - firefox http://dev.platforminteractive.com.au/cssissue/css_opera.jpg - opera http://dev.platforminteractive.com.au/cssissue/css_ie.jpg - ie You can take a look at the site and the coding behind it at http://dev.platforminteractive.com.au - just in development atm but this nav is causing me some grief. Well I honestly have no idea which forum to stick this in so I'll start here? As the title says I'm trying to make a simple css tab menu, except I'm making it very difficult lol. The problem that I'm having is not only must the tabs be able to expand and contract depending on the content/word inserted, and also if a new category is created it must create another tab. There will always be one tab present labeled home/index/etc., centered in the design. Like this As a new category/page is created/included via php a new tab shows and they stay centerd. Like this This goes on to make a total of six tabs. As of right now I was planning on using these mac style tabs for the tab images but that seems to be whats making this the most diffucult.Especially since I wanted to use a diffrent tab image for the tabs when they are selected. This would be pretty straightforward in a table layout but I'm really trying for a completely css page. I would greatly appreciate any advice if this even sounds possible the way I described, some other way possibly, or if I'm just shooting for a pipedream. Thanks very much in advance. Hi , I followed this tutorials (http://matthewjamestaylor.com/blog/centered-dropdown-menus) and was successfully able to create a dynamic menu . At the moment the menu displays just one drop down and not multi submenus drop-downs. Can anybody tell me what can i add to implement something like ? Tab1 Tab2 Link 1 > Link1.1 Link1.2 Link2 . My css code is :- body{behavior:;} body{behavior:url(cssHoverFix.htc);} /* Main menu settings */ #centeredmenu { clear:both; float:left; margin:0; padding:0; border-bottom:1px solid #000; /* black line below menu */ width:100%; font-family:Verdana, Geneva, sans-serif; /* Menu font */ font-size:90%; /* Menu text size */ z-index:1000; /* This makes the dropdown menus appear above the page content below */ position:relative; } /* Top menu items */ #centeredmenu ul { margin:0; padding:0; list-style:none; float:right; position:relative; right:50%; } #centeredmenu ul li { margin:0 0 0 1px; padding:0; float:left; position:relative; left:50%; top:1px; } #centeredmenu ul li a { display:block; margin:0; padding:.6em .5em .4em; font-size:1em; line-height:1em; background:#ddd; text-decoration:none; color:#444; font-weight:bold; border-bottom:1px solid #000; } #centeredmenu ul li.active a { color:#fff; background:#000; } #centeredmenu ul li a:hover { background:#36f; /* Top menu items background colour */ color:#fff; border-bottom:1px solid #03f; } #centeredmenu ul li:hover a, #centeredmenu ul li.hover a { /* This line is required for IE 6 and below */ background:#36f; /* Top menu items background colour */ color:#fff; border-bottom:1px solid #03f; } /* Submenu items */ #centeredmenu ul ul { display:none; /* Sub menus are hidden by default */ position:absolute; top:2em; left:0; float:left; right:auto; /*resets the right:50% on the parent ul */ width:10em; /* width of the drop-down menus */ } #centeredmenu ul ul li { left:auto; /*resets the left:50% on the parent li */ margin:0; /* Reset the 1px margin from the top menu */ clear:left; float:left; width:100%; } #centeredmenu ul ul li a, #centeredmenu ul li.active li a, #centeredmenu ul li:hover ul li a, #centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */ font-size:.8em; font-weight:normal; /* resets the bold set for the top level menu items */ background:#eee; color:#444; line-height:1.4em; /* overwrite line-height value from top menu */ border-bottom:1px solid #ddd; /* sub menu item horizontal lines */ float:left; width:100%; } #centeredmenu ul ul li a:hover, #centeredmenu ul li.active ul li a:hover, #centeredmenu ul li:hover ul li a:hover, #centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */ background:#36f; /* Sub menu items background colour */ color:#fff; float:left; } /* Flip the last submenu so it stays within the page */ #centeredmenu ul ul.last { left:auto; /* reset left:0; value */ right:0; /* Set right value instead */ } #centeredmenu ul ul.last li { float:right; position:relative; right:.8em; } /* Make the sub menus appear on hover */ #centeredmenu ul li:hover ul, #centeredmenu ul li.hover ul { /* This line is required for IE 6 and below */ display:block; /* Show the sub menus */ } Html Code is :-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <html> <LINK REL=StyleSheet HREF="nat.css" TYPE="text/css" MEDIA=screen> <body> <div id="centeredmenu"> <ul> <li><a href="#">Tab one</a> <ul> <li><a href="#">Link one</a></li> <li><a href="#">Link two</a></li> <li><a href="#">Link three</a></li> <li><a href="#">Link four</a></li> <li><a href="#">Link five</a></li> </ul> </li> <li class="active"><a href="#" class="active">Tab two</a> <ul> <li><a href="#">Link one</a></li> <li><a href="#">Link two</a></li> <li><a href="#">Link three</a></li> <li><a href="#">Link four</a></li> <li><a href="#">Link five is a long link that wraps</a></li> </ul> </li> <li><a href="#">Long tab three</a> <ul> <li><a href="#">Link one</a></li> <li><a href="#">Link two</a></li> <li><a href="#">Link three</a></li> <li><a href="#">Link four</a></li> <li><a href="#">Link five</a></li> </ul> </li> <li><a href="#">Tab four</a> <ul class="last"> <li><a href="#">Link one</a></li> <li><a href="#">Link two</a></li> <li><a href="#">Link three</a></li> <li><a href="#">Link four</a></li> <li><a href="#">Link five</a></li> </ul> </li> </ul> </div> </body> </html> Regards, Umair I have a simplistic tab menu. The tabs should stretch to fit the text in it. The blank area after the last tab should fit to the end of the table as well. It was working before, but a change in text-length caused issues so apparently it was not truly dynamic. Here's the coding. If you have a solution using XHTML that is fine but it must work within other tables that are not XHTML-COMPLIANT, else it will screw up. HTML Code: <table class='tab_thin_table'> <tr> <td class='tab_start_on' rowspan='2'></td> <td class='tab_bg_on' rowspan='2'><span class='header_text'><a href='|LINK|'>LINK ONE</a></span></td> <td class='tab_end_on' rowspan='2'></td> <td class='tab_start_off' rowspan='2'></td> <td class='tab_bg_off' rowspan='2'><span class='header_text'><a href='|LINK|'>LINK TWO</a></span></td> <td class='tab_end_off' rowspan='2'></td> <td class='tab_start_off' rowspan='2'></td> <td class='tab_bg_off' rowspan='2'><span class='header_text'><a href='|LINK|>LINK THREE</a></span></td> <td class='tab_end_off' rowspan='2'></td> <td class='tab_start_off' rowspan='2'></td> <td class='tab_bg_off' rowspan='2'><span class='header_text'><a href='|LINK|'>LINK FOUR</a></span></td> <td class='tab_end_off' rowspan='2'></td> <td class='tab_thin_spacer'></td> </tr> <tr> <td class='tab_thin_top'></td> </tr> </table> CSS Code:
.tab_thin_table
{
width: 578px;
vertical-align: top;
}
.tab_thin_top
{
height: 1px;
// DYNAMIC
background-color: #6E7073;
}
.tab_thin_spacer
{
height: 19px;
// DYNAMIC
}
.tab_start_on
{
width: 6px;
height: 20px;
background: url(../../image/site/tab_start_on.gif);
background-repeat: no-repeat;
}
.tab_bg_on
{
background: url(../../image/site/tab_bg_on.gif);
// DYNAMIC
height: 20px;
}
.tab_end_on
{
width: 10px;
height: 20px;
background: url(../../image/site/tab_end_on.gif);
background-repeat: no-repeat;
}
.tab_start_off
{
width: 6px;
height: 20px;
background: url(../../image/site/tab_start_off.gif);
background-repeat: no-repeat;
}
.tab_bg_off
{
background: url(../../image/site/tab_bg_off.gif);
// DYNAMIC
height: 20px;
}
.tab_end_off
{
width: 10px;
height: 20px;
background: url(../../image/site/tab_end_off.gif);
background-repeat: no-repeat;
}
Im trying to make a link that is based on 2 images, one for the un-hovered or normal state, and the other for the hover state. I just did 2 of these at 3dotmedia.com/redesign and now I'm trying to do the same thing at greedydogkennel.com/redesign but it WILL NOT WORK. I am totally stumped, it has to be something to do with the positioning inside my css I assume... on the page, I want the pictures of the dogs to be normal, but when hovered I have a frosty shaded grey image (as in some kind of lighting) to serve as the hover state..I am masking the a href with a class with a transparent .gif (since SOMETHING has to serve as the object of the anchor yes?) but here is my css: .rock-link {background-image: url(looks/Rock_small_w_frame.jpg); } .rock-link:hover {background-image: url(looks/Rock_small_w_frame-up.jpg); } .suade-link {background-image: url(looks/Suadey_Ladysmall_w_frame.jpg); } .suade-link:hover {background-image: url(looks/Suadey_Ladysmall_w_frame-up.jpg); } and the HTML is as follows: <a href="suade.html" class="suade-link"><img src="looks/seethru2.gif" border="0"/></a> <img src="looks/spacer2.gif" border="0" /> <a href="rock.html" class="rock"><img src="looks/seethru.gif" border="0" /></a></div> but there is nothing that displays, only the transparent .gif on the index page you will not see any images under the heading "The Dogs" because this is where the problem is, but if you click on any of the links you will see the pages where I have not applied the class for the a href to take on the hover states, just so you can see how the images look and where they appear. I have done this so many times, and my code is IDENTICAL at 3dotmedia.com/redesign and it works fine...any help would be GREATLY appreciated...it has to be something Im missing, but WHAT?!?!? thanks. Thanks for taking the time to read my question. I've almost got what I want. I would like my link, on hover, to "slide" to the right a bit and change background color. My problem is the flickering. I think it's because I'm using a class on the <li> and a class on the <a>, but I'm not sure how else to accomplish what I'm trying to do. I know it would be better if I didn't have a class on the <a>.... I think. Any ideas? Thanks, Brad HTML: 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <title></title> <link href="Nav.css" rel="stylesheet" type="text/css"/> </head> <body> <ul class="NavList"> <li class="NavListItem1"><a href="#" class="NavListItem">Home</a></li> <li class="NavListItem2"><a href="#" class="NavListItem">About</a></li> <li class="NavListItem3"><a href="#" class="NavListItem">Contact</a></li> </ul> </body> </html> CSS: Code: ul.NavList {
List-style-type: none;
border-left: solid 5px #3366CC;
padding: 0px;
margin: 0px;
}
.NavListItem {
color: #000000;
background-color: aqua;
display: block;
width: 60px;
padding-left: 3px;
}
.NavListItem1 a:hover {
width: 50px;
display: block;
margin-left: 5px;
background-color: red;
width: 60px;
padding-left: 3px;
}
.NavListItem2 a:hover {
width: 50px;
display: block;
margin-left: 5px;
background-color: green;
width: 60px;
padding-left: 3px;
}
.NavListItem3 a:hover {
width: 50px;
display: block;
margin-left: 5px;
background-color: orange;
width: 60px;
padding-left: 3px;
}
ok im messing around with the css of some text within php... Code: "<p style=\"background: #e4ebeb; border: 1px solid #555555; padding: 6px;\"><span style=\"font: bold 10px Courier New;\"><div class=\"quote_header\">Quote by * :</div> <div class=\"quote_body\">*</div></span><br/>" ); a few questions... how would i make.. Quote by * : appear blue and have the * bold? i have tried adding <strong> and <b> at either side of the * and the php code just echos out <strong> or <b> I was wondering if anyone could explain how this works. http://alt-web.com/DEMOS/CSS-Disjoi...-Rollover.shtml What I am not understanding is the role of the: <div id="defaultImage"> <img src="DefaultImage.jpg" /></div> and the <div id="Relative"></div> what do they do and why are they needed? Or maybe you cold steer me in a direction. Thank you Hello, I'm using a 'slide-out' navigation on an intranet, however I need it to go to a 3rd level and for the life of me I cannot get the combonation for expanding the list to 3 levels. Here is a 'demo' of what I'm trying to do, if you go to Office support, and resources it needs to come out when you hover. DEMO *This site was designed with IE 6.0 in mind. Code: /*Navigational CSS*/
#navigation ul
{
position: absolute;
margin: 0;
padding: 0;
list-style: none;
width: 185px; /* Width of Menu Items */
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
font-family:"trebuchet MS", Garamond, arial;
}
#navigation li
{
position: relative;
}
#navigation a
{
display: block;
}
#navigation li ul
{
left: 185px;
top: -0px;
display: none;
}
#navigation ul li a, #navigation li a
{
display: block;
text-decoration: none;
color: #fff;
background-color: #0F2344;
padding: 3px;
font-family:"trebuchet MS", Garamond, arial;
}
#navigation li
{
position: relative;
z-index: 10;
}
#navigation li ul li
{
position: relative;
z-index: 15;
}
#navigation ul li a:hover, #navigation li a:hover
{
color: #000;
background: #467BB4;
}
#navigation li ul li a
{
padding: 2px 5px;
}
#navigation li:hover ul, #navigation li.over ul
{
display: block;
}
Thanks for the assistance.. Greetings, Several years ago, I use to make many, many websites for a hobby. However, with work and other responsibilities (and moving to China), I have had my hands full. However, I am in the process of trying to open my own Education Center in China, and would like to develop a site. Much has changed, though, and I have also forgotten much. I never used CSS in my old sites, but now it seems almost all templates have CSS. I downloaded a free template, and am in the process of editing it. I can stumble through much of it and figure it out, but I am having trouble with the top and bottom menus of my site. I have two flags on the top menu that I need to change the alignment on. I want them to be closer together, and vertically aligned in the middle. I have fiddled with the code, but only make it worse. Also, I want the top and bottom menu to be perfectly centered, but the only way I can adjust them are be tweaking some numbers, and cannot do it with the center code. Some help would be MUCH appreciated for this old dog. My site is concord(dash)sihai(dot)com. As you can see, the flag position is correct, but the spacing between them is not. And they have inherited the rollover, background effect, which is not what I want. Thanks, Shawn I am trying to edit widths of my content tab div. Couldnt figure how. http://www.pearl.ru/isdunyasi/test2.asp I am using this tab content: http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm 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. I don't know if this is a weird question or not, but this is what I was thinking of doing... I was going to build my footer to extend a couple hundred pixels below the actual footer content, then use a png with transparency gradient to blend the bottom of the footer back into the page background to account for pages with very limited content on them where the footer may not be close to the actual bottom of the browser window. The problem I ran into when trying to do this was trying to stop the page from including the bottom of the footer on longer pages when there WAS enough content to push the footer to the bottom. I tried a couple different ways, setting various div positions and sliding them off screen, but they just causes the browser to stretch farther to display the entire footer. So, is this something you can do? I seem to remember playing around with a 'sticky footer' a little while back that moved content off screen, but I don't remember what caused this. Thanks for any help. I've been toying with this for some time and I've been messing with it so long that I probably wouldn't see the problem if i was hit with a brick. Essentially the link posted is to an html page where I have a portion of the left side of my main page. This page will have vertically listed navigation which upon hover will slide out a panel and so on. I cannot seem to get the elements correct, the sliding out list items are correct but the other main listing is not sitting correctly, and the navigation box gets all elongated when I hover. This code and page is designed to work with IE 6x for work. Any help would be appreciated. Thanks. http://mcpherson-racing.com/dave/Slideout.htm Also I'm wondering if you see a problem with the page and the navigation that I'm attempting to make, Also if you have any design tips for this 'demo' I'd be happy to hear them.... I'm a bit lost on the 'footer' what to put there... http://mcpherson-racing.com/dave/demo2.htm The site isn't done, its about 30% so I know links are busted and not pointing to the right places. I'm trying to use a jQuery script to create a tabbed slide-out on the right side of the screen. At this point, the slide-out plug-in is not an option. Here's the jQuery script: Code: $('#sideTabMain .button').toggle(function() {
$('#sideTab').animate({right:'0px'}, {queue:false, duration: 500});
}, function() {
$('#sideTab').animate({right:'-650px'}, {queue:false, duration: 500});
});
And the basic CSS for the div: Code: #sideTab {
position: absolute;
z-index: 1000;
top: 50px;
right: -650px
}
The issue is CSS-related. You can still see the slide-out div when you scroll over to the right (off the screen). How do I hide this? I tried putting the entire page in a CSS div with overflow: hidden but this completely removed the ability to scroll horizontally. Any ideas? Thanks for your help. I'm sure all of you have stumbled onto this at some point if you use Macromedia Dreamweaver. You're working on a CSS-driven layout and it looks perfect in multiple web browsers, but in the actual Dreamweaver design edit mode the page appears garbled and elements are out of place or you can't even see them. While it's not really a problem for you to update and work with the site, it would certainly be difficult for someone not familiar with it to change content and make updates. Does anyone know of a plug-in that would resolve this problem? Or perhaps does someone know what attributes or elements most often cause the problem in Dreamweaver? Does anyone know how to manipulate images within spliced tables? I need to manipulate them with CSS so that that bottom half of the image is revealed only when it is clicked or hovered over? ("images/Home.gif", "images/services.gif", "images/Contact.gif", "images/Gallery.gif") <!-- Save for Web Slices (BannerEdit.psd) --> <table id="Table_01" width="974" height="220" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="6"> <img src="images/SpliceBanner_01.jpg" width="974" height="137" alt=""></td> </tr> <tr> <td rowspan="3"> <img src="images/SpliceBanner_02.jpg" width="78" height="83" alt=""></td> <td rowspan="3"> <img src="images/Home.gif" width="208" height="83" alt=""></td> <td colspan="4"> <img src="images/SpliceBanner_04.jpg" width="688" height="1" alt=""></td> </tr> <tr> <td rowspan="2"> <img src="images/Services.gif" width="207" height="82" alt=""></td> <td colspan="3"> <img src="images/SpliceBanner_06.jpg" width="481" height="1" alt=""></td> </tr> <tr> <td> <img src="images/Contact.gif" width="205" height="81" alt=""></td> <td> <img src="images/Gallery.gif" width="198" height="81" alt=""></td> <td> <img src="images/SpliceBanner_09.jpg" width="78" height="81" alt=""></td> </tr> </table> <!-- End Save for Web Slices --> Hi, I have created a accordion menu using a spry widget built into Dreamweaver CS3. However I want to amend this so that the menu is collapsed until the user clicks on a category. Do I have to amend the CSS or the javascript to make it collapsed to begin with? Any help would be appericated. Thanks Gary I am a novice at web authoring. I am working a jQuery slide show. I would like to make this slide show automatically resize to fit the browser window. But the show is contained in a div element which requires a fixed size in pixels. When I try to substitute percentages for pixel values, the images no longer appear. Please advise if there is a way to accomplish this resizing. Due to a prohibition against posting URLs for new user accounts, I can't provide a link to the slide show I am trying to resize, or a link to an example of the resizing behavior which I would like to emulate. Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like: Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Now clicking [+] in front of Google.com will look like. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e. Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting. Here is the source for the above: 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" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>
<style type="text/css">
ul li ul {display:none;list-style-type: none;}
#myNav li a:hover {
color: blue;
}
#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}
#myNav { list-style-image: url(page.GIF); }
</style>
<script type="text/javascript">
<!--
function initNav() {
var navObj = document.getElementById('myNav');
var ulCollection = navObj.getElementsByTagName('li');
for (var loop = 0; loop < ulCollection.length; loop++) {
if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
/* we have an LI that contains a UL */
if (ulCollection[loop].getElementsByTagName('span').length > 0) {
/* there is at least one SPAN tag present */
ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
}
}
}
}
window.onload = initNav;
//-->
</script>
</head>
<body>
<ul id="myNav">
<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
<li><span></span><a href="http://www.google.com">Google.com</a>
<ul>
<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
<ul>
<li>*3*</li>
<li>*4*</li>
</ul>
</li>
</ul>
</li>
<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
<ul>
<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
</ul>
</li>
</ul>
</body>
</html>
Any help is really appreciated thanks. |
|||||||