...

View Full Version : two column layout problem css



jonathanl
10-25-2010, 07:30 PM
Hi, i really need help here here is my problem, i have a two column design and i would like those to be independent (one shorter than the other. this problem occur only in IE and mozilla ,Chrome is fine

here is what the problem is

http://lh6.ggpht.com/_w8wosWvpTE4/TMW-Iy1539I/AAAAAAAAAEQ/ndpOXzln5BQ/webcss.jpg

here is my code Pease help!! :)
:)


<html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>index</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.sitelayout {
background-color: #FFF;
font-family: "Times New Roman", Times, serif;
color: #FFF;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-position: center top;
}
.rightbox {
background-color: #141311;
background-image: url(images/index_24.jpg);
clear: right;
width: 501px;
color: #FFF;
}
body,td,th {
font-family: Times New Roman, Times, serif;
color: #FFF;
}
footer {
font-family: "Times New Roman", Times, serif;
color: #FFF;
padding: 20px;
}
.sitelayout #Tableau_01 tr td {
}
.sitelayout #Tableau_01 tr td .rightbox table tr th table tr td {
background-color: #141311;
}
-->
</style>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<script src="scripts/swfobject_modified.js" type="text/javascript"></script>
<script 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];}
}
//-->
</script>
<link href="Css/lftbx.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('images/rollover/images/accueil.gif','images/rollover/images/galerie.gif','images/rollover/images/nouveautes.gif','images/rollover/images/nos-chiots.gif')">
<!-- Save for Web Slices (index.psd) -->
<div class="sitelayout">
<table width="1009" height="709" border="0" align="center" cellpadding="0" cellspacing="0" id="Tableau_01">
<tr>
<td colspan="3" rowspan="3">
<img src="images/logo.jpg" width="438" height="132" alt=""></td>
<td colspan="4" rowspan="3">&nbsp;</td>
<td colspan="6">&nbsp;</td>
<td colspan="2">&nbsp;</td>
<td>
<img src="images/spacer.gif" width="1" height="98" alt=""></td>
</tr>
<tr>
<td rowspan="2"><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image50','','images/rollover/images/accueil.gif',1)"><img src="images/rollover/ongleton/images/accueil.gif" name="Image50" width="76" height="34" border="0"></a></td>
<td rowspan="5">
<img src="images/index_06.jpg" width="1" height="46" alt=""></td>
<td rowspan="2"><a href="galerie.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image51','','images/rollover/images/galerie.gif',1)"><img src="images/galerie.gif" name="Image51" width="74" height="34" border="0"></a></td>
<td rowspan="2"><a href="chiots.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image55','','images/rollover/images/nos-chiots.gif',1)"><img src="images/nos-chiots.gif" name="Image55" width="74" height="34" border="0"></a></td>
<td rowspan="2"><a href="contacts.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image53','','images/rollover/images/nouveautes.gif',1)"><img src="images/contact.gif" name="Image53" width="73" height="34" border="0"></a></td>
<td rowspan="2"><img src="images/contacts.gif" width="100" height="34"></td>
<td colspan="2">
<img src="images/menu-dr.gif" width="47" height="33" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="33" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="6">
<img src="images/index_12.jpg" width="47" height="43" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/gauche.gif" width="53" height="1" alt=""></td>
<td colspan="3">
<img src="images/index_14.jpg" width="386" height="1" alt=""></td>
<td colspan="4" rowspan="3">
<img src="images/index_15.jpg" width="200" height="12" alt=""></td>
<td colspan="4" rowspan="3">
<img src="images/index_16.jpg" width="321" height="12" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="5" style="background-image: url(images/index_17.jpg);">&nbsp;</td>
<td colspan="2">
<img src="images/index_18.jpg" width="385" height="10" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2" style="background-color: #3B3B3B;">&nbsp;</td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/index_20.jpg" width="21" height="29" alt=""></td>
<td colspan="7" rowspan="2"><img src="images/titre-products.gif" width="501" height="30" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="29" alt=""></td>
</tr>
<tr>
<td rowspan="2" align="center" valign="top" bgcolor="#3B3B3B"><div class="leftbox">
<table width="375" height="333" border="0">
<tr>
<th height="33" align="center" valign="top" scope="col"><p><img src="images/index_19.jpg" width="377" height="30" alt=""></p></th>
</tr>
<tr>
<th height="195" valign="top" scope="row"><p><img src="images/text_22.jpg" width="376" height="193"></p></th>
</tr>
<tr>
<th height="24" valign="top" scope="row">&nbsp;</th>
</tr>
</table>
</div></td>
<td colspan="3" rowspan="2" style="background-image: url(images/index_23.jpg);">&nbsp;</td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="7" rowspan="2" valign="top" style="background-color: #141311;"><div class="rightbox">
<table width="500" border="0">
<tr>
<th colspan="3" scope="col"><table width="495" border="0">
<tr>
<th colspan="3" scope="col">&nbsp;</th>
</tr>
<tr>
<th width="163" height="21" scope="row"><img src="images/titletag.jpg" width="114" height="26"></th>
<td width="153" align="center"><img src="images/titletag2.jpg" width="114" height="26"></td>
<td width="165" align="center"><img src="images/titletag (2).jpg" width="114" height="26"></td>
</tr>
<tr>
<th height="166" align="center" valign="top" scope="row"><p><img src="images/imagetag.jpg" width="114" height="126"></p>
<p>Chiots &agrave; Vendre</p></th>
<td align="center" valign="top" bgcolor="#141311"><p><img src="images/imagetag2.jpg" width="114" height="126"></p>
<p>Nos Parents</p></td>
<td align="center" valign="top"><p><img src="images/imagetag (2).jpg" width="114" height="126"></p>
<p>Nos installations</p></td>
</tr>
</table></th>
</tr>
</table>
<table width="498" border="0">
<tr>
<th height="366" scope="col"><p><img src="images/garderie.jpg" width="490" height="250"></p></th>
</tr>
</table>
<p>&nbsp;</p>
</div></td>
<td rowspan="2" style="background-image: url(images/index_25.jpg);">&nbsp;</td>
<td rowspan="2" style="background-color: #FFF;">&nbsp;</td>
<td>
<img src="images/spacer.gif" width="1" height="192" alt=""></td>
</tr>
<tr valign="top">
<td colspan="4" rowspan="3"><object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="439" height="342">
<param name="movie" value="Flash/slideroyaume.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="8.0.35.0">
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="scripts/expressInstall.swf">
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="Flash/slideroyaume.swf" width="439" height="342">
<!--<![endif]-->
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="8.0.35.0">
<param name="expressinstall" value="scripts/expressInstall.swf">
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object></td>
<td colspan="2" valign="top" style="background-image: url(images/index_28.jpg);">&nbsp;</td>
<td valign="top">
<img src="images/spacer.gif" width="1" height="81" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/index_29.jpg" width="21" height="30" alt=""></td>
<td colspan="7" style="background-image: url(images/titre-accessories.jpg);"><p>&nbsp;</p></td>
<td colspan="2">
<img src="images/index_31.jpg" width="47" height="30" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="30" alt=""></td>
</tr>
<tr>
<td>
<img src="images/back-bottom-red.jpg" width="7" height="231" alt=""></td>
<td colspan="8" align="center" style="padding-top: 125px; padding-left: 25px; background-image: url(images/index_33.jpg);"><a href="index.html"> Accueil </a>- <a href="galerie.html">Galerie</a> - <a href="chiots.html" title="chits a vendre">Chiots vendre</a> - <a href="prents.html" title="parents">Nos parents</a> - <a href="installation" title="nos locaux">Installation</a> - <a href="contacts.html" title="contact">Contactez-nous</a></td>
<td colspan="2">
<img src="images/droite-35.gif" width="47" height="231" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="231" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="53" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="384" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="7" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="14" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="103" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="76" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="74" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="74" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="73" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="100" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="44" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td></td>
</tr>
</table>
</div>
<!-- End Save for Web Slices -->
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>

LorEye
10-25-2010, 10:32 PM
this site looks like it's built with tables, is there a css file?

It has been a long time since I worked with tables. Would you consider making the site tableless with css? If so I can help you.

jonathanl
10-25-2010, 11:11 PM
i would do anything to get out of the problem i am in :)

i am a graphic designer and dont know very much on coding juste a little.

so where and how we begin?

LorEye
10-26-2010, 01:36 AM
We begin with sharing e-mails :) . Get in touch with me at hey_bug@hotmail.ca

Send what you can that is related to the site, images, html files so I can look at it in whole and play with the code a little bit.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum