28106 sujets

CSS et mise en forme, CSS3

Bonjour, j'ai un probléme un peu commun mais j'ai malgré tout pas trouvé ma réponse dans mes recherches.
Je fais un site avec dans mon div ou je met mon contenu principale une partie de l'arriére graphique qui se repete en hauteur.
Mon but serait de fixer une hauteur minimum, est ensuite que la hauter s'adapte au contenue, c'est a dire si ma page a beaucoup de contenu que la hauteur s'agrandisse.
Au pour l'instant j'ai defini ma hauteur et si je me du contenue en trop, celui au lieu d'agrandir le div, depasse sur mon pagedepage (footer).

Commet faire alors pour resoudre ce probléme?

Merci
Pourtant je viens de mettre mi-height, et sur Firefox 3 ca deborde... Firefox comprendrait il vraiment cette valeur ?
Par contre sous IE 7 ca marche super bien comme je veux (pour une fois)

Donc comment gerer ce min height ss firefox ??

Merci
Firefox comprend tout à fait min-height.

Avec une page en ligne (ou à défaut suffisamment de code html et css pour pouvoir reproduire le problème) ce serait plus simple de t'aider...
Voila en gros mon body, je met tout mais je pense pas que ca soit essentiel, l'essentiel est le div background_center_def

<!-- Content -->
	<div id="content_def">
	
		<div id="background_center_def">
			<div id="center_def">
				<div id="menu_top">
				
					<img src="images/btn_menu_sel_03.jpg"/><img src="images/btn_menu_def_04.jpg"/><img src="images/btn_menu_def_05.jpg"/><img src="images/btn_menu_def_06.jpg"/><img src="images/btn_menu_def_07.jpg"/>
				</div>
				
				
			
				
			
				<div id="left_side">
					<div class="nav_left">
					<a href="/"> Home </a>
					</div>
					<B_listleft> 
					<div class="menu_left">
							<ul> <BOUCLE_listleft(ARTICLES) {id_rubrique} {0,8}> 
									<li><div class="arrow"> </div><a href="#URL_ARTICLE" >[(#TITRE|couper{19})]</a></li>
							</BOUCLE_listleft> </ul>
					</div>
					</B_listleft> 
					<div class="ad_left">
						<div class="boxad1"></div>
						<div class="boxad2"></div>
						<div class="boxad3"></div>
					</div>
				</div>
			
				<div id="main_side">
				
						<div class="nav_right">
						<p><BOUCLE_ariane(HIERARCHIE){id_article}> > <a href="#URL_RUBRIQUE">[(#TITRE|couper{70})]</a></BOUCLE_ariane>[ > (#TITRE|couper{110})] </p>
						</div>
						<div class="main_cont">
						<div class="title">[(#TITRE|image_typo{police=antique.ttf,taille=19,couleur=03384d,align=left,largeur=540})] </div>
						#TEXTE
			
						</div>
						<div class="right_cont">
						<div class="title"> </div>
						<BOUCLE_news_right(ARTICLES) {id_rubrique=5} {par date} {inverse} {0,3}>
									<p><div class="date"> [(#DATE|affdate{'m/d/Y'})]</div>
									<a href="#URL_ARTICLE" [title="(#DESCRIPTIF|textebrut|entites_html)"]>#TITRE</a><br />
									[(#TEXTE|textebrut|couper{100})]</p>
						</BOUCLE_news_right>
						
						</div>
						
						
						<B_documents_joints>
			<div id="documents_joints">
				<h2><:titre_documents_joints:></h2>
				<ul>
					<BOUCLE_documents_joints(DOCUMENTS) {id_article} {mode=document} {par num titre, date} {doublons}>
					<li>
						<div class="spip_doc_titre"><a href="#URL_DOCUMENT" title="<:bouton_telecharger:>" type="#MIME_TYPE">[(#TITRE|sinon{<:info_document:>})]</a> <small>(#TYPE_DOCUMENT[ - (#TAILLE|taille_en_octets)])</small></div>
						[<div class="spip_doc_descriptif">(#DESCRIPTIF)</div>]
					</li>
					</BOUCLE_documents_joints>
				</ul>
			</div>
			</B_documents_joints>
				</div>		
					
			</div>
			</div>
		

			
			<div id="border_bot_home"></div></div>
			  <!-- Footer -->
			<INCLURE{fond=footer}>


Et voici les CSS essentiels :

#content_def{margin: 0 auto 0 auto; width: 960px;}
#center_def{width: 920px;  margin: 0 20px 0 20px; }
#background_center_def{	width: 960px; background: url(../images/background.jpg); min-height: 690px; }


Merci et desole pour le code Smiley cligne
Euh... ce n'est déjà pas l'idéal de copier le code mais tant qu'à faire pourrais-tu au moins donner le code généré (Afficher la Source) plutôt que celui du template Smiley cligne ?
Ok je comprend que le code SPIP fait mal a la tete.

Mon doctype ca peut tjrs servir :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


mon body
<body>
  <!-- Top -->
<div id="container">

	<div id="top_h">

	<div class="link_top">
	<div class="link_key"><a href="#" >Member Login</a> | </div>
	<div class="link_mail"><a href="#" >Contact Us</a> | </div>
	<div class="link_help"><a href="#" >Help</a></div>
	</div>

	<a href="/"> 	<div class="top_logo">	</div></a>
	</div>	
		  <!-- Content -->
	<div id="content_def">
	
		<div id="background_center_def">
			<div id="center_def">
				<div id="menu_top">
<img src="images/btn_menu_def_03.jpg"/><img src="images/btn_menu_def_04.jpg"/><img src="images/btn_menu_def_05.jpg"/><img src="images/btn_menu_def_06.jpg"/><img src="images/btn_menu_def_07.jpg"/>
				</div>

				
				
			
				
			
				<div id="left_side">
					<div class="nav_left">
					<a href="/"> Home </a>
					</div>
					 
					<div class="menu_left">
							<ul>  
									<li><div class="arrow"> </div><a href="./?Washington-DC-Digital-Agency" >Washington DC Digit</a></li>

							 
									<li><div class="arrow"> </div><a href="./?Leading-Washington-DC-Digital" >Leading Washington</a></li>
							 
									<li><div class="arrow"> </div><a href="./?Janmedia-Interactive-Inc" >Janmedia Interactiv</a></li>
							 
									<li><div class="arrow"> </div><a href="./?Janmedia-Teams-Up-with-Carbonfund" >Janmedia Teams&nbsp;(...)</a></li>
							 </ul>
					</div>

					 
					<div class="ad_left">
						<div class="boxad1"></div>
						<div class="boxad2"></div>
						<div class="boxad3"></div>
					</div>
				</div>
			
				<div id="main_side">
				
						<div class="nav_right">
						<p> &gt; <a href="./?-News-and-events-">News and events</a> &gt; <a href="./?-News-">News</a> &gt; Washington DC Digital Agency Janmedia Releases New e-edition for The Washington Times </p>

						</div>
						<div class="main_cont">
						<div class="title"><img src='local/cache-texte/04ea3017dcab77bbe1c7da7ed470b2b6.png' width='502' height='53' style='width:502px;height:53px;' class='format_png' alt='Washington DC Digital Agency Janmedia Releases New e-edition for The Washington Times ' /> </div>
						<p class="spip"><strong class="spip">Washington DC - July 16, 2008</strong> - Janmedia partnered with The Washington Times to develop an e-edition as a complement their existing print edition.  The e-edition required that the reader experience the same look and attributes of the printed edition, yet also allowed for several improved features and functionality.  The result is a custom viewing interface leveraging Flash, Flex and JavaScript.  The interface boasts the following features:</p>

<p class="spip">* Full zoom functionality, including click-wheel zooming
    * Search by page, edition, or all editions
    * Click and drag page flipping
    * Interface customization via color scheme picker
    * Fit to width/Fit to Height
    * Article headline picker enabling direct access to any article
    * Page View (like the print version) and Article View (the whole article)
    * Titles linking to Article View
    * Linking to pages where articles are continued
    * Tab navigation to arrive into a given section (Nation, Sports, etc)</p>

<p class="spip">This initiative not only pushed the envelope of front end rendering for The Washington Times’ readers; this system also was constructed to complement The Washington Time’s existing workflow.  The Washington Times constructs and prepares their newspaper to go to print utilizing PDF, so the system allows them to batch upload an entire edition with a click of a mouse.  Since this is the native format they utilize to send the paper to print, they now seamlessly deliver the print and e-edition having to duplicate their efforts or maintain redundant versions of the same content.</p>

<p class="spip">The Washington Times e-edition</p>

<p class="spip">The system also offers The Washington Times full flexibility in marking up “Hotspots” anywhere on a given page, as well as to define the action that occurs when clicking that area of a page.   They can create an internal link that goes to another page within the e-edition, an article link that will load the entire content of an article into Article View and external links that enable them to link to other websites of advertisers or relevant content.</p>

<p class="spip">The final product is a system that is quite easy to administer, while at the same time delivering a rich end user experience without sacrificing features or functionality.  The system is powered by Janmedia&#8217;s revolutionary content management system, The Rainforest Administration Suite.</p>

<p class="spip">The separation of content and information from physical media is growing exponentially.  The Washington Times’ collaboration with Janmedia has positioned them to be and remain ahead of the curve in this arena for years to come.  To view the system, please visit  http://e-edition.washingtontimes.com  and subscribe to the online publication.</p>

<p class="spip">About Rainforest Content Management
Rainforest is a premier Content Management Platform developed by Janmedia. Utilizing Rainforest allows Janmedia clients to reduce long term cost exposure by taking advantage of its inherent text editor, page creator, automatic archive, user access management, statistical and other capabilities</p>

<p class="spip">Rainforest is designed to power enterprise-grade business identity websites, e-commerce, eLearning, intranet/extranet as well as data-heavy portal solutions. By effectively utilizing Java 4-Tier architecture and XML, Rainforest provides an adaptable framework and launching point from which a system can efficiently grow and integrate with other external applications and servers. J2EE and XML is the ideal environment for growth.</p>

<p class="spip">About Janmedia Interactive
Janmedia is an international full-service digital agency that provides clients with a wide range of services including new media and traditional graphic design, integrated marketing, branding, software development, interactive CD and DVD production, and eCommerce and eLearning system development. Janmedia strives to provide one stop shop style design solutions for companies of all sizes and backgrounds with focus on high quality, adaptability and compliance with existing usability and accessibility standards. For more information, go to  http://www.janmedia.com.</p>
 
			
						</div>
						<div class="right_cont">
						<div class="title"> </div>
						
									<p><div class="date"> 07/16/2008</div>
									<a href="./?Washington-DC-Digital-Agency" >Washington DC Digital Agency Janmedia Releases New e-edition for The Washington Times </a><br />

									Washington DC - July 16, 2008 - Janmedia partnered with The Washington Times to develop an&nbsp;(...)</p>
						
									<p><div class="date"> 06/24/2008</div>
									<a href="./?Janmedia-Interactive-Inc" >Janmedia Interactive, Inc Collaborates with Office Paper Systems </a><br />
									Washington DC – June 24, 2008 – Janmedia Interactive, INC, a Washington DC based New Media&nbsp;(...)</p>
						
									<p><div class="date"> 06/13/2008</div>

									<a href="./?Leading-Washington-DC-Digital" >Leading Washington DC Digital Agency Flying High with Aviation Adventures </a><br />
									Washington DC – June 13, 2008 –Washington DC based Janmedia Interactive, INC, one of the DC&nbsp;(...)</p>
						
						
						</div>
						
						
						
				</div>		
					
			</div>
			</div>
		

			
			<div id="border_bot_home"></div></div>
			  <!-- Footer -->

						<div id="footer">
				<div class="frame_partner">
						<div class="cont_partner">	<div class="titre_partner" ></div>		
						</div>
				</div>
				
	
				<div class="bottom">
					<ul> 
								<li><a href="#" class="footft">About the Chamber</a></li>
								<li><a href="#" class="footft">Membership</a></li>

								<li><a href="#" class="footft">News and Events</a></li>
								<li><a href="#" class="footft">Resources</a></li>
								<li><a href="#" class="footft">Contact</a></li>
								<li><a href="/spip.php?page=plan" class="footft">Site Map</a></li>
							</ul>
						<div class="copypower" >
						©2007 Falls Church Chamber of Commerce, powered by <a title="Interactive Agency" target="_blank" href="http://www.janmedia.com" class="footft"><span>Interactive Agency </span>Janmedia Interactive, Inc.</a>

						<span></div>
				</div>
			</div>
</div><div class="spip-admin-float" dir="ltr">
	<a href="http://localhost/FCCC_spip/ecrire/?exec=articles&amp;id_article=6" class="spip-admin-boutons">Modify this article (6)</a>
	<a href="./?Washington-DC-Digital-Agency&amp;var_mode=recalcul" class="spip-admin-boutons">Refresh this page</a>
	<a href="http://localhost/FCCC_spip/ecrire/?exec=statistiques_visites&amp;id_article=6" class="spip-admin-boutons">visits:&nbsp;0;&nbsp;popularity:&nbsp;0</a>

</div></body>


Merci Smiley smile
Modifié par Elie42 (28 Jul 2008 - 20:45)
Elie42 a écrit :
Mon doctype ca peut tjrs servir :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Oui... d'autant plus qu'il est tronqué : voir le tuto DTD HTML4.01 et XHTML1.0 : comment choisir.

Sinon ton code comporte plusieurs erreurs : je t'invite à copier/coller tout le code de ta page dans ce validateur.

D'autre part j'aurais mieux fait de te demander tout de suite l'intégralité du code css car en l'état le min-height ne pose pas de problème.


Edit: concernant les erreurs, le lien suivant devrait t'être utile : Hiérarchie des balises.
Modifié par Heyoan (28 Jul 2008 - 21:11)
J'ai nettoyer un peu tout ca et mis le bon DTD.
Maintenant mon texte ne deborde plus sur le reste mais mon arriere plan ne s'agrandit pas pour autant...
L'erreur est que sur Firefox, il semble tout simplement que Firefox prenne min-height comme height(car si je vais varie la valeur mon arriere plan varie), et ne l'agrandisse donc pas en fonction du contenu...
Heyoan a écrit :
Firefox comprend tout à fait min-height.

Avec une page en ligne (ou à défaut suffisamment de code html et css pour pouvoir reproduire le problème) ce serait plus simple de t'aider...
Comme je te disais, il faudrait voir tout ton code css.
Ok je vais commence a m'y ateller, j'ai pas mal d'erreur de ce type :
Line 38, Column 36: document type does not allow element "div" here; missing one of "object", "ins", "del", "map", "button" start-tag.

a écrit :
<a href="/"> <div class="top_logo"> </div></a>



The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").


Y'a un probleme de mettre un div en lien ?
Modifié par Elie42 (28 Jul 2008 - 23:48)
Here we are :

/* global */
body { 
	margin: 0; 
	padding: 0; 
	font: normal 10pt Tahoma,Arial,Helvetica,Sans-serif; 
	line-height: 1.5;
	background: #d3e8ff url(../images/pattern_gradient.jpg) repeat-x scroll center top;
	text-align: center; 
	border: none; 

}
p {
	font: normal 12px Tahoma,Arial,Helvetica,Sans-serif; 
}

a { color: #348900; }

a:hover, a:active { text-decoration: none; }

a span { display: none; }

form, fieldset { padding: 0; margin: 0; border: none; }
select, input { font-size: 10px; }
textarea { font-size: 12px; font-family: Arial,Tahoma,Helvetica,Sans-serif; }

a img { border: none; }
img {border: none; 	margin: 0; padding: 0; vertical-align: bottom;  }
#container{ margin: 0 auto 0 auto; width: 960px;	}


/* header */
#top_h{	position: relative; height: 140px; margin-left:20px;  }
#top_h .link_top {height: 20px; margin-right: 20px; padding-left: 600px; float: left; display: inline; overflow: hidden;}
#top_h .link_key {padding-left: 25px; float: left; background: url(../images/ico_key.jpg) no-repeat; }
#top_h .link_mail {padding-left: 25px; float: left; background: url(../images/ico_mail.jpg) no-repeat; }
#top_h .link_help {padding-left: 25px; float: left; background: url(../images/ico_help.jpg) no-repeat; }
#top_h .top_logo {background: url(../images/logo_fccc.jpg) no-repeat; width : 167px; height : 82px; position: absolute; left :0; top: 20px; }



/* footer */
#footer{ clear: both; width: 960px; height: 100px;  }
#footer .frame_partner{ height: 74px; width: 960px; overflow: hidden; background: url(../images/frame_partner.jpg) repeat-x scroll center top;}
#footer .frame_partner .cont_partner{ height: 40px; width:920px; margin: 10px 20px 10px 20px; background: #fff;  }
#footer .frame_partner .titre_partner{ height: 40px; width:100px; float: left; background: url(../images/img_partner.jpg) no-repeat; }

a.footft { color: #618391; }
a.footft:hover, a.footft:active { 	text-decoration: none; }

#footer .bottom {width: 920px; margin: 5 auto 0 auto;  height: 25px; }
#footer .copypower { color: #618391; font-size: 7pt; float: right;text-align:right; margin-top:5px; }
#footer ul {  margin: 0; padding: 0; list-style: none;  }
#footer ul li {	margin-right: 12px; padding:0; background: none; float: left;}
#footer ul li a { font-size: 10px;  }




/* home */
#center_home{ width: 920px; margin: 0 20px 0 20px;}

#menu_home_top{ width: 917px; height: 40px; margin-left: 6px; overflow: hidden;}
#menu_home_top .home_image1 {width: 170px; height: 40px; float: left; cursor: pointer;  background: url(../images/btn_menu_about_the_chamber.jpg) no-repeat; }
#menu_home_top .home_image2 {width: 115px; height: 40px; float: left; cursor: pointer;  background: url(../images/btn_menu_membership.jpg) no-repeat; }
#menu_home_top .home_image3 {width: 155px; height: 40px; float: left; cursor: pointer;  background: url(../images/btn_menu_news_and_events.jpg) no-repeat; }
#menu_home_top .home_image4 {width: 100px; height: 40px; float: left; cursor: pointer;  background: url(../images/btn_menu_ressources.jpg) no-repeat; }
#menu_home_top .home_image5 {width: 170px; height: 40px; float: left; cursor: pointer;  background: url(../images/btn_menu_about_falls_church.jpg) no-repeat; }
#menu_home_top .home_image6 {width: 203px; height: 40px; float: left; background: url(../images/btn_menu_right.jpg) no-repeat; }


#box_top1 {float: left; text-align: left; height: 190px; width: 420px; margin: 0 10px 0 10px;  padding-left: 20px;  background: #fff url(../images/pattern_gradient_box.jpg) repeat-x scroll center top;}
#box_top1 .title {height: 50px; width:420px; background: url(../images/img_lookup_fallschurch.jpg) no-repeat; }
#box_top1 p {line-height:20px;}
#box_top1 a {font-weight:bold;}

#box_top2 {float: right; text-align: right; height: 190px; width: 450px; margin: 0 10px 0 0; display: block; background: #fff url(../images/pattern_gradient_box.jpg) repeat-x scroll center top;}
#box_top2 .text {float:left; height: 190px; left: 20px; width:280px; padding-top: 61px; background: url(../images/img_lookup_right.jpg) no-repeat; text-align: left;}
#box_top2 .text .line {clear: both; width: 280px; height: 24px;}
#box_top2 .text .line .blue_arrow {float: left; width: 10px; height: 20px; background: url(../images/arrow_blue_frontpage.png) no-repeat center center; }
#box_top2 .text .line a {float: left; display: inline; margin-left: 10px; font-weight: bold;}
#box_top2 .left {float:left; height: 190px; width:20px; }
#box_top2 .right {float:right; height: 190px; width:150px; background: url(../images/img_lookup_rightb.jpg) no-repeat; }

#box_middle{ width: 920px; overflow: hidden; clear: both; }
#box_middle .middle1{ float: left; height: 170px; width: 290px; margin: 10px;  background: #6fae47;}
#box_middle .middle2{ float: left; height: 170px; width: 300px; margin: 10px 0 10px 0; background: #6fae47;}
#box_middle .middle3 {float: left; height: 170px; width: 290px; margin: 10px; background: #6fae47;} 
#box_bottom1{ clear: both; float: left; height: 159px; width: 440px; margin: 0 0 20px 10px; background: #fff url(../images/pattern_gradient_box_bottom.jpg) repeat-x scroll center top;}
#box_bottom2{float: left; height: 159px;width: 450px; margin: 0 10px 20px 10px;background: #fff url(../images/pattern_gradient_box_bottom.jpg) repeat-x scroll center top;}

#border_bot_home{ height: 10px; width: 960px; background: #fff url(../images/border_bot_cont.jpg) repeat-x scroll center top; overflow:hidden;}



/* default */

#content_def{margin: 0 auto 0 auto; width: 960px;}
#center_def{width: 920px;  margin: 0 20px 0 20px; }
#background_center_def{	width: 960px; background: url(../images/background.jpg); min-height: 650px; }

#menu_top{ width: 920px; height: 38px; overflow: hidden;}
#menu_top .def_image1 {width: 178px; height: 38px; float: left; cursor: pointer;  background: url(../images/btn_menu_def_03.jpg) no-repeat; }
#menu_top .def_image1_sel {width: 178px; height: 38px; float: left; cursor: pointer;  background: url(../images/btn_menu_sel_03.jpg) no-repeat; }
#menu_top .def_image2 {width: 114px; height: 38px; float: left; cursor: pointer;  background: url(../images/btn_menu_def_04.jpg) no-repeat; }
#menu_top .def_image2_sel {width: 114px; height: 38px; float: left; cursor: pointer;  background: url(../images/btn_menu_sel_04.jpg) no-repeat; }
#menu_top .def_image3 {width: 153px; height: 38px; float: left; cursor: pointer;  background: url(../images/btn_menu_def_05.jpg) no-repeat; }
#menu_top .def_image3_sel {width: 153px; height: 38px; float: left; cursor: pointer;  background: url(../images/btn_menu_sel_05.jpg) no-repeat; }
#menu_top .def_image4 {width: 102px; height: 38px; float: left; cursor: pointer;  background: url(../images/btn_menu_def_06.jpg) no-repeat; }
#menu_top .def_image4_sel {width: 102px; height: 38px; float: left; cursor: pointer;  background: url(../images/btn_menu_sel_06.jpg) no-repeat; }
#menu_top .def_image5 {width: 373px; height: 38px; float: left; background: url(../images/btn_menu_def_07.jpg) no-repeat; }

#left_side {float: left; width: 174px; } 
#left_side .nav_left {height: 15px; width: 172px; padding: 0 5px 5px 0; text-align: right; line-height:14px}
#left_side .nav_left a {font-size: 10px; }
#left_side .menu_left  {width: 174px; background: #145600 url(../images/pattern_gradient_left_menu.jpg) no-repeat left top; border-color: #145600; border-style: solid; border-width: 1px;  margin: 0 0 1px 2px; padding: 15px 0 25px 0; }
#left_side .menu_left ul  {width: 154px; height: auto; list-style: none; margin: 0; padding-left: 20px; }
#left_side .menu_left ul li  {width: 150px; height: 25px; margin: 0; padding: 2px 0 2px 0; text-align: right; background: url(../images/bar_left_menu.jpg) no-repeat left bottom; }
#left_side .menu_left ul li .arrow {width: 16px; height: 15px; float: right; padding: 0; margin: 0; background: url(../images/sign_left_menu.png) no-repeat center bottom;}
#left_side .menu_left ul li .active { color: #000;}
#left_side .menu_left ul li a { color: #fff; font-size: 11px; font-weight:bold; margin: 0 4px 0 0;  }
#left_side .menu_left ul li a:hover { text-decoration: none;}
#left_side .ad_left {width: 174px; height: 360px; background: #145600 url(../images/pattern_gradient_left_menu.jpg) no-repeat right top; border-color: #145600; border-style: solid; border-width: 1px;  margin: 0 0 2px 2px; }
#left_side .ad_left .boxad1 {width: 140px; height: 80px; margin: 20px 16px 0 16px; background: url(../images/box_weeksfeaturedcompany.jpg) no-repeat;}
#left_side .ad_left .boxad2 {width: 140px; height: 80px; margin: 20px 16px 0 16px; background: url(../images/box_featuredchamberevent.jpg) no-repeat;}
#left_side .ad_left .boxad3 {width: 140px; height: 80px; margin: 20px 16px 0 16px; background: url(../images/box_weeksmember.jpg) no-repeat;}

#main_side {width: 734px; float: left; margin: 0px; margin-left: 4px; }
#main_side .nav_right {height: 20px; width: 739px; background-color: #d6e9ff; text-align: left; padding-left: 1px; float: left;}
#main_side .nav_right p {font-size: 10px; font-weight:bold; color: #03384d; margin-top: 2px;}
#main_side .main_cont {min-height: 585px; width: 540px; clear: both; float: left; background-color: #fff; padding: 20px 0 0 30px; text-align: left;}
#main_side .main_cont .title {height: 29px; width: 540px; background: #fff url(../images/background_title_art.jpg) repeat-x scroll; }
#main_side .main_cont .title img {float: left;}
#main_side .right_cont {min-height: 500px; width: 110px; float: left; background-color: #fff; margin: 31px 20px 0 30px; font-size: 11px; text-align: left;}
#main_side .right_cont .title {height: 18px; width: 110px; float: left;  background: url(../images/img_inthenews.jpg) no-repeat; margin-bottom: 10px;}
#main_side .right_cont .date {color: #696a69;}
#main_side .right_cont .news {height: 400px; width: 110px; padding-top: 10px; clear: both; text-align: left; }


Pour les elements enfants, ca veut dire que pour faire un lien image, on est oblige de se faire ca a l'ancienne avec <a> puis <img> ??

Merci bcp en tout cas
Modifié par Elie42 (29 Jul 2008 - 00:15)
Elie42 a écrit :
Pour les elements enfants, ca veut dire que pour faire un lien image, on est oblige de se faire ca a l'ancienne avec <a> puis <img> ??
Euh... pas compris !

Ce que je veux dire c'est que tu peux faire
<div><a ...>lien</a></div>
mais pas
<a ...><div>lien</div></a>
.

Sinon je crois que je viens de comprendre ta question : tu veux que lorsque ton div #main_side s'allonge, son conteneur s'allonge également or il est en float et il faut donc suivre quelques règles particulières : lire Comment éviter que mes éléments flottants (float) dépassent de leur conteneur.

Il me semble plus généralement que quelques révisions ne seraient pas de trop et notamment : Comment positionner les éléments en CSS.

A+


Edit: reformulation et rajout d'un lien...
Modifié par Heyoan (29 Jul 2008 - 02:50)
Ok en faites il suffisait d'ajouter overflow: hidden; (merci)
edit: avec auto j'avais un scrollbar Smiley confus

Pour etre conforme au regle et si je veux garder mes images dams mon css, les regles conseils quoi pour remplacer les divs ? Des spans a la place ? ou des balices standard type paragraphe par exemple ?
Modifié par Elie42 (29 Jul 2008 - 18:27)
Pour les images, si tu veux t'en servir comme lien, il est préférable de les mettre dans le HTML (surtout si elles contiennent du texte).

Il n'y a rien de mal à insérer une image dans du HTML (surtout si elle est porteuse de contenu).