|
CSS - Converting Table To Css??
Can someone please help me, I am fairly new to web design, I have been reading about CSS being the better way of web design than using tables.
I have got the hang of creating layout, columns, etc. But can someone please help me with the code below. I am trying to convert this so it appears in the centre of the page Code:
<TABLE WIDTH=766 BORDER=0 align="center" CELLPADDING=0 CELLSPACING=0>
<TR>
<TD><IMG SRC="images/spacer.gif" WIDTH=23 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=14 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=29 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=6 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=20 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=17 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=31 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=10 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=7 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=24 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=21 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=17 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=18 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=16 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=75 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=110 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=115 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=38 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=4 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=29 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=12 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=29 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=88 HEIGHT=1 ALT=""></TD>
<TD><IMG SRC="images/spacer.gif" WIDTH=13 HEIGHT=1 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=13 ALIGN=left VALIGN=top></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_02.gif" WIDTH=91 HEIGHT=32 ALT=""></TD>
<TD COLSPAN=9 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=5 ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_04.gif" WIDTH=92 HEIGHT=45 ALT=""></TD>
<TD COLSPAN=8 ROWSPAN=2 ALIGN=left VALIGN=top><img src="images/index_05.gif" name="service" width="145" height="45" border="0"></TD>
<TD COLSPAN=2 ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_06.gif" WIDTH=91 HEIGHT=45 ALT=""></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_07.gif" WIDTH=110 HEIGHT=45 ALT=""></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_08.gif" WIDTH=115 HEIGHT=45 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_09.gif" WIDTH=112 HEIGHT=23 ALT=""></TD>
<TD COLSPAN=2 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_11.gif" WIDTH=38 HEIGHT=22 ALT=""></TD>
<TD COLSPAN=4 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=6 ALIGN=left VALIGN=top><IMG SRC="images/index_13.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=4 ALIGN=left VALIGN=top><img src="images/index_14.gif" name="news" width="72" height="40" border="0"></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_15.gif" WIDTH=38 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_16.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_17.gif" WIDTH=110 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_18.gif" WIDTH=115 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=4 ALIGN=left VALIGN=top><IMG SRC="images/index_19.gif" WIDTH=83 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_22.gif" WIDTH=66 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><img src="images/index_23.gif" name="quote" width="84" height="41" border="0"></TD>
<TD COLSPAN=4 ALIGN=left VALIGN=top><IMG SRC="images/index_24.gif" WIDTH=69 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_25.gif" WIDTH=109 HEIGHT=41 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_26.gif" WIDTH=110 HEIGHT=41 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_27.gif" WIDTH=115 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_28.gif" WIDTH=112 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_30.gif" WIDTH=23 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=6 ALIGN=left VALIGN=top><img src="images/index_31.gif" name="about" width="117" height="40" border="0"></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_32.gif" WIDTH=79 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_33.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_34.gif" WIDTH=110 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_35.gif" WIDTH=115 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_36.gif" WIDTH=112 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_38.gif" WIDTH=37 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><img src="images/index_39.gif" name="specials" width="103" height="41" border="0"></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_40.gif" WIDTH=79 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_41.gif" WIDTH=109 HEIGHT=41 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_42.gif" WIDTH=110 HEIGHT=41 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_43.gif" WIDTH=115 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_44.gif" WIDTH=112 HEIGHT=41 ALT=""></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=9 ALIGN=left VALIGN=top><img src="images/index_46.gif" name="hosting" width="157" height="40" border="0"></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_47.gif" WIDTH=62 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_48.gif" WIDTH=109 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_49.gif" WIDTH=110 HEIGHT=40 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_50.gif" WIDTH=115 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_51.gif" WIDTH=112 HEIGHT=40 ALT=""></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=4 ALIGN=left VALIGN=top><IMG SRC="images/index_53.gif" WIDTH=72 HEIGHT=44 ALT=""></TD>
<TD COLSPAN=7 ALIGN=left VALIGN=top><img src="images/index_54.gif" name="contact" width="130" height="44" border="0"></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_55.gif" WIDTH=17 HEIGHT=44 ALT=""></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_56.gif" WIDTH=109 HEIGHT=44 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_57.gif" WIDTH=110 HEIGHT=44 ALT=""></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_58.gif" WIDTH=115 HEIGHT=44 ALT=""></TD>
<TD COLSPAN=5 ALIGN=left VALIGN=top><IMG SRC="images/index_59.gif" WIDTH=112 HEIGHT=44 ALT=""></TD>
<TD COLSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_60.gif" WIDTH=101 HEIGHT=44 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=6 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD COLSPAN=6 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD COLSPAN=2 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_64.gif" WIDTH=75 HEIGHT=21 ALT=""></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_65.gif" WIDTH=110 HEIGHT=35 ALT=""></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top><IMG SRC="images/index_66.gif" WIDTH=115 HEIGHT=35 ALT=""></TD>
<TD COLSPAN=3 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD COLSPAN=3 ROWSPAN=4 ALIGN=left VALIGN=top background="images/index_68.gif"><table width="85%" border="0" align="center">
<tr>
<td><form action="" method="post" name="form1">
Login <br>
<input name="login" type="text" id="login" size="12" maxlength="6">
<br>
Password:</span><br>
<input name="pass" type="password" id="pass" size="12">
<br>
<input type="submit" name="Submit" value="Submit">
</form></td>
</tr>
</table></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD ALIGN=left VALIGN=top><IMG SRC="images/index_70.gif" WIDTH=75 HEIGHT=14 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=16 ROWSPAN=3 ALIGN=left VALIGN=top> <IMG SRC="images/index_71.gif" WIDTH=438 HEIGHT=77 ALT=""></TD>
<TD ALIGN=left VALIGN=top></TD>
<TD COLSPAN=3 ALIGN=left VALIGN=top></TD>
<TD ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD COLSPAN=3 ROWSPAN=2 ALIGN=left VALIGN=top></TD>
<TD ROWSPAN=2 ALIGN=left VALIGN=top></TD>
</TR>
<TR>
<TD COLSPAN=3 ALIGN=left VALIGN=top><IMG SRC="images/index_80.gif" WIDTH=129 HEIGHT=14 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=24 ALIGN=left VALIGN=top></TD>
</TR>
</TABLE>
Any help please??? Similar TutorialsHi there, I have a table which displays some links in columns, but I cannot work out how to convert it into CSS. This is the table code: PHP Code: <table width="100%" border="0" cellpadding="2" cellspacing="0" class="normal_12_blue"> {section name=row loop=$row_submenu_id} <tr> <td><a href="{$row_submenu_link[row]}" >{$row_submenu_name[row]} </a></td> {section name=col loop=$col_submenu_id[row]} <td><a href="{$col_submenu_link[row][col]}" class="normal_12_blue">{$col_submenu_name[row][col]} </a></td> {/section} </tr> {/section} </table> I tried using plain <div> tags, but it doesn't put them in columns. Any ideas how I can convert this? My current HTML looks like this... Code: <table width="90%" align="center"> <tr class="gen_small" height="25"> <td colspan="5"><b>Test Category</b></td> </tr> <tr class="gen_small" height="50"> <td width="50" align="center"><img src="./templates/images/forum_open.gif" border="0"></td> <td><b><a href="view_forum.php?f=1">Test Forum</a></b><br>This is a test forum</td> <td width="200" align="right"></td> <td width="50" align="center"></td> <td width="50" align="center"></td> </tr> </table> I have some ideas on how to get a similar layout but how do i ensure the distances specified by the widths are also kept intact? I have decided to move another of my sites over to css, but I seem to be stuck at the first problem. I have added a small code sample... What I am wanting to do is remove the table and acheive the same result with css and div tags. How can I align text to the bottom right with css like the sample code? PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Text aligned bottom right</title> </head> <body> <table border=0 height="90px" width="100%"> <tr><td style="vertical-align: bottom;background:white;text-align:right;"> <a href="">Home</a> | <a href="">About</a> | <a href="" >Contact</a> </td></tr></table> </body> </html> I haven't had much luck on converting the html table with an image in it to a css <div> that can look like a html table in a way. Old Way Code:
<table border="1" cellpadding="5" cellspacing="2">
<tr>
<td>
<img src="test.gif">
</td>
</tr>
</table>
New Way Code:
<style type="text/css">
div.divTest
{
margin: 12px 0px 0px 30px;
padding: 8px 8px 8px 8px;
border: 3px double #000000;
/* width: 0px; */
}
</style>
<div class="divTest">
<img src="test1.gif">
</div>
Since the html table is for displaying the data and the image isn't one of them as stated by the w3.org's rule. Thanks.. Hello, as im waiting for a reply to one previous thread today, i though i would also write this one too, as i REALLY need help. With the html page below, how "would" i make this all STRICT css and still have it look exactly the same. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
<style type="text/css">
<!--
body {
margin-top: 0px;
}
.menuBlue {
FONT-SIZE: 11px; COLOR: #3c2c7c; FONT-FAMILY: Verdana, Helvetica, sans-serif
}
.menuBlue A {
COLOR: #3c2c7c; TEXT-DECORATION: none
}
.menuBlue A:visited {
COLOR: #3c2c7c; TEXT-DECORATION: none
}
.menuBlue A:hover {
COLOR: #99091c; TEXT-DECORATION: none
}
-->
</style></head>
<body onload="MM_preloadImages('images/Home_On.gif','images/About_On.gif','images/Search_On.gif','images/ContactUs_On.gif')">
<table width="407" height="91" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="70" height="18"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/Home_On.gif',1)"><img src="images/Home_Off.gif" alt="Homepage" name="home" width="70" height="18" border="0" id="home" /></a></td>
<td width="134" height="18"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','images/About_On.gif',1)"><img src="images/About_Off.gif" alt="About RE/MAX" name="about" width="134" height="18" border="0" id="about" /></a></td>
<td width="86" height="18"><DIV id=divSearch onmouseover="MM_showHideLayers('divSearch','','show')"
style="Z-INDEX: 6; VISIBILITY: hidden; WIDTH: 200px; POSITION: absolute; TOP: 18px; HEIGHT: 95px" onmouseout="MM_showHideLayers('divSearch','','hide')">
<table id="Table10" cellspacing="0" cellpadding="0" width="200" border="0">
<tbody>
<tr>
<td bgcolor="#3c2c7c" colspan="3"><img height="1" alt="" hspace="0"
src="images/Spacer.gif" width="200" border="0" /></td>
</tr>
<tr>
<td width="1" bgcolor="#3c2c7c"><img height="1" alt="" hspace="0"
src="images/Spacer.gif" width="1" border="0" /></td>
<td><table id="Table11" cellspacing="0" cellpadding="0" width="198" border="0">
<tbody>
<tr>
<td width="198" bgcolor="#dce4ec" colspan="2"><img height="3" alt=""
src="images/Spacer.gif" width="1" border="0" /></td>
</tr>
<tr bgcolor="#bcccdc">
<td width="18"><img height="1" alt="" src="images/Spacer.gif"
width="10" border="0" /><img height="14" alt=""
src="images/ArrowRight.gif" width="8" border="0" /></td>
<td class="menuBlue" width="180"> <a
href="#">Properties</a></td>
</tr>
<tr bgcolor="#dce4ec">
<td><img height="1" alt="" src="images/Spacer.gif" width="10"
border="0" /><img height="14" alt="" src="images/ArrowRight.gif"
width="8" border="0" /></td>
<td class="menuBlue"> <a
href="#">Land</a></td>
</tr>
<tr bgcolor="#bcccdc">
<td><img height="1" alt="" src="images/Spacer.gif" width="10"
border="0" /><img height="14" alt="" src="images/ArrowRight.gif"
width="8" border="0" /></td>
<td class="menuBlue"> <a
href="#">Commercial</a></td>
</tr>
<tr bgcolor="#dce4ec">
<td><img height="1" alt="" src="images/Spacer.gif" width="10"
border="0" /><img height="14" alt="" src="images/ArrowRight.gif"
width="8" border="0" /></td>
<td class="menuBlue"> <a
href="#">Office and Agents</a></td>
</tr>
<tr bgcolor="#bcccdc">
<td><img height="1" alt="" src="images/Spacer.gif" width="10"
border="0" /><img height="14" alt="" src="images/ArrowRight.gif"
width="8" border="0" /></td>
<td class="menuBlue"> <a
href="#">Franchise Opportunities</a></td>
</tr>
<tr>
<td width="198" bgcolor="#dce4ec" colspan="2"><img height="3" alt=""
hspace="0" src="images/Spacer.gif" width="1"
border="0" /></td>
</tr>
</tbody>
</table></td>
<td width="1" bgcolor="#3c2c7c"><img height="1" alt=""
src="images/Spacer.gif" width="1" border="0" /></td>
</tr>
<tr>
<td bgcolor="#3c2c7c" colspan="3"><img height="1" alt=""
src="images/Spacer.gif" width="200"
border="0" /></td>
</tr>
</tbody>
</table>
</DIV>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('search','','images/Search_On.gif',1)"><img src="images/Search_Off.gif" alt="Search" name="search" width="86" height="18" border="0" id="search" onmouseover="MM_showHideLayers('divSearch','','show')" onmouseout="MM_showHideLayers('divSearch','','hide')" /></a></td>
<td width="117" height="18"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/ContactUs_On.gif',1)"><img src="images/ContactUs_Off.gif" alt="Contact Us" name="contact" width="117" height="18" border="0" id="contact" /></a></td>
</tr>
<tr>
<td height="73"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Hi all, I am trying to convert my font info as global.css instead of hard coding it in every file. Code:
<font size="2" face="Arial, Helvetica, sans-serif">text</font>
to
.myFont {
font-size:14px; FONT-FAMILY: Arial, Helvetica, sans-serif;
}
But is not coming out the same in ie, why? Any help would be greatly appreciated. I'm a relative CSS newbie. I'm trying to convert an image heavy fireworks table created layout to all CSS for a friend. The designs not great but I'm trying to match it best i can Here's the comp... <a href="http://www.beardenfoundation.org/newpage.html">http://www.beardenfoundation.org/newpage.html</a> And here's my first stab at it... <a href="http://www.timmanteau.com/redo/redo_css.htm">http://www.timmanteau.com/redo/redo_css.htm</a> Can anyone give me a suggestion as the best way to approach this. I was thinking a fixed width, 3 column layout with a header and footer. Then I would place a repeating background image in each column to keep the look. How can I get the 3 columns to size to 100%. Any advice would be greatly appreciated. Thanks Tim Ive been trying to make this site for a friend, http://www.force-g.net/nathan/mainpage.html he wants a specific design so I made it with flash. The problem is useless with flash and thats as far as I can get. Can anyone give me a hand or some hints on how I could replicate this design with html and css. Would I have to use frames or can I divide the page with css? Or should I just stick to the flash design I have already? I know there are many benifits to moving from tables to css and div's and after trying to convert one page I have several question that i'm hopeing someone can help with. If everything goes well I will have about 100 pages to convert. Here is the code so far: <div position="float: left"> <span class="contentHeader">Direct Basics</span><br> <p><span class="h2"> Access Direct</span> </p> <p><span class="livetext">To access Direct: </span></P> <span class="livetext"> <ol> <li>On the Portal home page, you can either:<br> <p style="text-indent: 2em;"> Click the Tool Quicklink for <b>Assetwise Direct</b> </p> <p style="text-indent: 10em;"> or<br> <p style="text-indent: 2em;"> Click the <b>EVALUATE LOANS</b> menu to select <b>Assetwise Direct</b><br> </li> </ol> </span> <p class="SmallText"> <span class="livetext"> <ol start="2"> <li>When the security screen appears, enter your...<br> <p style="text-indent: 3em;"> user name <p style="text-indent: 4em;"> and password<br> <p style="text-indent: 5em;"> and click <b>OK</b><br> <br> Note: The user name and password fields are case sensitive.</li> </ol></span> </p> </div> <div style="position: absolute; left: 450px; top: 115px"><a target="_blank" href="images/access_awd.jpg"> <img border="0" src="images/access_awd_small.jpg" xthumbnail-orig-image="images/access_awd.jpg" width="100" height="60"></a> <br> <div style="text-align=center;"> <span class=reporttext> <a href="images/access_awd.jpg" target="_blank" style="text-decoration: none"> click to enlarge </a> </span> </div> </div> <div style="position: absolute; left: 450px; top: 325px"> <a target="blank" href="images/password_box.jpg"> <img border="0" src="images/password_box_small.jpg" xthumbnail-orig-image="images/password_box.jpg" width="100" height="63"></a><br> <div style="text-align=center"><span class=reporttext> <a href="images/password_box.jpg" target="_blank" style="text-decoration: none"> click to enlarge </a> </span> </div> </div> <p class=livetext style="position: absolute; float: left; left: 515px; top: 500px"> <a href="#" onClick="window.history.back(); return false;">Back</a> </p> THe actual page will have a menu on the left and top and this code will be in the main part of the screen. Now, my problem's with the code, other than I have the css in the file (will move to .css file later), a i'm not sure if ive used the best way for positioning images or codeing style for that matter, and when text is resized in a browser it will overlap the images, is there a way around that? Once i'm done with this page someone else (who is comfortable with tables and has limited web design experience) will be doing updates in FrontPage. For that would it be easier for them to just stick with tables? Any help would be greatly appreciated. i have to move our site to drupal, and am having a huge issue with a certain div design. Version 1 - Original, old site shows it working perfectly but... Version 2 - Drupal, new site shows all the divs incorrectly. i have spent the past week, from 9-5 trying to figure this out but i think i have just burned out. .. can someone please help me here as this needs to be done since this is on the main page. I know it has something to do with the side-feature and afeature divs ... Need help converting the above to use 960 grid system. Most is already done by "cloning" the FourKitchens.com main page but I can't get this last bit of code converted. This code is contained within a container-16 element: Code:
<!-- COLUMN-LEFT -->
<div id="column-left" class="grid-11 suffix-1">
<!-- COLUMN-LEFT-INNER -->
<div id="column-left-inner" class="grid-11 clearfix">
<!-- CONTENT -->
<div id="content">
<!-- CONTENT-BODY -->
<div id="content-body">
<!-- HEADER_IMG -->
<div id="header_img">
<img src="images/banner4.jpg" width="640" id="banner" />
</div> <!-- END HEADER_IMG -->
<!-- FILTER-ROW -->
<div id="filter-row">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><strong>Filter by :</strong> <a href="categorytasks.php?category=&mny=&f=l">Latest</a> | <a href="categorytasks.php?category=&mny=&f=p">Most Popular</a> | <a href="categorytasks.php?category=&mny=&f=r11">Highest Rated</a> </td>
<td> </td>
<td><strong>For $</strong>
<form name="mnyform" method="post" enctype="multipart/form-data">
<select name="mnyindex" onChange="indexcategoryload(document.mnyform.mnyindex.value)">
<option value="5">5</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="250">250</option>
<option value="500">500</option>
<option value="1">1</option>
</select>
</form>
</td>
</tr>
</table>
</div> <!-- END FILTER-ROW -->
<!-- TASK-ROW -->
<div id="task-row">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="107">
<img src="taskimages/a4d11fddb35c9f__donate.jpg" width="106" height="76" />
</td>
<td width="17"> </td>
<td width="476">
<a href="task_desc.php?No=21" class="mainheading">I Will Keep it real for $1</a></span><br />
Just keep it real<br /><br />
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="15%">
<a href="task_desc.php?No=21" class="heading">
Read more
</a>
<img src="images/small_twitter.jpg" width="43" height="27" align="absmiddle" /> <span class="share" onClick="showHideDiv('share21')" style="cursor:pointer;"> Share</span>
</td>
<td width="8%">
<div id ="share21" style="display:none;">
<td width="4%"> </td>
<td>
<a href="fb_link" target="_blank" class="heading">
<img src="images/btn-facebook.png" alt="twitter" width="16" height="16" align="absmiddle" />
</a>
<a href="twitter_link" target="_blank" class="heading">
<img src="images/btn-twitter.png" alt="twitter" width="16" height="16" align="absmiddle" />
</a>
</td>
<td width="4%"> </td>
</div>
</td>
<td width="1%"> </td>
<td width="17%" align="right"><a href="task_desc.php?No=21"><img src="images/order_now_btn2.gif" border="0" /></a></td>
</tr>
</table>
</td>
</tr>
</table>
</div> <!-- END TASK-ROW -->
</div> <!-- END CONTENT-BODY -->
</div> <!-- END CONTENT -->
</div> <!-- END COLUMN-LEFT-INNER -->
</div> <!-- COLUMN-LEFT -->
Hi, I need to convert a table to plain div tags, and have no idea how to do it. Here is the original code, and the code I need it to look like is after it: Code: <table width="550" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10" height="29" background="images/table_top_l.PNG"> </td>
<td valign="bottom" background="images/table_top.PNG" class="style2"> TITLE</td>
<td width="10" background="images/table_top_r.PNG"> </td>
</tr>
<tr>
<td background="images/table_s_l.PNG"> </td>
<td><p> </p>
<p> </p></td>
<td background="images/table_s_r.PNG"> </td>
</tr>
<tr>
<td height="10" background="images/table_bot_l.PNG"></td>
<td background="images/table_bot.PNG"></td>
<td background="images/table_bot_r.PNG"></td>
</tr>
</table>
Here is what I need that to look like: Code: <div id="left_inner"> </div> Does anyone here know of any good generators for this kind of thing, I have been using tables for years and am stuck because Joomla requires css tags to dynamically generate modules. Any help I could get is appreciated! hi all... i have a huge style sheet, and i need to convert it to display properly in IE, how do i go about doing that, not recoding all the styles, i am also thinking about the check to se which style sheet to use, i think that i saw a method to do it under the <link> tag or something ?... help a fellow out there are over 800 lines of code in the style sheet.... frank/ Hey All, I'm playing with elastic design for the first time--trying to use ems for all of my lengths, but I'm having a problem with my ems not converting to pixels consistently and I keep running into this using Firebug. For example: Code:
<body>
<div id="page-wrap" class="clearfix">
<div id="left-container"></div>
<div id="center-container"></div>
<div id="right-container"></div>
</div>
<body>
body {
font-size: 62.5%;
}
#page-wrap {
max-width: 96em;
}
#left-container {
position: relative;
float: left;
margin: 1.5em 0 1.5em 1em;
border: 0.1em solid red;
width: 22.8em;
height: 6em;
}
#center-container {
position: relative;
float: left;
margin: 1.5em 0;
border: 0.1em solid red;
padding: 0 1.5em;
width: 44.8em;
height: 6em;
}
#right-container {
position: relative;
float: left;
margin: 1.5em 0 1.5em 1em;
border: 0.1em solid red;
width: 22.8em;
height: 6em;
}
In firebug, the values are computing consistently and thus the right container is getting pushed down because of 3 pxs. In firebug, the computed values a page-wrap = 960px left-container margin-right = 10px border = 1px width = 229 px center-container border = 1px padding (left and right) = 15px width = 449 px right-container margin-left= 10px border = 1px width = 229 px Can anyone help me understand why the widths aren't converting consistently? Why they're adding a pixel? I've tried sending HTML mail with embedded CSS, that is, CSS that is defined between STYLE tags located in the HEAD of the HTML. However, some e-mail clients, esp. Outlook, don't recognize the CSS. In order to force crappy Outlook to recognize CSS, I need to use inline CSS. I really want to keep my CSS defined together by the embedded method since it is easier to modify CSS located in one central source to affect many HTML elements, not by the tedious inline method. Is there a way to force Outlook to recognize my CSS (other than using a link)? If not, is there a PHP function which can accept a file defining embedded CSS styles and parse a HTML file such that a new file is spat out with the CSS inserted inline? I am thinking about writing a function, but jeez, what a pain when it comes to nested CSS definitions. Thanks. Hello, This is my first post, so let my start by saying thanks and hopefully this can be of some help. I work in a college, and I'm somewhat unfamiliar with the CSS used. I also apologize in advance if my issue is simple, but I looked through the rules and resources sections and I felt my issue was somewhat specific. In an effort to save time and frustration, I'll put it in the simplest terms I can: I'm trying to make the site I have control over have a menu that drops down upon mouseover. The site is he www dot ccm dot edu/admissions The menu I'd like to make expandable on mouseover is the "Things to Do" menu on the right side of the page. For example, here's how another site does it: www dot ecc dot edu/admissions You can see the menu on the left side of the page, "Admissions Checklist". I show that site as an example because we're using the same templates. I inquired as to how they achieved the menu on their site, but they unfortunately didn't know. If possible, I'd like to have the menu expand upon mouseover instead of a click. Below are the copied CSS codes for each menu. The site I want the menu to be able to expand on mouseover: Code: /* TodoList */
.AC-TodoList {position:absolute;top:7px;right:-27px;background:#eeeac3;width:164px;padding:19px 13px 0px;}
.AC-TodoList DIV {padding-bottom:14px;text-align:center;}
.AC-TodoHeader {padding-left:21px;}
.AC-TodoHeader H4 {background:url(../images/admissions/header_thingsToDo.gif) no-repeat;width:116px;height:14;text-indent:-9999px;overflow:hidden;}
.AC-TodoList .AC-TodoCheck {display:none;}
#zone1 .AC-TodoList A {display:block;background:url(../images/admissions/bg_todoSm.gif) no-repeat;width:153px;height:22px;padding:8px 5px 4px;font-weight:bold;color:#8d8a6e;}
#zone1 .AC-TodoActive A {background-position:0px -34px;color:#fff;}
#zone1 .AC-TodoComplete A {background-position:0px -68px;width:128px;padding-left:30px;text-align:left;}
#zone1 .AC-TodoList A.large {background-image:url(../images/admissions/bg_todoLg.gif);height:36px;line-height:1.4em;}
#zone1 .AC-TodoActive A.large {background-position:0px -48px;}
#zone1 .AC-TodoComplete A.large {background-position:0px -96px;}
.AC-TodoListCt .controls {display:none;}
And the site that already has the effect I'd like to use:
/* To Do List */
#AC-TodoList {margin:0px -20px 0px -24px;background-color:#586A3E;padding-left:24px;}
#AC-TodoList INPUT {display:none;}
#AC-TodoList .AC-Spacer {display:none;}
#AC-TodoList .controls {display:none;}
.AC-TodoHeader {display:block;width:220px;height:32px;cursor:pointer;}
.AC-TodoHeader H4 {margin:0px;padding:0px;font-size:1em;font-weight:normal;line-height:1.6em;text-transform:uppercase;color:#f9e9b6;padding:0px 0px 0px 5px}
.AC-TodoHeader H4 A {color:#f9e9b6;}
.AC-TodoOpen H4 {background-color:#7F0000;position:absolute;width:233px;height:32px; }
.AC-TodoOpen h4 A {width:238px;height:32px; background-color:#7F0000;}
.AC-TodoContent {background-color:#ffffff; position:absolute;width:238px;height:0px;overflow:hidden; z-index:999; color:#F9E9B6;}
.AC-TodoIncomplete {background:url(../images/admissions/todo_checked.gif) no-repeat 7px 8px transparent; border-bottom:solid 1px #C9C9CA;}
.AC-TodoIncomplete a {display:block;padding:4px 10px 2px 30px;color:#7F0000;text-decoration:none;font-weight:normal;}
.AC-TodoComplete {background:url(../images/admissions/todo_checkedCom.gif) no-repeat 4px 8px transparent; border-bottom:solid 1px #C9C9CA; background-color:#B2B3B4;}
.AC-TodoComplete a {display:block;padding:4px 10px 2px 30px;color:#ffffff;text-decoration:none;font-weight:normal;}
.AC-TodoFooter {background:url(../images/admissions/todo_footer_bg.gif) no-repeat;width:238px;height:41px;cursor:pointer;}
I apologize if I'm breaking any rules, or my issue is simplistic. I especially apologize if my issue isn't well illustrated because of the no links policy. But thank you in advance to anyone that might be able to help. Hello Developers, Here's my question: I have integrated pre-generated slideshow scripts into the 2nd of 3 HTML frames making up the content of a personal portfolio page. The ultimate goal is that when a user mouses over the LARGE image on the right, a button overlay would appear (like a PLAY BUTTON). OR a button controller below the image could cause the video to play. Ultimately, the basic idea is to let the user do the following: A) Select a thumbnail; Result: Corresponding Image/Caption appears B) Mouse-over (or hover) over the selected image and have the option to then PLAY the Video within the same frame. (this could be achieved by either a button layover or a controller just below the video) I tried linking to examples, but apparently I can't as a new member Any help, ideas, suggestions would be immensely appreciated. But please note that I am not a programmer -- this is all new to me as I'm trying to get a better handle on the programming language so I can update my own pages in the future. Thanks so much! Matt hi guys I've begun trying so I finally can leave <tables> I've started trying with a little opensource template, and now want to be how much correct I am... The following image shows the original design, also with the layers division I've created I'd like to know if I'm going ok with this initial design, or which would you modify, and so on. Then I'll follow up the thread with the code, so I can see if I learned correctly Thanks a lot in advance, |
|||||||