|
CSS - Problems Converting Tables To Div's
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. Similar TutorialsHi, 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! This was formerly another post. Making progress and almost there. I have a website under develepoment... My site I have 4 problems. 1. and most important in IE but not in FF the bgimage is showing through the margin or padding, im not sure which of the last image being displayed.. How do I get that out of there. Comes across as a red line after my top gutter. 2. The banner image and gutter images seem to move over to the right by 1px in both browsers. 3. How do i get the left container div to go all the way down the page. 4. How do i get the secondary navigation in the footer to align with the centercontent div and the rightcontent div but not the left content div. any help would be appreciated... due to design guidelines i have 3 tables around my content. this content consists of apx 100 rows with apx 8-10 cols. each of these seperate properties which i define via my file styles.css. everything looks great/correct. the problem is that in netscape it takes AGES to render and display (not to load the data) the page. simplified my page may look like this: <BLOCKQUOTE><font size="1" face="Verdana,Arial,Helvetica">code:</font><HR><pre>=== CORPORATE DESIGN-STUFF === <table><tr><td> <table><tr><td> <table><tr><td> --- MY CONTENT --- <table> <tr class="row1color"> <td class="col1properties">Text</td><td class="col2properties">Text</td> etc... </tr> [followed by 100 rows with 8 cols each] </table> --- /MY CONTENT --- </td></tr></table> </td></tr></table> </td></tr></table> === /CORPORATE DESIGN-STUFF ===[/code] if i remove the link to the css file the page loads acceptably fast, the same when i delete the content of the file. this makes me think it's not directly linked to NS's problems with nested tables. looks more like NS not liking CSS-statements deep in nested tables... took to an extreme with a table with 6000 cells: it took IE 2 secs to display the page, NS needed 180 (!!!). any hints towards why this effect might occur are very appreciated. [This message has been edited by RedFox (edited November 02, 2000).] [This message has been edited by RedFox (edited November 02, 2000).] Hi, I have used bottom-border: 1 on my links and the problem I am having is making sure that these borders are not displayed on images which have <a "somelink"> </a> wrapped around them. I have used #content a > img { border: 0; } and this seems to have solved the problem however when I have an image link nested into a table the border reappears and I have tried everything to get it to remove it. If anyone else knows why it reappears when nested in tables please let me know how I can fix it. Regards, Graham my layout is a left border, main content, then right border, all vertical columns. here is their code: Code:
.left {
background-image: url('images/obj_left.gif');
background-repeat:repeat-y;
width:28px;
margin:0px;
}
.maintable {
width: 100%;
background-color:#FFFFFF;
border-left:3px solid black;
border-right:3px solid black;
}
.right {
background-image: url('images/obj_right.gif');
background-repeat:repeat-y;
width:28px;
margin:0px;
}
i also float them left, so imagine that is there. so i have code like this <div class='left floatleft'></div> <div class='maintable floatleft'></div> <div class='right floatleft'></div> but why cant i see the images in right and left? 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>
I'm not confident enough with CSS to just use it, so I'm mixing it with some tables too. I want a layout with two tables next to each at the top and then another below. The two at the top are working fine, but the one below keeps jumping back up to the top. I've managed to get an ugly fix by putting in a load of <br> but this doesn't work in IE7 (unless I add a lot more, pushing the content way down in other browsers) and isn't much of a solution. The other problem I have is that I want to have the majority of my page with a white background, but to get a surrounding border I've set the body background to be a colour and then placed a div around all the content. I want this div to be the size of the page and so set it's height to 100%, but this makes it too small. Not sure why. Here is my code for my page and CSS. If anyone can help I'd be most grateful. 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></title>
<link href="incl/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function navon(num) {
document.getElementById("nav" + num).style.backgroundColor = '#CDEB8B';
document.getElementById("nav" + num).style.paddingTop = '0px'
document.getElementById("nav" + num).style.paddingBottom = '0px';
document.getElementById("nav" + num).style.borderTopWidth = '10px';
document.getElementById("nav" + num).style.borderBottomWidth = '10px';
}
function navoff(num) {
document.getElementById("nav" + num).style.backgroundColor = '#C3D9FF';
document.getElementById("nav" + num).style.paddingTop = '8px'
document.getElementById("nav" + num).style.paddingBottom = '8px';
document.getElementById("nav" + num).style.borderTopWidth = '2px';
document.getElementById("nav" + num).style.borderBottomWidth = '2px';
}
//-->
</script>
</head>
<body>
<div class="main">
<table width="29%" border="0" cellpadding="2" cellspacing="5" align="left">
<tr>
<td><img src="" alt="" width="230" height="80" border="0" /></td>
</tr>
</table>
<table width="70%" height="60px" border="0" cellpadding="2" cellspacing="5" align="right">
<tr>
<td width="180px" class="nav" id="nav1" onmouseover="navon('1')" onmouseout="navoff('1')">link</td>
<td width="180px" class="nav" id="nav2" onmouseover="navon('2')" onmouseout="navoff('2')">link</td>
<td width="180px" class="nav" id="nav3" onmouseover="navon('3')" onmouseout="navoff('3')">link</td>
<td width="180px" class="nav" id="nav4" onmouseover="navon('4')" onmouseout="navoff('4')">link</td>
<td width="180px" class="nav" id="nav5" onmouseover="navon('5')" onmouseout="navoff('5')">link</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<table width="100%" border="0" cellpadding="2" cellspacing="5" align="center">
<tr>
<td width="70%">
some content
</td>
<td width="30%">
some more content
</td>
</tr>
</table>
</div>
</body>
</html>
Code:
@charset "utf-8";
/* CSS Document */
body {
padding-right: 4%;
padding-left: 4%;
padding-top: 30px;
padding-bottom: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
letter-spacing: 0.1em;
color: #000000;
background-color: #EEEEEE;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:active {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
.main {
background:#FFFFFF;
border: 10px solid #36393D;
width: 89%;
padding: 5%;
}
.nav {
padding: 8px;
background-color: #C3D9FF;
vertical-align: middle;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24px;
color: #36393D;
cursor:pointer;
border: 2px solid #36393D;
}
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 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??? 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. 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? Hi 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? 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 ... 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? 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 -->
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.. 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. |
|||||||