|
CSS - Editing Images Within A Spliced Table.
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 --> Similar Tutorialsyes i am a css n00b and am trying to place a sliced image (with a link in one slice) from a table (yes adobe) into a <div> like this... Code: <!-- display welcome div--> <div id="welcome"> <table width="100%" border="0" cellspacing="0" cellpadding="0" > <tr border="0"> <td colspan="3"> <img src="images/welcome_01.jpg" width="536" border="0" height="99" alt=""></td> </tr> <tr border="0"> <td rowspan="2"> <img src="images/welcome_02.jpg" width="67" border="0" height="128" alt=""></td> <td> <a href="search.php"> <img src="images/welcome_03.jpg" width="124" height="107" border="0" alt="search viera florida real estate brevard fl"></a></td> <td rowspan="2"> <img src="images/welcome_04.jpg" width="345" border="0" height="128" alt=""></td> </tr> <tr> <td> <img src="images/welcome_05.jpg" width="124" border="0"height="21" alt=""></td> </tr> </table> here is my css snip... Code: #welcome{
padding: 10px 10px 10px 10px;
height: 250px;
color: #000000;
text-indent: 0px;
}
the problem is that the sliced image seems to have borders around each slice so the composite images is being rendered thusly.. link to jpeg URL http://www.viera-brevard-real-estate.com/badTable.jpg any ideas appreciated.. advTHANKSance, - mark ok, if you go he http://www.whiteazn.com/satworld/gallery youll see at the top, the image ... being overlapped by the row below .... im trying to use CSS without using tables ..... but any image not inthe first column, doesnt push the row under it down ... the first column is position: relative, the 2nd and 3rd columns are position: absolute (to get it inthe column position) .... any other way of doing it so that it will push the row down respectively? here is the html code that gets outputted to the screen for the whole gallery: PHP Code: <div id="galleryContainter"> <div class="galleryRow"> <div class="galleryImage1"> <p class="galleryIMG"><a href="viewimage.php?id=42"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif" width="100" height="60" alt="Gallery Image" /></a><br /><br /> testing completion of pagination again</p> </div> <div class="galleryImage2"> <p class="galleryIMG"><a href="viewimage.php?id=41"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif" width="180" height="110" alt="Gallery Image" /></a><br /><br /> testing image insert and page numbers</p> </div> <div class="galleryImage3"> <p class="galleryIMG"><a href="viewimage.php?id=38"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br /> on to 2 pages</p> </div> </div> <div class="galleryRow"> <div class="galleryImage1"> <p class="galleryIMG"><a href="viewimage.php?id=37"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br /> on to 2 pages</p> </div> <div class="galleryImage2"> <p class="galleryIMG"><a href="viewimage.php?id=36"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br /> on to 2 pages</p> </div> <div class="galleryImage3"> <p class="galleryIMG"><a href="viewimage.php?id=34"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br /> on to 2 pages</p> </div> </div> <div class="galleryRow"> <div class="galleryImage1"> <p class="galleryIMG"><a href="viewimage.php?id=32"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br /> on to 2 pages</p> </div> <div class="galleryImage2"> <p class="galleryIMG"><a href="viewimage.php?id=31"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br /> on to 2 pages</p> </div> <div class="galleryImage3"> <p class="galleryIMG"><a href="viewimage.php?id=30"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br /> on to 2 pages</p> </div> </div> <div class="galleryRow"> <div class="galleryImage1"> <p class="galleryIMG"><a href="viewimage.php?id=29"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br /> on to 2 pages</p> </div> <div class="galleryImage2"> <p class="galleryIMG"><a href="viewimage.php?id=28"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br /> on to 2 pages</p> </div> <div class="galleryImage3"> <p class="galleryIMG"><a href="viewimage.php?id=27"><img src="http://www.bigresources.com/BRBAV2/BA100x60-2.gif " width="100" height="60" alt="Gallery Image" /></a><br /><br /> on to 2 pages</p> </div> </div> </div> here is the respective CSS: PHP Code: /***************** Gallery Styles *****************/ #galleryContainter { position: relative; width:552px; margin: 0px; } .galleryRow { position: relative; width: 552px; margin: 0px; padding-bottom: 5px; } .galleryImage1 { position: relative; top:0px; left: 0px; width: 180px; padding: 2px; } .galleryImage2 { position: absolute; top:0px; left: 188px; width: 180px; padding: 2px; } .galleryImage3 { position: absolute; top:0px; left: 376px; width: 180px; padding: 2px; } .galleryIMG { text-align: center; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 10px; } .galleryIMG img { border: 2px solid #900; } .viewImage { font-family: "Courier New", Courier, monospace; font-size: 12px; } thanks .... sorry if this seems easy ... im just new at trying this new thing of using all CSS, strict, no tables for layout, standards mentality of coding ... does anyone know how i can get 4 background images in my table, one for each corner of the table? they are curved images, as i am aiming for the table to have curved edges. Thanks I am displaying a list of users on my site. Each user has a picture with some text below. I want to display this image+text block" and I want it to wrap like text. I made inline div and tables with these elements but it seems to wrap arbitrarily around the page. any suggestions? I have two problems. First issue is that I cant seem to get a background image to repeat in IE when it works fine in FF. I tried to reproduce the bug on another server using the same exact CSS and to my shock, the background repeat rule works fine. So, it doesnt work on my server at home with a much more complicated stylesheet (albiet the reference to the background image and repeat rule are exactly the same .. and simple) .. but when I port the same stylesheet to another server with simpler markup, boom, it works fine. Cant wrap my head around this one. Is there a commonly known IE bug/problem with background image/CSS/background-repeat rules? My site that does not work through IE shows the image once .. and thats it. No repeating like tell it to. My other issue (if youre still interested) is a problem with the CSS command: Code: table
{
empty-cells: show;
}
which does not work at all. As you can see on this page in IE, (http://www.doublethinkdesigns.com/development/ ) ive specified the rule, but lo and behold, the cells are still missing. Can someone kindly lend me some perspective perhaps? Thank you much in advance. Hi guys I'm having a little problem with a <table> based website Please check the following image Each circle in the image attached is a separate image file, and I must make each image to be inside design. My problem is that the images doesn't fit in the <td> area, so well... Is there a way I can make the images float over the table ? I mean, a decent way to do this without having to convert entire design form <tables> to <divs> (PS: I'm still learning tableless designs) Thanks a lot in advance I will try to explain as simple as I can: I have rollover drop down menus, made with <DIV>'s. Showing and hiding them with JavaScript/CSS, usual stuff... While opening and closing menus, and hovering the menu items, table's bkg images are kind of "blinking". I am using CSS to put bkg image to a cell Code: background-image:url(/burakueda/images/bg_gifs/down_end.gif); . I realized that, browser tries to download bkg images everytime I open a pulldown menu, or hover a menu item. I have other images in same page, inserted with <IMG> tag, they don't have any problem. Anyone knows anything about this? Thanks in advance for any help http://www.kafadrian.com/juggernaut/index.html is what i have so far I want it to look like: http://www.kafadrian.com/juggernaut/layout.jpg The problem im having is that the image links that have mouseover effects dont align (touch) the blue bar below them and apparently in some browsers the image links themselves have gaps between them I spent hours, and yes im relatively noobish about all this, trying all sorts of different display commands and border/margin commands to try and get rid of any spaces, the way the site is now (10.01.08) is the best i could get it. in IE7 the mouseover images connect horizontally but not vertically with other images. am i going about this all wrong? my experience in building websites is mostly from the early eras of netscape when IE was new, back when you put stuff in a table a certain way with no cellpadding/spacing/border and everything aligned no problem. I appreciate any help with this as I undertand it will take time to give me an answer that no only makes sense (to me) but will work. the code for the site is: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Juggernaut - Monolith - Order</title>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0">
<script type="text/javascript">
<!--
var image1 = new Image();
image1.src = "news1.jpg";
var image2 = new Image();
image2.src = "news2.jpg";
var image3 = new Image();
image3.src = "news3.jpg";
var image4 = new Image();
image4.src = "roster1.jpg";
var image5 = new Image();
image5.src = "roster2.jpg";
var image6 = new Image();
image6.src = "roster3.jpg";
var image7 = new Image();
image7.src = "forums1.jpg";
var image8 = new Image();
image8.src = "forums2.jpg";
var image9 = new Image();
image9.src = "forums3.jpg";
var image10 = new Image();
image10.src = "files1.jpg";
var image11 = new Image();
image11.src = "files2.jpg";
var image12 = new Image();
image12.src = "files3.jpg";
var image13 = new Image();
image13.src = "info1.jpg";
var image14 = new Image();
image14.src = "info2.jpg";
var image15 = new Image();
image15.src = "info3.jpg";
var image16 = new Image();
image16.src = "founded.jpg";
//-->
</script>
<script type="text/javascript">
<!--
function roll(img_name1, img_src1, img_name2, img_src2)
{
document[img_name1].src = img_src1;
document[img_name2].src = img_src2;
}
//-->
</script>
<table border="0" cellspacing="0" cellpadding="0" style="margin:0">
<tr height="34">
<td rowspan="4">
<img style="display:block" src="juggernaut.jpg" width="560" height="110"/>
</td>
<td>
</td>
</tr>
<tr>
<td>
<a href="index.html" style="display:inline-block"
onmouseover="roll('news','news2.jpg','text','news3.jpg')" onmouseout="roll('news','news1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="news1.jpg" name="news" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('roster','roster2.jpg','text','roster3.jpg')" onmouseout="roll('roster','roster1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="roster1.jpg" name="roster" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('forums','forums2.jpg','text','forums3.jpg')" onmouseout="roll('forums','forums1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="forums1.jpg" name="forums" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('files','files2.jpg','text','files3.jpg')" onmouseout="roll('files','files1.jpg', 'text','founded.jpg')">
<img style="display:inline-block" src="files1.jpg" name="files" width="48" height="48" border="0"/>
</a>
<a href="index.html" style="display:inline-block"
onmouseover="roll('info','info2.jpg','text','info3.jpg')" onmouseout="roll('info','info1.jpg','text','founded.jpg')">
<img style="display:inline-block" src="info1.jpg" name="info" width="48" height="48" border="0"/>
</a>
</td>
</tr>
<tr>
<td>
<img style="display:block" src="line_right.jpg" width="240" height="4"/>
</td>
</tr>
<tr>
<td>
<img style="display:block" src="founded.jpg" align="right" name="text" width="144" height="20"/>
</td>
</tr>
</table>
</body>
</html>
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> 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 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? 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)} 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 Im just curious, what are the advantages of using css to import all your images (that arnt dynamic) as apposed to inserting them into your html using the <img> tag? I have a textarea in a <td>which asks for users for some description. If users enter text and don't use any space or enter, the width of the table gets bigger and bigger and damages the pages design. What can I add (to td.fixed_width css for example )to make the line break after the width of the table is reached??? There is a solution that I put a div in td and then Code: #desc {
width:"100%";
width::fixed;
overflow:scroll;}
but it is not exactly what I want hi every one... How can I display static headers in a table, so that headers remain visible while user scrolls the table body? This is not working in IE 7 any working example please 2. iam having a column which holds data around some 100 to 200 characters... by default i want to display some 50 characters and rest of the characters can be viewed by moving the column... if this is possible let me know how to do it with some sample code......i dont know much about CSS 3. One more problem iam facing is with the number of columns displayed in the table. I have to display around 15 to 20 columns in a table... with this 15 to 20 columns in a table, i can see scrollbar to the page ....but i dont want scrollbar to the page, instead i want want scroll bar to the table (so that it doesnot effect the design of the page) I need a fixed table width and height and also fixed column width and height..... Note: I dont mind if columns are not visible (thru scrool bar i should see the hide columns) Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked. Is there a way to get this to happen with out changing the size of the cell? I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table. -------------------------------------------------------------------------------- Hello, Not exactly sure where to post this question... but: I'm having a bit of trouble keeping a table at a fixed height. What I have is a Small 200x80px table above my an input form. As users type data into the input form, javascript code dynamically updates the contents of the table. I have the table width properly fixed, and the input fields have character limitations... however if a user inputs a lot of capital letters or other wide characters, the table automatically increases in height when the text wraps. It's pretty much necessary that the text wraps for the middle lines of the table, and on the other two lines I have used the javascript to remove wrapping, but I never want the table to grow longer than 80px no matter how much is typed in the fields. Is there a way that I can constrain the table height? Thanks in advance! I'm trying to get a table inside another table which completely fills the parent table, but I cannot get it to work. The simple piece of code illustrates my problem. The red table is inside the blue table but does not cover the entire cell from top to bottom, but only the centre. I want this table to be streched. Obviously height: 100% doesn't work. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<body>
<table>
<tbody>
<tr>
<td>
1<br>2<br>3<br>4<br>5<br>
</td>
<td style="background: blue;">
<table style="height: 100%; background: red;">
<tbody>
<tr>
<td style="vertical-align: bottom">
Test
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
|
|||||||