|
CSS - Frustrated On A Dynamic Image-based Menu
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. Similar TutorialsHello! I am putting the finishing touches on a website for a client of mine, and even though the main menu works perfectly in Firefox 3.0.10, IE 7 and IE 8 both appear to add a CR/LF to the end of each menu button. The menu is CSS based, and uses ul and li tags. Here is the CSS Code: Code: @charset "ISO-8859-1";
#nav {
list-style: none;
margin: 0;
padding: 0;
}
/* This keeps the menu from interfering with the main content. */
#nav + *{
clear: left;
}
#nav ul {
padding: 0;
margin:0;
list-style: none;
z-index:99;
position:relative;
overflow:visible;
display:inline;
}
#nav > li ul {
text-align: center;
display:inline;
list-style-type:none;
}
#nav li { /* Appearance settings (eye candy) */
position: relative;
background: #E7E7E7;
/* background: url(trans/white80.png);*/
color: #00F;
border: solid 1px #AAA;
height: auto;
width: 6.5em;
max-width: 6.5em;
overflow: hidden;
font-weight: normal;
}
#nav ul ul {
width: 8em;
}
#nav > li {
margin: 0;
float: left;
text-align: center;
height: 3em;
overflow:hidden;
}
#nav a {
text-decoration: none;
padding: 0 0.5em;
line-height: 1.2em;
background: transparent;
color: inherit;
overflow: hidden;
}
#nav li li a {
line-height: normal;
/* TEST: Is This Better?
/* padding: 0.25em 0.5em; */
}
/* #nav ul, #nav li, #nav a{
* display: block;
}
#nav ul{
visibility: hidden;
}
/* (sub-)submenus */
#nav ul ul, #nav ul ul ul{
position:absolute;
top: 0;
left: 95%;
visibility: hidden;
}
/* Shadow! */
#nav li:hover {
/* border-style: outset;*/
/* background: #D7D7D7;*/
background: #1AD;
color: white;
}
#nav > li ul {
/* background: #666;*/
background: transparent url("trans/black40.png");
}
#nav > li > ul {
margin: -1px; /* This is to make the width equal to parent li width. */
position: relative;
top: 4px;
left: 4px;
}
#nav > li ul li {
position: relative;
top: -4px;
left: -4px;
}
/* end shadow */
/* Enlarger */
/* #nav > li {width: 8em;} */ /* popping disappears if we use a fixed-width */
#nav > li:hover {
margin: -0.2em;
padding: 0.2em;
z-index: 2; /* Opera does not seem to respect this. */
}
#nav > li:hover > a {
margin: -0.2em;
padding: 0.2em 0.7em;
}
/* end enlarger */
/* Interactive lines: show/hide menus */
#nav li:hover ul ul, #nav li:hover ul ul ul{
visibility: hidden;
}
#nav li:hover ul, #nav ul li:hover ul, #nav ul ul li:hover ul{
visibility: visible;
}
.skipnav {
display: none;
}
#nonav {
display: block;
background: transparent;
height: 1px;
border: 0;
margin: 0 0 -1px 0;
padding: 0;
}
Here is the other file: Code: <html><head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="/style/MainMenu.css"> <title>Main Menu</title> </head> <ul id="nav"> <li><a href="index.php">Nova Health Center Home</a></li> <li><a href="drtoufigh.php">About Our Doctor</a></li> <li><a href="approach.php">About Our Approach</a></li> <li><a href="clients.php">Client Testimonials</a></li> <li><a href="nutrition.php">Nutrition Information</a></li> <li><a href="faq.php">Questions And Answers</a></li> <li><a href="directions.php">Directions & Office Hours</a></li> </ul> </html> Can anybody tell me what I need to change to make the menu render correctly in IE 7/8? I have made both files pass W3C Validation, consulted Google, researched IE CSS bugs and after many hours of failed attempts, I figured it would be quicker to ask here. I know that the rest of the site is not W3C compliant (yet); however, all I need for now is to fix this one bug so I can show it to my client in IE as well as FF. Thanks in advance for any assistance you can provide! Regards, Riley F. Marquis III Hi All, I'm in the process of building my very first CSS-based site, and I'm having some challenges with getting the nav menu to render and function properly. I'm using the Pixy rollover technique, and I've modeled my code after several sources, since none of the sources exactly match what I need to do for this site. I'm sure my code is probably pretty messed up, but I don't have enough experience yet to determine how and where. I'm using Dreamweaver CS3 to create the code/pages. There are three main issues: 1. The nav menu is not placed correctly on the page (it's too high in Firefox, and too low in IE) 2. The links for the nav buttons are not rendering 3. The rollover states for the nav buttons are not rendering Here's the relevant code as it's presently constituted: Code: CSS .twoColLiqLtHdr #mainContent {
margin: 5px 20px 0 291px;
background-image: url(../assets/structure/main_background.png);
width: 638px;
height: 622px;
background-repeat: no-repeat;
position: relative;
}
#mainContent #navMenu {
width: 636px;
height: 60px;
background-image: url(../assets/navigation/navigation_buttons.png);
background-repeat: no-repeat;
}
#mainContent #navMenu ul {
margin: 0;
padding: 0;
float: left;
}
#mainContent #navMenu li {
float: left;
}
#mainContent #navMenu li a {
display: block;
}
/*nav menu up*/
#mainContent #navMenu li#services a:link {
background-position: 0 0;
}
#mainContent #navMenu li#faq a:link {
background-position: -167px 0;
}
#mainContent #navMenu li#about a:link {
background-position: -272px 0;
}
#mainContent #navMenu li#contact a:link {
background-position: -422px 0;
}
/*nav menu over*/
#mainContent #navMenu li#services a:hover {
background-position: 0 -60px;
}
#mainContent #navMenu li#faq a:hover {
background-position: -167px -60px;
}
#mainContent #navMenu li#about a:hover {
background-position: -272px -60px;
}
#mainContent #navMenu li#contact a:hover {
background-position: -422px -60px;
}
/*nav menu down*/
#mainContent #navMenu li#services a:active {
background-position: 0 -120px;
}
#mainContent #navMenu li#faq a:active {
background-position: -167px -120px;
}
#mainContent #navMenu li#about a:active {
background-position: -272px -120px;
}
#mainContent #navMenu li#contact a:active {
background-position: -422px -120px;
}
Code: XHTML <div id="mainContent">
<div id="navMenu">
<ul>
<li id="services"><a href="services.html"></a></li>
<li id="faq"><a href="faq.html"></a></li>
<li id="about"><a href="about_us.html"></a></li>
<li id="contact"><a href="contact_us.html"></a></li>
</ul>
</div>
</div>
I'd be happy to post links to my nav menu image and uploaded code, but I can't yet since I'm a new user. If anyone who thinks they can help wants to see them, please let me know and I'll send the links in a PM (provided I can do that). Thanks in advance for any help provided. I've been working on this issue for almost 8 hours, and I'm ready to move on to the next one. Sam Hey everyone. I am new to CSS and the forum, thus slightly overwhelmed with a project I am undertaking to produce a CSS menu. The menu is text based, vertically stacked and has two main criteria: 1. On mouse over one of the text buttons (Work for example) to the right or underneath a hidden DIV appears with a selection of sub options. 2. When the above occurs, the text of the Work menu changes to a specific colour. Eg: Work - HIMALAYAS | LIONS EDITORIAL About Links Blog At the moment I am using the following code to show and hide: <a href="#"onmouseover="showhide('script'); return(false); ">WORK</a> <div style="display: none;" id="script"> <a href="ps">HIMALAYAS</a> <a href="l">LIONS EDITORIAL</a> </div> <script> function showhide(id){ if (document.getElementById){ obj = document.getElementById(id); if (obj.style.display == "none"){ obj.style.display = ""; } else { obj.style.display = "none"; } } } </script> Can anyone help me out? Ray. Hi 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 Hi, folks. I'm running into a pretty serious problem to which I'm really, really hoping someone will know a solution. We use a menu system on our site which is made up of layers. It provides for flyout-hierarchical menus, and up until now has caused me no grief. However, now that I've embedded a flash movie onto a particular page the layers that comprise the flyout menu items are hidden beneath the Flash movie. I've tried putting the object tag inside a div and setting the z-index of the div to 1 (and also to -1) but that didn't work. Can anyone take a look and let me know if they have any ideas? http://www.unbc.ca/test.html Cheers and TIA, Pablo 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)} 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;
}
Okay, I am getting frustrated and therefore counterproductive. Perhaps someone else can take a look and let me know what needs to be done... http://www.triexa.com The top menu, I want all those ul's, li's etc. to ONLY apply to that menu, id nav (its all at END of css file). I can seem to do it multiple ways and have it work in opera but not IE. I need it to work in IE, of course. Thanks in advance Yeah so I am trying to get the main structure of a site set up and I am struggling mightily with the CSS. I'm simply trying to layout the page with: four divisions: 3 vertical and one horizontal There is a 10px space between top bottom left and right. My problem at the moment is fitting the horizontal division correctly... Here is the css... all divs are nested inside a wrapper div... Code: @CHARSET "UTF-8";
.wrapper{
position: relative;
float: lt;
left: 0px;
width: 100%
margin-bottom: 10px;
padding-right:0px;
margin-right:0px;
background-color: #221526;
}
.left1{
position: relative;
float: left;
left: 10px;
width: 10%;
height: 415px;
background-color: #2C1D30
}
.left2{
position: relative;
float: left;
left: 1px;
width: 80%;
height: 415px;
background-color: #2C1D30
}
.right{
position: relative;
float: right;
right: 10px;
width: 10%;
height: 415px;
background-color: #2C1D30;}
.bottom1{
position: relative;
float:none;
top:415px;
left:10px;
background-color:#2c1d30;
width: 1375px;
right: 10px;
height: 140px;
}
body {
border-width: 0px;
padding: 0px;
margin: 0px;
font-size: 90%;
background-color: #221526
And if I'm approaching the coding in unadvisable ways (using % for example) please let me know... Thanks for the help. Okay, I'm new to CSS and at the moment, for class, we're supposed to be doing CSS with tables. That's probably good, because I can't imagine the frustration level I'd be at if I was doing pure CSS. I have two issues (right now) that I need help with. http://www.esdcar.org/web/test/templateh.shtml http://www.esdcar.org/web/test/stylesh.css The first is the area on the left with the (placeholder) banner ads, using a perl include. No matter what I do, I can't get IE on PCs to apply a font size of 10px to the text under the banners. (Although it does recognize the color.) At home on my Mac, IE does treat it right. I started with the attribute applied to the UL, but when that didn't work, my teacher suggested applying it to the LIs, which I did to no avail, and after that I put the attribute inside the overall ID (#leftads) for that cell, too, just for kicks. Nothing worked, and that was the only suggestion from the teacher; now he's stumped. Okay, I could comment out the text in the .cgi, but that's not really the point. The other question I have is about the box on the right. Getting it to line up how I wanted, with five even LI sections spanning the picture, on every browser, was out of the question and I finally gave up. However, I got it to where it looked okay (not pushing beyond the bg pic, for example) on IE and Safari on my Mac, and IE and FireFox on the school PCs, and I was content -- until I went to work and tried it there. IE on a PC, just like at school, and yet it was all fubared. The header wrapped around and continued under the brown box, and the five LIs pushed way past the image. Does anyone know how I can overcome these issues? Any suggestions appreciated! Hi everyone, this problem has been annoying me for some time now, and I have finally decided to address the issue. but it has only become more annoying! I have a right sidebar on my site which for some reason always aligns any text in it centrally. i have scoured my css for anything that says text-align=centre, but everything is text-align=left nothing is telling it to align centrally! If anyone can spot the problem it would be a huge help!! here is a link to the page i am referencing, onyahead.com/arsenal if need be I can post the css, but there is a lot of it! Well, I've started diving into CSS and I'm pretty intimidated by it. A lot of it seems to go counter the intuition that I could rely on as long as I worked with tables in a WYSIWYG editor, lol... I'm trying to do something with CSS that looks darn simple, but I just can't get it to work! I can't post hyperlinks, it seems. So you'll have to paste this URL of an explanatory picture into the address line yourself img262.imageshack.us/img262/1278/layoutro9.jpg Basically what I need is a two-column design: - column on the left is fixed-width and contains some seperate containers lined up vertically; these should resize (vertically) when content requires - column on the right is supposed to be the widest and also contains seperate containers lined up vertically; initially, the middle one of them is a picture that is resized to fit the browser window. Now it comes: I use javascript to expand the image to full-size when the user clicks it. What I want is that the column on the left is completely unaffected by this, that the picture expands to the RIGHT (going beyond browser window and can be viewed entirely by scrolling with the scrollbars), and that the container below the picture moves down with it and doesn't move below the left column. I've been trying a couple of things but always end up with issues, most probably because I haven't given it enough time. But I'm getting frustrated quickly because this looks SO simple!! Just to be clear: all I need is a CSS layout that arranges the 7 or 8 "boxes" correctly for this purpose. I would be very thankful if someone could show some working code. JoH Hi guys! Ok here's the thing, I've tried everything I know and hunted the net trying to find an answer, and just when I think I have, another issue crops up. Sorry about the title but I just don't know what to call what it is I'm trying to do. But it SHOULD be possible, and it SHOULD be really simple, which is frustrating the heck out of me because I cannot get this to work! Here is what I'm trying to do, complete with pictures to help visualize things. Example This shows how I want my site layout to appear. A regular width site so it can be displayed on low res desktops, BUT with extra artwork on the left and right, complete with a couple of flash animations to the sides. Code: http://img708.imageshack.us/img708/2458/layoutstyle.jpg The red outline shows a typical 800x600 display, as you can see, they should only be able to see what's in the center of the page. The dark blue outline shows a much higher resolution display The light blue color shows the extra artwork only revealed to higher resolutions The flash boxes contain flash elements which should remain fixed in those locations regardless of the resolution the user is using (they'd be setup to match the background image, so must not move) The dark blue outline shows how the same site would look on a much higher resolution. Instead of black space to the left or right, or the actual site stretching to fit (not looking for a liquid layout in this case), they get to see the rest of the artwork, plus the flash elements. The purpose of this is so it will look fine on low resolution displays, but also, when viewed on higher resolution displays, will then show the extra artwork instead of blackness. Problems Just when it looks like it might work, I find that each browser displays things incorrectly, pixels, picas, ems, etc. and so on. How do I get it to work across the board? I don't want to be unprofessional and do the "This site should only be viewed in X browser". The flash enabled parts always wrap and refuse to appear off screen, how do I fix this? When I place them, I want them to stay exactly where they are (which is offscreen on a low resolution, but visible on a higher resolution), not bunch up and move out of place. I can get the actual background to appear correctly, so when resizing the browser, it remains fixed in the center and reveals the rest of the artwork both left and right. But other elements simply refuse to behave correctly (see first problem, this happens especially with browsers not rendering the same things the same, such as pixels etc. being done differently in each browser). If you want a real world example of what I'm trying to achieve, please view the following website: Code: http://us.blizzard.com/diablo3/?rhtml=y unfortunately I have no idea what language they used and it looks unreadable to me, so borrowing from view source isn't an option for me in this case (I use Dreamweaver, css and php, and have no understanding of xml or whatever it is they're using, neither do I have the time to learn another language). Is there anyone who can help me here, cause this is REALLY frustrating me now, it should be incredibly simple but it's not, and I feel as if I'm being forced to abandon everyone who doesn't have X display and X browser. Which I don't want to do. P.S. Sorry about the weird links, seems new accounts can't use url's *shrugs*. Hi, I am trying to achieve a layout which uses unordered lists. Within the LI, there is an image and some text. The images are all different heights though. The issue i'm having at the moment is how can I make the text vertically align within the LI? Keep in mind that I can't put a height on as each image changes height. And these lists will be generated dynamically probably - so I don't really want to specify individual heights for each one... To make it even more difficult, the text may end up spanning onto two lines at some stage if i have to enter a larger description - so that also needs to be kept in mind. I've been looking around all morning for examples of how to do this and I can't find anything - so any help would be greatly appreciated!!! Here is what I'm trying to achieve: http://www.joshsphotos.com/user_interface/final_look.gif Here is the HTML at present: http://www.joshsphotos.com/user_interface/ And the CSS: http://www.joshsphotos.com/user_interface/css/style.css Thanks! Hi I am designing a page in which I want to include a background image that is anchored to the bottom right of the screen. I have managed to do this, the only problem I am having is that due to the image being a big one (dimensions) when the user's screen is of a lower resolution such as 800 x 600, the image takes over most of the page's background which is distracting from the main content. My idea is to have the image resize based on the user's screen resolution. Is this a feasible solution and if yes, how can it be achieved? Thanks Hi all, I am trying to automate everything on my test website and I have one more angle to cover. In effect, I want to adjust the line-height property (which I can do) based on the number of files within a specific folder (PHP and already done). The more files in the folder, the lower the line-height value must be. This is to ensure if I copy additional files into the folder, then the navigation menu (which is PHP reading files in this particular folder) will alter the CSS line-height property accordingly to ensure it can never exceed a certain height. Sounds wierd? go to www.re3.org.uk (next to the RE3 image, I have a list of hyperlinks which are obtained from files within the folder) My problem, when adjusting the CSS property (which is set as cm in *.css file) in javascript, it doesn't correspond correctly, the line-height property in javascript doesn't appear to be work in cm but some other measurement. Does anyone know how to change what unit of measurement Javascript works in? Or does anyone know what unit of measurement javascript uses when adjusting line-height / line-width values? I want to create a mini-algorithm that works out the appropriate line-height based on the image height (got that already) and the number of files in the folder (got that too) so the menu automatically adjusts to fit. Whew! I've tried everything, with no luck. It's pointing to the right address, the css is loading. Why does the image not appear? div#main_menu { float: left; clear: both; width: 100%; height: 73px; background-image: url (images/button-banner.png) no-repeat; } div#main_menu ul { float: left; list-style: none; margin: 0; padding: 0; } div#main_menu ul li { float: left; height: 73px; margin: 0 15px; } div#main_menu ul li a { color: #7A5A46; float: left; margin-top: 17px; text-decoration: none; text-align: center; HTML: <div id="main_menu"> <ul> <li><a class="" href="#">Menu<br/></a></li> <li><a class="" href="/ordering/">Ordering Info<br/></a></li> <li><a class="" href="/photos/">Photos<br/></a></li> <li><a class="" href="/blog/">Blog<br/></a></li> <li><a class="" href="/about/">About Me<br/></a></li> <li><a class="" href="/contact/">Contact Info<br/></a></li> } |
|||||||