28173 sujets

CSS et mise en forme, CSS3

Hello,

J'ai un petit problème,
j'ai un design a 3 colonnes avec une colonne central qui a une taille fixe et les collones exterieures qui on une taille en % pour avoir des coter extenssible

pour l'instant j'ai fais une table avec 3 cellules a 33% et dans celle du milieu j'ai mis un div avec une taille fixe. Tout marchait bien jusqu'au jour ou je suis passé à de l'xhtml strict ...

Y aurait il une technique pour le faire en css avec des div compatible sur tous les browsers ou bien est il possible d'adapter mon système de table ?

Un grand merci d'avance ...
Salut,

Potentiellement, tout est possible, mais sans une page en ligne ou l'intégralité du code html et css, il sera difficile de te dire comment. Smiley cligne
erf sorry,
la page en ligne je ne l'ai pas mais voci le code :


<table cellpadding="0" cellspacing="0" border="0" id="container">
		<tr>
			<td id="left">
				<script type="text/javascript">
					AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','100%','height','255','src','flash/leftBg','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash/leftBg' ); //end AC code
				</script>
				<noscript>
					<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="100%" height="255">
						<param name="movie" value="flash/leftBg.swf" />
						<param name="quality" value="high" />
						<embed src="flash/leftBg.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100%" height="255"></embed>
				</object>
				</noscript>			
			</td>
			<td id="middle">
				<div id="content">
					<div id="leftContent">
						<div id="flashPromos">
							<script type="text/javascript">
								AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','683','height','255','src','flash/flashPromos','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','transparent','movie','flash/flashPromos' ); //end AC code
							</script>
							<noscript>
								<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="683" height="255">
									<param name="movie" value="flash/flashPromos.swf" />
									<param name="quality" value="high" />
									<param name="wmode" value="transparent" />
									<embed src="flash/flashPromos.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="683" height="255" wmode="transparent"></embed>
								</object>
							</noscript>
						</div>
						<div id="webDeals">
							<div id="titleWebDeals"><img src="design/images/content/title_bgcWebDeals.gif" alt="" /></div>
							<div>
								<div class="webDealsBlock">
									<div class="webDealsHeading">
										<div class="picto"><img src="design/images/content/picto/telephony.gif" alt="" /></div>
										<div class="title">
											<script type="text/javascript">
												AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','270','height','32','src','flash/titleCatWebDleals','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','flashvars','titleCatWebdeals=telephony','wmode','transparent','movie','flash/titleCatWebDleals' ); //end AC code
											</script>
											<noscript>
												<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="270" height="32">
													<param name="movie" value="flash/titleCatWebDleals.swf" />
													<param name="quality" value="high" />
													<param name="flashvars" value="titleCatWebdeals=telephony" />
													<param name="wmode" value="transparent" />
													<embed src="flash/titleCatWebDleals.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="270" height="32" flashvars="titleCatWebdeals=telephony" wmode="transparent"></embed>
												</object>
											</noscript>
										</div>
										<div class="link"><a href="#">Consult the whole telephony product range</a></div>
										<div class="clr"></div>
									</div>
									<div class="webDealsContent">
										<div class="illu"><img src="design/content/bgc_hhomeDEFINITIVE4_30.jpg" alt="" /></div>
										<div class="description">
											<h1>Twist 917</h1>
											<p>A new, high-range cordless phone with a sleek design.</p>
											<a href="#" class="moreInfo">more info</a>
											<div><sup>€</sup>129.95 <a href="#"><img src="design/images/content/add2Cart.gif" alt="" /></a></div>
											<span>instead of <span>€ 149.95</span></span>										
										</div>
										<div class="clr"></div>
									</div>
								</div>
								<div class="webDealsBlock">
									<div class="webDealsHeading">
										<div class="picto"><img src="design/images/content/picto/internet.gif" alt="" /></div>
										<div class="title">
											<script type="text/javascript">
												AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','270','height','32','src','flash/titleCatWebDleals','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','flashvars','titleCatWebdeals=internet','wmode','transparent','movie','flash/titleCatWebDleals' ); //end AC code
											</script>
											<noscript>
												<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="270" height="32">
													<param name="movie" value="flash/titleCatWebDleals.swf" />
													<param name="quality" value="high" />
													<param name="flashvars" value="titleCatWebdeals=internet" />
													<param name="wmode" value="transparent" />
													<embed src="flash/titleCatWebDleals.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="270" height="32" flashvars="titleCatWebdeals=internet" wmode="transparent"></embed>
												</object>
											</noscript>
										</div>
										<div class="link"><a href="#">Consult the whole internet product range</a></div>
										<div class="clr"></div>
									</div>
									<div class="webDealsContent">
										<div class="illu"><img src="design/content/bgc_hhomeDEFINITIVE4_32.jpg" alt="" /></div>
										<div class="description">
											<h1>Wireless modem</h1>
											<p>Wireless range up to 30m inside; <br />up to 152m outside</p>
											<a href="#" class="moreInfo">more info</a>
											<div><sup>€</sup>105.00 <a href="#"><img src="design/images/content/add2Cart.gif" alt="" /></a></div>
											<span>instead of <span>€ 149.95</span></span>										
										</div>
										<div class="clr"></div>
									</div>
								</div>
								<div class="clr"></div>
								<div class="webDealsBlock">
									<div class="webDealsHeading">
										<div class="picto"><img src="design/images/content/picto/television.gif" alt="" /></div>
										<div class="title">
											<script type="text/javascript">
												AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','270','height','32','src','flash/titleCatWebDleals','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','flashvars','titleCatWebdeals=television','wmode','transparent','movie','flash/titleCatWebDleals' ); //end AC code
											</script>
											<noscript>
												<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="270" height="32">
													<param name="movie" value="flash/titleCatWebDleals.swf" />
													<param name="quality" value="high" />
													<param name="flashvars" value="titleCatWebdeals=television" />
													<param name="wmode" value="transparent" />
													<embed src="flash/titleCatWebDleals.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="270" height="32" flashvars="titleCatWebdeals=television" wmode="transparent"></embed>
												</object>
											</noscript>
										</div>
										<div class="link"><a href="#">Consult the whole television product range</a></div>
										<div class="clr"></div>
									</div>
									<div class="webDealsContent">
										<div class="illu"><img src="design/content/Belgafax180ts.jpg" alt="" /></div>
										<div class="description">
											<h1>Decoder + Classic</h1>
											<p>national / international channels, both general and thematic.</p>
											<a href="#" class="moreInfo">more info</a>
											<div>3 months FREE <a href="#"><img src="design/images/content/add2Cart.gif" alt="" /></a></div>
										</div>
										<div class="clr"></div>
									</div>
								</div>
								<div class="webDealsBlock">
									<div class="webDealsHeading">
										<div class="picto"><img src="design/images/content/picto/mobile.gif" alt="" /></div>
										<div class="title">
											<script type="text/javascript">
												AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','270','height','32','src','flash/titleCatWebDleals','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','flashvars','titleCatWebdeals=mobile','wmode','transparent','movie','flash/titleCatWebDleals' ); //end AC code
											</script>
											<noscript>
												<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="270" height="32">
													<param name="movie" value="flash/titleCatWebDleals.swf" />
													<param name="quality" value="high" />
													<param name="flashvars" value="titleCatWebdeals=mobile" />
													<param name="wmode" value="transparent" />
													<embed src="flash/titleCatWebDleals.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="270" height="32" flashvars="titleCatWebdeals=mobile" wmode="transparent"></embed>
												</object>
											</noscript>
										</div>
										<div class="link"><a href="#">Consult the whole packs product range</a></div>
										<div class="clr"></div>
									</div>
									<div class="webDealsContent">
										<div class="illu"><img src="design/content/bgc_hhomeDEFINITIVE4_37.jpg" alt="" /></div>
										<div class="description">
											<h1>Internet + Mobile</h1>
											<p>Surf and call with your mobile. Internet wherever you are!</p>
											<a href="#" class="moreInfo">more info</a>
											<div><sup>€</sup>50 per month <a href="#"><img src="design/images/content/add2Cart.gif" alt="" /></a></div>
										</div>
										<div class="clr"></div>
									</div>
								</div>
								<div class="clr"></div>
							</div>
						</div>
					</div>
					<div id="rightContent">
						<div id="comZone"><a href="#"><img src="design/content/banner.jpg" alt="" /></a></div>
						<div id="otherWebSite">
							<div><img src="design/images/content/titleOtherWebsite.gif" alt="" /></div>
							<a href="#"><img src="design/content/proximus.gif" alt="" /> Proximus</a>
							<a href="#"><img src="design/content/bgcTV.gif" alt="" /> Belgacom TV</a>
							<a href="#"><img src="design/content/telindus.gif" alt="" /> Telindus Belgacom ICT</a>						</div>
					</div>
					<div class="clr"></div>
				</div>			
			</td>
			<td id="right">
				<script type="text/javascript">
					AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','100%','height','251','src','flash/rightBg','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash/rightBg' ); //end AC code
				</script>
				<noscript>
					<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="100%" height="251">
						<param name="movie" value="flash/rightBg.swf" />
						<param name="quality" value="high" />
						<embed src="flash/rightBg.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100%" height="251"></embed>
				</object>
				</noscript>			
			</td>
		</tr>
	</table>


et voici la css ...


#container{ width:100%; float:left}
		#left, #middle, #right{ width:33%; vertical-align:top}
		#middle{}
			#content{ width:936px;}
			
			 /*
			  *	Left Content
			  */
			  
				#leftContent{ float:left; width:683px; background:url(../images/content/bg_left.jpg) no-repeat top;}
					#flashPromos{}
					#webDeals{margin-top:20px;}
						#titleWebDeals{ position:absolute; margin:-21px 0 0 10px;}
						.webDealsBlock{ float:left; background:url(../images/content/bgBorderWebDealsBox1.jpg) repeat-x bottom; height:206px; width:322px; margin:11px 0 0 8px; padding:3px;}
						html*.webDealsBlock{ _margin:11px 3px 0 4px}
							.webDealsBlock .webDealsHeading{}
								.webDealsBlock .webDealsHeading .picto{ float:left}
								.webDealsBlock .webDealsHeading .title{ float:left}
								.webDealsBlock .webDealsHeading .link{ float:left; width:290px; padding:0 0 0 30px;}
									.webDealsBlock .webDealsHeading .link a,
									.webDealsBlock .webDealsHeading .link a:link,
									.webDealsBlock .webDealsHeading .link a:active,
									.webDealsBlock .webDealsHeading .link a:visited{ background:url(../images/content/arrowLinkWebDeals.gif) no-repeat left; padding-left:10px; color:#666; text-decoration:none}
									.webDealsBlock .webDealsHeading .link a:hover{ text-decoration:underline}
							.webDealsBlock .webDealsContent{ background:url(../images/content/bgBorderWebDealsBox2.jpg) repeat-x bottom; width:100%; height:159px;}	
								.webDealsBlock .webDealsContent .illu{ width:115px; padding:10px 0 0 5px; float:left;}
								.webDealsBlock .webDealsContent .description{ float:left; width:200px;}
									.webDealsBlock .webDealsContent .description h1{ font-size:18px; color:#5ca3db; padding:15px 0 0 0;}
									.webDealsBlock .webDealsContent .description p{ margin:15px 0 10px 0}
									.webDealsBlock .webDealsContent .description a.moreInfo,
									.webDealsBlock .webDealsContent .description a.moreInfo:link,
									.webDealsBlock .webDealsContent .description a.moreInfo:active,
									.webDealsBlock .webDealsContent .description a.moreInfo:visited{ background:url(../images/content/arrowLinkWebDeals.gif) left no-repeat; padding-left:8px; color:#3157a8; text-decoration:none}
									.webDealsBlock .webDealsContent .description a.moreInfo:hover{ text-decoration:underline}
									.webDealsBlock .webDealsContent .description div{color:#fa0029; font-size:20px; font-weight:bold; margin-top:5px;}
										.webDealsBlock .webDealsContent .description div img{ border:none}
										.webDealsBlock .webDealsContent .description div sup{ font-size:14px; padding:1px 0 0 0; display:block; float:left}
									.webDealsBlock .webDealsContent .description span{ display:block; color:#666}
										.webDealsBlock .webDealsContent .description span span{ text-decoration:line-through; display:inline; color:#000}
			   /*
			 	*	Right Content
			  	*/	
								
				#rightContent{ float:left; width:253px; background:url(../images/content/bg_right.jpg) no-repeat top; padding:520px 0 0 0;}
					#comZone{ margin-bottom:18px;}
						#comZone img{ border:none}
					#otherWebSite{}
						#otherWebSite div{ margin-bottom:8px;}
						#otherWebSite img{ border:none; vertical-align:middle; margin-right:13px;}
						#otherWebSite a,
						#otherWebSite a:link,
						#otherWebSite a:active,
						#otherWebSite a:visited{ display:block; text-decoration:none; color:#577e91; margin-bottom:3px}
						#otherWebSite a:hover{}