AllSeoHelp.com
Search the Entire Site
  • PHP
  • JavaScript
  • CSS
  • HTML
Learn VBA & Macros in 1 Week!

CSS - Help Converting Layout To Css
Full Excel VBA Course - Beginner to Expert

Help Converting Layout To Css

 View Content
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
Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Converting From A Table Layout
Custom Design -> Converting To Tableless Layout
Layout Woes - Jquery Script Breaking Layout
Problems With Layout Of Main Column With In 2 Col Layout
Converting To Css
Converting From Flash To Css
Converting To Pixels
Converting Table To Css??
Converting My Tables To Css. I Need Some Help.
Need Help Converting A Dynamic Table To Css
Problems Converting Tables To Div's
Need Help Converting To 960grid System
Converting A Stylesheet From A .net App To One For Drupal
Converting Tables Into Div Tags?
Css Layout Help..external File Layout Possible
Converting Huge Firefox/mozilla Css To Ie ?
Help W/ Elastic Design - Ems-to-px Not Converting Equally
Converting Legacy Site To Use Css And Xhtml
Converting Embedded Css To Inline Css For Mail()?
Converting A Html Table To Css Div W/ Image In It?


Learn VBA & Macros for Excel in 1 Week!


Converting From A Table Layout

 Similar Tutorials View Content
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?

Custom Design -> Converting To Tableless Layout

 Similar Tutorials View Content
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,

Layout Woes - Jquery Script Breaking Layout

 Similar Tutorials View Content
Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom

Problems With Layout Of Main Column With In 2 Col Layout

 Similar Tutorials View Content
I am working on the new home page which is based on a template.

The left sideColumn is working fine, however I am having a few problems with the mainColumn layout.

Here is a static image to show what I want it to look like

Here are the problems I am having:

1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden.

There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want.

2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css:

#home img {
margin: 5px auto 5px auto;
}

which I thought would do the trick, but it's not.

3) I want the p text to have a 40px margin on the right and left side like the .large does.

Here is what I have for the css:

#home p, .large {
margin: auto 40px auto 40px;
}

It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why.

Here is the xhtml starting at the 2 column part (wrapper): Code:
  	<!--begin wrapper-->
  	<div id="wrapper">
  
  	<!--begin side column -->
  	<div id="sideColumn">
        <span class="category">Products</span>
    <ul>
		<li><a href="/products/spirometers.html">Spirometers</a></li>
		<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
		<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
		<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
		<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
	</ul>
	
	<span class="category">Resources</span> 
    <ul>
      <li><a href="/resources/contact_us.html">Customer Support</a></li>
	  <li><a href="/resources/training_services.html">Training & Services</a></li>
      <li><a href="/resources/exhibitions.html">Exhibitions</a></li>
      <li><a href="/resources/newsletters.html">Newsletters</a></li>
      <li><a href="/resources/downloads.html">Downloads</a></li>
      <li><a href="/resources/useful_links.html">Useful Links</a></li>
      <li><a href="/resources/industry_information.html">Industry Information</a></li>
	  <li><a href="/resources/industry_information.html">Sitemap</a></li>
	</ul>
  </div>
  <!--end of side column -->
  
  <!--begin main column -->  
  <div id="mainColumn">
  
  	<!-- InstanceBeginEditable name="Main_Section" -->
  
  
  
    <div id="home">	
        <div id="scroll"><span>scrolling news will go hear and stop</span></div>
		
        <img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
	
		<span class="large">Welcome to Vitalograph</span>
		
		<p>Vitalgraph offers a wide range of spirometers along with other asthma 
          management equipment with over 40 years experience. From simple hand-held 
          units to sophisticated Windows based spirometry systems, we have it 
          all. Check out our full line of respiratory equipment under the product 
          category.</p>
		
		
      <p><a href="/about_us/about_us.html">more about us...</a></p>
		
		
	</div>
  
  
  <!-- InstanceEndEditable -->
  
  </div>
  <!--end of main column -->
  
  </div> 
  <!--end of wrapper-->



Here is the vitalograph_master.css: Code:
body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	background-color: #ffffff;
	color: #515151;
	margin:0px;
	padding:10px;
}

/*page container settings*/

#page {
	width: 750px;
	height: 600px;
	border: 1px solid #5094F9;
	background-color: #FFFFFF;
	overflow: hidden;
	margin: auto;
	padding: 10px 10px 10px 10px;
	text-align: left;
}

/*logo header and tag settings*/
	
#header {	
	margin: 0;
	padding-bottom: 5px;
	width: 450px;
	height: 36px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	text-align: left;
}

#header img {
    vertical-align: -7px;
    }

.tagline {
	color: #5094F9;
	font-size: 16;
	font-style: italic;
	font-weight: bold;
	display: inline;
	clear: both;
	line-height: 20px;
	margin-left: 10px;
}

/*top bar settings*/

#topbar {
	float: top;
	height: 20px;
	background-color: #5094f9;
	clear: both;
	padding-left: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:link, #topbar a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:hover, #topbar a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#topbar ul {
	list-style: none;
	margin: 0;
	padding-top: 2px;
}

#topbar li {
	display: inline;
	margin-right: 160px;
}

/*Main Section two columns under top section*/

#wrapper{
	padding: 10px 10px 10px 0px;
	width: 100%;
	height: 100%;
}

#sideColumn {
	float:left;
	width:155px;
	height: 78%;
	background-color: #5094F9;
	padding-top: 50px;
	padding-left:10px; 
	padding-bottom:10px;
	pading-right: 10px;
	margin-right: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 20px;
}

.category {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 5px;
}

#sideColumn a:link, #sideColumn a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn a:hover, #sideColumn a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn ul {
	list-style: none;
	padding: 15px 0px 15px 10px;
	margin: 0px;
}

#mainColumn {
	padding: 0px;
}

/*footer*/

.footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #999999;
}

/*text*/

.large {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}



Here is the home.css: Code:
/*home page*/

#home {
	margin: auto;
}

#home img {
	margin: 5px auto 5px auto;
}

#home p, .large {
	margin: auto 40px auto 40px;
}

#home a:link, #home a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#home a:hover, #home a:active {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #990099;
	font-size: 12px;
	font-weight: bold;
}

#scroll {
	width: 560px;
	padding: 5px;
	background-color: inherit;
	border: 1px solid #5094F9;
	margin-bottom: 5px;
}



Any help or suggestions are greatly appreciated.

Converting To Css

 Similar Tutorials View Content
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">&nbsp;<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">&nbsp;<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">&nbsp;<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">&nbsp;<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">&nbsp;<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">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>


Converting From Flash To Css

 Similar Tutorials View Content
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?

Converting To Pixels

 Similar Tutorials View Content
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.

Converting Table To Css??

 Similar Tutorials View Content
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???

Converting My Tables To Css. I Need Some Help.

 Similar Tutorials View Content

Need Help Converting A Dynamic Table To Css

 Similar Tutorials View Content
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?

Problems Converting Tables To Div's

 Similar Tutorials View Content
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.

Need Help Converting To 960grid System

 Similar Tutorials View Content
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>&nbsp;</td>
              <td>&nbsp;</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">&nbsp;</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" />&nbsp;<span class="share" onClick="showHideDiv('share21')" style="cursor:pointer;"> Share</span>
                    </td>
                    <td width="8%">
                      <div id ="share21" style="display:none;">
                        <td width="4%">&nbsp;</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%">&nbsp;</td>
                      </div>
                    </td>
                    <td width="1%">&nbsp;</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 -->


Converting A Stylesheet From A .net App To One For Drupal

 Similar Tutorials View Content
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 ...

Converting Tables Into Div Tags?

 Similar Tutorials View Content
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">&nbsp;</td>
              <td valign="bottom" background="images/table_top.PNG" class="style2">&nbsp;&nbsp;TITLE</td>
              <td width="10" background="images/table_top_r.PNG">&nbsp;</td>
            </tr>
            <tr>
              <td background="images/table_s_l.PNG">&nbsp;</td>
              <td><p>&nbsp;</p>

	                <p>&nbsp;</p></td>

              <td background="images/table_s_r.PNG">&nbsp;</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!

Css Layout Help..external File Layout Possible

 Similar Tutorials View Content
Hi there and thanks for reading & helping! I am new to this site, but here is my question:

I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible?

Converting Huge Firefox/mozilla Css To Ie ?

 Similar Tutorials View Content
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/

Help W/ Elastic Design - Ems-to-px Not Converting Equally

 Similar Tutorials View Content
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?

Converting Legacy Site To Use Css And Xhtml

 Similar Tutorials View Content

Converting Embedded Css To Inline Css For Mail()?

 Similar Tutorials View Content
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.

Converting A Html Table To Css Div W/ Image In It?

 Similar Tutorials View Content
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..
Privacy